Skip to main content

Paragraph

Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.

Anchor to propertiesProperties

Anchor to accessibilityVisibility
accessibilityVisibility
"visible" | "hidden" | "exclusive"
Default: 'visible'

Changes the visibility of the element.

  • visible: the element is visible to all users.
  • hidden: the element is removed from the accessibility tree but remains visible.
  • exclusive: the element is visually hidden but remains in the accessibility tree.
Anchor to color
color
"base" | "subdued"
Default: 'base'

Modify the color to be more or less intense.

Anchor to dir
dir
"" | "auto" | "ltr" | "rtl"
Default: ''

Indicates the directionality of the element’s text.

  • ltr: languages written from left to right (e.g. English)
  • rtl: languages written from right to left (e.g. Arabic)
  • auto: the user agent determines the direction based on the content
  • '': direction is inherited from parent elements (equivalent to not setting the attribute)
Anchor to fontVariantNumeric
fontVariantNumeric
"auto" | "normal" | "tabular-nums"
Default: 'auto' - inherit from the parent element

Set the numeric properties of the font.

Anchor to lineClamp
lineClamp
number
Default: Infinity - no truncation is applied

Truncates the text content to the specified number of lines.

Anchor to tone
tone
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
Default: 'auto'

Sets the tone of the component, based on the intention of the information being conveyed.

Was this section helpful?

Anchor to slotsSlots

Anchor to children
children
HTMLElement

The content of the Paragraph.

Was this section helpful?

Code

<s-paragraph>
Shopify POS is the easiest way to sell your products in person. Available for
iPad, iPhone, and Android.
</s-paragraph>

Anchor to useful-forUseful for

  • Displaying text content in a paragraph format.
  • Grouping elements with the same style. For instance, icons inside a paragraph will automatically adopt the paragraph's tone.
Was this section helpful?

Anchor to best-practicesBest practices

  • Use short paragraphs to make your content scannable.
  • Use plain and clear terms.
  • Don't use jargon or technical language.
  • Don't use different terms to describe the same thing.
  • Don't duplicate content.
Was this section helpful?

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-basic-usageBasic Usage

Demonstrates a simple paragraph with default styling, showing how to use the paragraph component for standard text content.

Anchor to example-with-tone-and-colorWith Tone and Color

Illustrates how to apply different tones and color variations to convey different types of information, such as informational and success messages.

Anchor to example-line-clampingLine Clamping

Shows how to limit the number of lines displayed using the lineClamp prop, which truncates long text with an ellipsis after the specified number of lines.

Anchor to example-tabular-numbersTabular Numbers

Demonstrates the use of tabular numbers with fontVariantNumeric, ensuring consistent alignment and readability for numerical data.

Anchor to example-rtl-supportRTL Support

Illustrates right-to-left (RTL) text rendering, showing how the paragraph component supports internationalization and different text directions.

Anchor to example-screen-reader-textScreen Reader Text

Shows how to use the accessibilityVisibility prop to create text that is exclusively available to screen readers, improving accessibility for assistive technologies.

Anchor to example-admin-ui-patternsAdmin UI Patterns

Showcases various tone and color combinations for different administrative messages, illustrating how paragraph can communicate different types of information in a user interface.

Was this section helpful?

Basic Usage

<s-paragraph>
Track inventory across all your retail locations in real-time.
</s-paragraph>