Text

Examples

Body

View va-mobile_text–body in Storybook

Display

View va-mobile_text–display in Storybook

Heading

View va-mobile_text–heading in Storybook

Usage

When to use Text

• To add content to a mobile application screen.

When to consider something else

• Bulleted or numbered lists. Use the Text list component (coming soon).
• Smaller Navigation copy. Apply the Navigation text style directly to a text box, such as the bottom tab bar.

How this component works

• Use composite typography tokens. This component is built using the composite typography tokens. Designers and engineers are encouraged to use typography tokens to ensure a consistent look and feel throughout the app. Multiple typography tokens are combined to create composite tokens (aka text styles).
• Minimum paragraph spacing meets WCAG guidelines. Paragraph spacing is set to the minimum recommended values to align with accessibility guidelines (WCAG SC 1.4.12). While you can increase the amount of paragraph spacing, you should not decrease without consulting an accessibility specialist.

Behavior

Choosing between web variations

There are 9 variations of the Text component.

• Use a Heading variation (large, medium, small, x-small) for headings.
• Use a Body variation (large, medium, small, x-small) for body copy.
• Use the Display variation for larger display text.

Code usage

Mobile app