*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Font
- Nick Harris
Font stacks and sizes can be overridden by creating your own custom CSS variables.
Stacks
Out of the box Chameleon comes with two defined font stacks:
Font stack - standard
This font stack is used for all text in components that aren’t considered headings.
Font stack - decorative
This stack is used for headings only
Standard and Decorative font stacks can be the same font. This flexibility allows for quick theming of headings without having to define new CSS variables and doesn’t require a component update.
Sizes
Headings
Name | Size |
|---|---|
Heading XXL |
|
Heading XL |
|
Heading L |
|
Heading M |
|
Heading S Not fluid |
|
Heading XS Not fluid |
|
Body
Name | Size |
|---|---|
Body XL |
|
Body L |
|
Body M Not fluid |
|
Body S Not fluid |
|
Body XS Not fluid |
|
Overline Not fluid |
|
Links and buttons
Name | Size |
|---|---|
Link XL |
|
Link L |
|
Link M Not fluid |
|
Link S Not fluid |
|
Link XS Not fluid |
|
Button L Not fluid |
|
Button S Not fluid |
|
CTA Link L Not fluid |
|
CTA Link S Not fluid |
|
To be added:
Variable font size calculator