Text
EuiText is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced style it only accepts raw XHTML.
- All your XHTML elements should be direct descendants of EuiText. You should avoid wrapping them in a
divorspan. This will ensure styles are applied correctly. - Avoid nesting React components which would break their styling.
EuiText can ensure proper line-length for readability by setting a max-width on the entire component.
To add the max-width setting, set grow=false.
Text can come in various sizes
Using the size prop on EuiText you can get smaller sizes of text than the default.
This demo compares the scaling for all sizes. The goal is that the every line-height lands on the 4px baseline grid.
Coloring text
There are two ways to color text. Either individually by applying EuiTextColor on individual text objects,
or by passing the color prop directly on EuiText for a blanket approach across the entirety of your text.
Alignment
There are two ways to align text. Either individually by applying EuiTextAlign on individual text objects,
or by passing the textAlign prop directly on EuiText for a blanket approach across the entirety of your text.