---
title: Paragraph
description: 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.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/typography/paragraph
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/typography/paragraph.md
---

# 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.

## Properties

* accessibilityVisibility

  "visible" | "hidden" | "exclusive"

  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.

* color

  "base" | "subdued"

  Modify the color to be more or less intense.

* dir

  "" | "auto" | "ltr" | "rtl"

  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)

* fontVariantNumeric

  "auto" | "normal" | "tabular-nums"

  Set the numeric properties of the font.

* lineClamp

  number

  Truncates the text content to the specified number of lines.

* tone

  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"

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

## Slots

* children

  HTMLElement

  The content of the Paragraph.

### Examples

* #### Code

  ##### Default

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

## Useful 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.

## Best 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.