Design

​

Options

Text supports body text, headline, and eyebrow configurations with multiple sizing options to accommodate various typography scenarios.

​

Body Text

​

Body Text sizing

​

Styling

​

Headline

​

Headline sizing

​

Eyebrow

​

Eyebrow sizing

​

Behavior

Text responds to different style and size requirements while maintaining consistent typography.

​

Usage Guidelines

The text component should be regularly used to convey text throughout a page. Each of the major text styles used in the design system are options within Text.

​

When not to use

Text is not directly used in most components. In those cases, the built-in type opinions of the component are used instead.

​

How to Use

​

Type pairing and sizing

Refer to the typography foundations for suggested type pairing and size configurations.

​

Apply heading levels to headline text

The headline variant of Text should apply an appropriate HTML section heading (e.g., h1, h2). This value is independent of the size option applied to headlines.

​

Content

Content within Text should follow typography best practices for readability and hierarchy.

​

Accessibility

Out of the box, text provides necessary accessibility around sizing and color contrast.

​

Text color contrast with backgrounds

Text should follow the WCAG AA guidance on color contrast. By default, Anvil’s Text will provide at least 4.5:1 contrast with a white background. Use caution when using subdued on other background values, or when using custom color values in general, as they may not meet contrast guidance. For more guidance on text hierarchy and semantic markup, see semantic markup best practices.