Display text

Display styles make a bold visual statement. Use them to create impact when the main goal is visual storytelling. For example, use display text to convince or reassure a merchant such as in marketing content or to capture attention during onboarding.


Use this size sparingly and never multiple times on the same page.

Drag to resize example
<DisplayText size="extraLarge">Good evening, Dominic.</DisplayText>
Content to display
Name of element to use for text
Size of the text

Best Practices

  • Use when the primary goal of the page is communication rather than interaction.
  • Use larger display text sizes when a page is focused around a single message. In these cases it may be paired with an illustration.
  • Use smaller display text to pair with larger text, or alone as part of more complex data displays such as dashboards.

Content guidelines

Display text

  • Be benefits-driven and focused on information that is most important to merchants
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep display text content to a short sentence that’s just a few words in length
    • Avoid using punctuation such as periods, commas, or semicolons
    • Avoid using exclamation marks—display text already makes enough of a statement without an exclamation mark
    • Written in sentence case