Skip to main content

Paragraph

The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text. Use paragraph to present standalone blocks of readable content, descriptions, or explanatory text.

Paragraphs support alignment options and can wrap inline components to create rich, formatted content blocks. For inline text styling, use text.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

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
'ltr' | 'rtl' | 'auto' | ''
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 id
id
string

A unique identifier for the element.

Anchor to lang
lang
string
Default: ''

Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)

It is recommended to combine it with the dir attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.

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

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

Anchor to type
type
Default: 'paragraph'

Provide semantic meaning and default styling to the paragraph.

Other presentation properties on s-paragraph override the default styling.

Examples
<s-paragraph>Ship in 1-2 business days.</s-paragraph>

Preview

Anchor to best-practicesBest Practices

  • Create contrast between more and less important text with properties such as color and tone.
Was this page helpful?