Text

Example

Live

Defines HTML text

Code

• Examples
• CSS Variables

Examples

Body style

Subheading style

Standard Body styling should be used for paragraph text. The Subheading style can be applied to a <p> when you need an increased body size, such as introductory text following a H1 that encapsulates the page's intention or subtext within a hero banner.

Tailwind

Alert information

These examples require Tailwind CSS. Refer to the getting started documentation to add styling

Text Colours

Alert information

Be careful setting the text colour via utility classes as it can impact the brand styling.

Only apply color based utility classes if the styling is consistent across all brands in an application.

The brand configuration object (see examples and docs) provides a way for multi-branded applications to manage and control the styling of components for each brand in a simple way.

The full list of colour classes can be found in the Text colour docs.

FontSize (Tailwind)

Below there are some examples for font size. Please see tailwind's full documentation on font size.

Margin, Padding Alignment (Tailwind)

Below there are some examples. Please see tailwind's full documentation for:

• Tailwind margin
• Tailwind padding
• Tailwind align

Visibility display/hidden (Tailwind)

Please see tailwind's full documentation on visibility and also see display/hidden