Text Style

Best Practices

Text style should:

• Be used to guide users to understand which data is important
• Use Strong to highlight important data, such as Totals in a pricing table
• Use Subdued to de-emphasize less important text, such as the second line of an address.

Text style should NOT:

• Be used in the place of headings. Headings break up content into sections and can be used by screen reader users to identify sections of a page the user can quickly navigate to.

Examples

Text alignment

By default, text will be left-aligned within the available space.

• Use align to control the text alignment: left, center or right. Alter the alignment for different screen sizes using {base: 'left', medium: 'center'}.

Strong text style

Use to highlight important data, such as Totals in a pricing table.

Subdued text style

Use to de-emphasize less important text, such as the second line of an address. Subdued text may be used to indicate empty state, for example, "No orders placed".