--- title: Paragraph description: >- 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. api_version: 2026-04 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/paragraph.md --- # 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/text). Paragraph doesn't support text truncation or `maxLines`. Manage overflow with a parent layout component. ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Shipping estimates**: Display delivery timeframes or tracking information as readable body text. * **Legal disclosures**: Present fine-print text about taxes, duties, or terms beneath the order total. * **Product descriptions**: Render rich text blocks with inline links or emphasis for product details. * **Warning messages**: Communicate address validation issues or stock alerts with semantic tone and color. *** ## Properties Configure the following properties on the paragraph component. * **accessibilityVisibility** **'visible' | 'hidden' | 'exclusive'** **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. * **color** **'base' | 'subdued'** **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. * **dir** **'ltr' | 'rtl' | 'auto' | ''** **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir). * **id** **string** 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. * **lang** **string** **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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry). 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. * **tone** **'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'** **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. * **type** **'small' | 'paragraph'** **Default: 'paragraph'** The semantic type and styling treatment for the paragraph content. Other presentation properties on `s-paragraph` override 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. *** ## Examples ### Display 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 ![A paragraph of body text rendered in the default font size and line height.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/paragraph-default-B-syu5wX.png) ## html ```html Ship in 1-2 business days. ``` ### Use 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 ```html We can't ship to this address. Update your details to continue. ``` ### De-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 ```html Prices are in USD and include applicable taxes. Shipping costs are calculated at checkout based on your delivery address. ``` *** ## Best practices * **Apply tone for semantic meaning**: Set `tone="warning"` or `tone="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 customers can scan content quickly. * **Layer tone and color deliberately**: Pair `tone` with `color` only when the combination still meets contrast and readability needs. ***