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/8/16-bit |
|---|---|---|---|---|
| Base | ||||
--description-font-family
|
"NicoPups" | "NicoPups" | "Inter Variable", Inter | — |
--description-font-size
|
16px | 16px | calc(13px * var(--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
|
16px | 16px | calc(16px * var(--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
|
21px | — | calc(21px * var(--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
|
24px | — | calc(24px * var(--ui-scale)) | — |
--description-xxlarge-font-smoothing
|
auto | — | auto | — |
--description-xxlarge-font-weight
|
475 | — | 475 | — |
--description-xxlarge-line-height
|
1.2 | — | 1.2 | — |