Sizes
Each step follows --eun-fontSize-<step>. Nine steps, from xxs
(fine print) to xxxxl (hero display text).
Aa (xxxxl)
Aa (xxxl)
Aa (xxl)
Aa (xl)
Aa (l)
Aa (m)
Aa (s)
Aa (xs)
Aa (xxs)
| Token | Value | Typical use |
|---|---|---|
--eun-fontSize-xxs |
0.4rem |
Fine print |
--eun-fontSize-xs |
0.6rem |
size="xs"/"s" eun-button, badges |
--eun-fontSize-s |
0.82rem |
Default body/control text |
--eun-fontSize-m |
1rem |
size="l" eun-button |
--eun-fontSize-l |
1.3rem |
size="xl" eun-button, subheadings |
--eun-fontSize-xl |
1.6rem |
Section headings |
--eun-fontSize-xxl |
2rem |
Page headings |
--eun-fontSize-xxxl |
3.4rem |
Display text |
--eun-fontSize-xxxxl |
5rem |
Hero text |
Usage
.custom-label {
font-size: var(--eun-fontSize-s);
}eun-button's size attribute switches between these directly. See