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.

Deprecated

This component is no longer supported. Please use the Text component instead.

Mapping to the Text component

Small

Example
- <DisplayText size="small">Sales this year</DisplayText>
+ <Text variant="headingLg" as="p">Sales this year</Text>

Medium

Example
- <DisplayText size="medium">Sales this year</DisplayText>
+ <Text variant="headingXl" as="p">Sales this year</Text>

Large

Example
- <DisplayText size="large">Sales this year</DisplayText>
+ <Text variant="heading2xl" as="p">Sales this year</Text>

Extra large

Example
- <DisplayText size="extraLarge">Sales this year</DisplayText>
+ <Text variant="heading3xl" as="p">Sales this year</Text>

    On this page