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 can wrap inline components to create rich, formatted content blocks. For inline text styling, use text.
Paragraph doesn't support text truncation or maxLines. Manage overflow with a parent layout component.
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
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
Configure the following properties on the paragraph component.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility'visible' | 'hidden' | 'exclusive''visible' | 'hidden' | 'exclusive'Default: 'visible'Default: 'visible'
Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.
visible: The element is visible to all users (both sighted users and screen readers).hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
- Anchor to colorcolorcolor'base' | 'subdued''base' | 'subdued'Default: 'base'Default: 'base'
The color emphasis level that controls visual intensity.
subdued: Deemphasized color for secondary text, supporting labels, and less critical interface elements.base: Primary color for body text, standard UI elements, and general content with good readability.strong: Emphasized color for headings, key labels, and interactive elements that need prominence.
- Anchor to dirdirdir'ltr' | 'rtl' | 'auto' | '''ltr' | 'rtl' | 'auto' | ''Default: ''Default: ''
Indicates the directionality of the element’s text.
ltr: The languages written from left to right (such as English).rtl: The languages written from right to left (such as Arabic).auto: The user agent determines the direction based on the content."": The direction is inherited from parent elements (equivalent to not setting the attribute).
Learn more about the dir attribute.
- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to langlanglangstringstringDefault: ''Default: ''
The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation.
The value should be a valid language subtag from the IANA language subtag registry.
It is recommended to combine it with the
dirattribute to ensure the text is rendered correctly if the surrounding content’s direction is different.- Anchor to tonetonetone'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical''custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'Default: 'auto'Default: 'auto'
The semantic meaning and color treatment of the component.
auto: Automatically determined based on context.neutral: General information without specific intent.info: Informational content or helpful tips.success: Positive outcomes or successful states.caution: Advisory notices that need attention.warning: Important warnings about potential issues.critical: Urgent problems or destructive actions.accent: Highlighted or promotional content.custom: Custom styling controlled by your theme.
- Anchor to typetypetype'small' | 'paragraph''small' | 'paragraph'Default: 'paragraph'Default: 'paragraph'
The semantic type and styling treatment for the paragraph content.
Other presentation properties on
s-paragraphoverride the default styling.paragraph: A semantic type that indicates the text is a structural grouping of related content.small: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.
Anchor to ExamplesExamples
Anchor to Display a basic paragraphDisplay a basic paragraph
Render a block of body text with a shipping estimate message. This example displays an s-paragraph with default styling for a delivery timeframe.
Display a basic paragraph
html
Anchor to Use tone and color to style messagingUse tone and color to style messaging
Apply semantic color and muted styling to delivery messaging. This example combines tone="warning" with color="subdued" so the warning reads clearly without shouting.
html
Anchor to De-emphasize text using colorDe-emphasize text using color
De-emphasize legal or tax copy that must appear but shouldn't dominate the layout. This example sets color="subdued" on s-paragraph for text below the order total.
html
Anchor to Style inline text within a paragraphStyle inline text within a paragraph
Emphasize specific words within body text by nesting s-text inside s-paragraph. This example wraps a delivery timeframe in s-text with type="strong" to draw attention while keeping the surrounding text at default weight.html
Anchor to Best practicesBest practices
- Use paragraph for block-level text: Wrap body copy and descriptions in
s-paragraph. Uses-textinside paragraphs to style specific words or phrases. - Apply tone for semantic meaning: Set
tone="warning"ortone="critical"to convey urgency rather than relying on color alone. - Create visual hierarchy with color: Use
color="subdued"for less important text like disclaimers and fine print. - Keep paragraphs focused: Limit each paragraph to a single idea so buyers can scan content quickly.
- Layer tone and color deliberately: Pair
tonewithcoloronly when the combination still meets contrast and readability needs.