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. All the colours listed in the guidelines are available.
These utilities can also be used to change icons colour.
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.