Skip to contentShopify logoPolaris

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 merchants such as in marketing content or to capture attention during onboarding.

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

import {DisplayText} from '@shopify/polaris';
import React from 'react';

function DisplayExample() {
  return <DisplayText size="extraLarge">Good evening, Dominic.</DisplayText>;
}

Use for display text that’s more important than the medium size, but less important than extra large.

import {DisplayText} from '@shopify/polaris';
import React from 'react';

function DisplayExample() {
  return <DisplayText size="large">Good evening, Dominic.</DisplayText>;
}

Use for display text that’s more important than the small size, but less important than large.

import {DisplayText} from '@shopify/polaris';
import React from 'react';

function DisplayExample() {
  return <DisplayText size="medium">Good evening, Dominic.</DisplayText>;
}

Use for text that would otherwise use body text, but that needs to scale with other display text.

import {DisplayText} from '@shopify/polaris';
import React from 'react';

function DisplayExample() {
  return <DisplayText size="small">Good evening, Dominic.</DisplayText>;
}

Props

Want to help make this feature better? Please share your feedback.

interface DisplayTextProps
element?'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'

Name of element to use for text.

Defaults to 'p'.

size?'small' | 'medium' | 'large' | 'extraLarge'

Size of the text.

Defaults to 'medium'.

children?React.ReactNode

Content to display.

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

Display text should 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
    • Write in sentence case

Accessibility

Although display text creates an interesting visual experience, it doesn’t replace the semantic structure provided by HTML headings.

By default, the display text component outputs text in an HTML paragraph (<p>). If a heading tag is needed for display text, use the element prop to set the heading level.

Do

Use display text to create visual interest along with a meaningful heading structure.

Don’t

Use display text in place of standard headings. Use the heading component and subheading component to provide structure.