Anvil2

Anvil2

New toast message appeared. Press the t key to focus on the toast messages. Press escape to return focus to previous position.

Text

The text component enables designers and developers to use properly styled typography.

Text Overview

On This Page

AnatomyOptionsBody TextHeadlineEyebrowKeyboard InteractionsAccessibility

Options

Body Text

Body Text

<Grid
  alignContent="center"
  style={{
    height: "80px",
  }}
>
  <Text size="xlarge">Body Text</Text>
</Grid>

Body Text sizing

Small body text

Medium body text

Large body text

Extra large body text

<Grid
  gap="6"
>
  <Text variant="body" size="small">Small body text</Text>
  <Text variant="body" size="medium">Medium body text</Text>
  <Text variant="body" size="large">Large body text</Text>
  <Text variant="body" size="xlarge">Extra large body text</Text>
</Grid>

Styling

Body text with a bold styling applied to it.

Body text with a italic styling applied to it.

Body text with a subdued styling applied to it.

<Grid
  gap="6"
>
  <Text variant="body" size="medium">Body text with a <b>bold styling</b> applied to it.</Text>
  <Text variant="body" size="medium">Body text with a <i>italic styling</i> applied to it.</Text>
  <Text variant="body" size="medium">Body text with a <Text inline subdued>subdued styling</Text> applied to it.</Text>
</Grid>

Headline

Headline

<Grid
  alignContent="center"
  style={{
    height: "80px"
  }}
>
  <Text variant="headline" size="xlarge" el="h1">Headline</Text>
</div>

Headline sizing

Small headline

Medium headline

Large headline

Extra large headline

<Grid
  gap="6"
>
  <Text variant="headline" size="small" el="h4">Small headline</Text>
  <Text variant="headline" size="medium" el="h3">Medium headline</Text>
  <Text variant="headline" size="large" el="h2">Large headline</Text>
  <Text variant="headline" size="xlarge" el="h1">Extra large headline</Text>
</Grid>

Eyebrow

Eyebrow
<Grid
  alignContent="center"
  style={{
    height: "80px",
  }}
>
  <Text variant="eyebrow" size="large">Eyebrow</Text>
</Grid>

Eyebrow sizing

Small eyebrowMedium eyebrowLarge eyebrow
<Grid
  gap="6"
>
  <Text variant="eyebrow" size="small">Small eyebrow</Text>
  <Text variant="eyebrow" size="medium">Medium eyebrow</Text>
  <Text variant="eyebrow" size="large">Large eyebrow</Text>
</Grid>

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.