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.
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. Inside a Page, PageHeader already renders the h1, so body headlines start at h2.
DoLeave size off section headings
Omit size on section titles so they read as titles (default). Reserve size="small" for the deepest sub-labels.
Don’tUse in most components
Text is not directly used in most components. In those cases, the built-in type opinions of the component are used instead.
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.
Last modified on October 12, 2026
Was this page helpful?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
