Typography
Description goes here.
Font Size
Font size tokens control font sizes for components and text modifiers.
| Description | Token | Value | Example |
|---|---|---|---|
Font Size: xxsXX-small font size used as secondary text or when required due to space. |
var(--token-size-font-xxs)
$token-size-font-xxs
|
0.625rem | Aa |
Font Size: xsX-small font size used as secondary text or when required due to space. |
var(--token-size-font-xs)
$token-size-font-xs
|
0.75rem | Aa |
Font Size: smSmall font size used as secondary body text size. |
var(--token-size-font-sm)
$token-size-font-sm
|
0.875rem | Aa |
Font Size: mdMedium font size used as default body text size. |
var(--token-size-font-md)
$token-size-font-md
|
1rem | Aa |
Font Size: lgLarge font size used for sub headings. |
var(--token-size-font-lg)
$token-size-font-lg
|
1.25rem | Aa |
Font Size: xlX-large font size used for section headings. |
var(--token-size-font-xl)
$token-size-font-xl
|
2rem | Aa |
Font Size: xxlXX-large font size used a page headings. |
var(--token-size-font-xxl)
$token-size-font-xxl
|
2.5rem | Aa |
Font Size: xxxlXX-large font size used a page headings. |
var(--token-size-font-xxxl)
$token-size-font-xxxl
|
3rem | Aa |
Responsive Helpers
Typography helpers are also available with responsive classes.
Lorem ipsum dolor sit amet consectetur adipiscing elit donec dignissim ultricies pellentesque. Lorem ipsum dolor sit amet consectetur adipiscing elit donec dignissim ultricies pellentesque.
Ordered List
Order lists are available in both `number` and `alpha` formats.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Unordered List
Unordered lists are also available in bullets.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.