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 | 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 | 500 |
--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 | 500 |
--description-large-line-height
|
1.25 | 1.25 | 1.2 |
| Xlarge | |||
--description-xlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--description-xlarge-font-size
|
21px | 21px | calc(21px * var(--ui-scale)) |
--description-xlarge-font-smoothing
|
auto | auto | auto |
--description-xlarge-font-weight
|
500 | 500 | 500 |
--description-xlarge-line-height
|
1.2 | 1.2 | 1.2 |
| Xxlarge | |||
--description-xxlarge-font-family
|
"Inter Variable", Inter | "Inter Variable", Inter | "Inter Variable", Inter |
--description-xxlarge-font-size
|
24px | 24px | calc(24px * var(--ui-scale)) |
--description-xxlarge-font-smoothing
|
auto | auto | auto |
--description-xxlarge-font-weight
|
475 | 475 | 475 |
--description-xxlarge-line-height
|
1.2 | 1.2 | 1.2 |