Description
The Description component provides a standardized way to display descriptive text content with consistent styling.
#
Basic Usage
Use the description class to style your descriptive text.
This is a sample description text that demonstrates how the Description component renders content.
Description
<span class="description">This is a sample description text.</span>#
Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
| Base | ||||
--description-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | - |
--description-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(13px * var(--text-ui-scale)) | - |
--description-font-smoothing
|
none | none | auto | - |
--description-font-weight
|
400 | 400 | 400 | - |
--description-line-height
|
1 | 1 | 1.2 | - |
| Large | ||||
--description-large-font-family
|
"NicoClean" | "NicoClean" | "Inter Variable", Inter | - |
--description-large-font-size
|
calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | calc(16px * var(--text-ui-scale)) | - |
--description-large-font-smoothing
|
none | none | auto | - |
--description-large-font-weight
|
400 | 400 | 700 | - |
--description-large-line-height
|
1.25 | 1.25 | 1.2 | - |
| Xlarge | ||||
--description-xlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--description-xlarge-font-size
|
calc(21px * var(--text-ui-scale)) | - | calc(21px * var(--text-ui-scale)) | - |
--description-xlarge-font-smoothing
|
auto | - | auto | - |
--description-xlarge-font-weight
|
500 | - | 500 | - |
--description-xlarge-line-height
|
1.2 | - | 1.2 | - |
| Xxlarge | ||||
--description-xxlarge-font-family
|
"Inter Variable", Inter | - | "Inter Variable", Inter | - |
--description-xxlarge-font-size
|
calc(24px * var(--text-ui-scale)) | - | calc(24px * var(--text-ui-scale)) | - |
--description-xxlarge-font-smoothing
|
auto | - | auto | - |
--description-xxlarge-font-weight
|
475 | - | 475 | - |
--description-xxlarge-line-height
|
1.2 | - | 1.2 | - |