Typography utilities let you display text related elements like heading or paragraphs. It also allows you to change text display if needed (font size, colour, ...).
Headings
Use classes ecl-u-type-heading-1 to ecl-u-type-heading-5 to apply headings styles.
See typography guidelines for more information.
Paragraph
Use class ecl-u-type-paragraph on a <p> element to apply related styles.
Several type of paragraphs are availables, depending on your needs.
See typography guidelines for more information.
Text colour
By using classes ecl-u-type-color-* you can set the colour of the text. Available colours are:
- primary colours (blue, yellow, grey)
- black and white
- the grey palette
- the blue palette
- the notification palette
Note that the yellow palette is not available for text colour; text should not be displayed in yellow.
Accessibility warning
When changing text colour, make sure to always keep a high enough contrast ratio (4.5:1 for normal text and 3:1 for large text).
There are several online tools to check the contrast, for instance Color Contrast Checker
Text alignment
By using classes ecl-u-type-align-* you can set the alignment of the text. Available values are:
ecl-u-type-align-leftecl-u-type-align-rightecl-u-type-align-center
Text styles
Several classes are available to alter text display (uppercase, underline, strike, ...).
In most cases, styles included in components are enough, but you can use one of these classes in for specific cases.
See the showcase to have the list of classes.