Choose a version:

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": 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": Modify the color to be more or less intense.
Anchor to dir 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)
Anchor to fontVariantNumeric fontVariantNumeric "auto" | "normal" | "tabular-nums": Set the numeric properties of the font.
Anchor to lineClamp lineClamp number: Truncates the text content to the specified number of lines.
Anchor to tone tone "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution": Sets the tone of the component, based on the intention of the information being conveyed.

Paragraph

accessibilityVisibility
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.
```
"visible" | "hidden" | "exclusive"
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
color
Modify the color to be more or less intense.
```
"base" | "subdued"
```
connectedCallback
```
() => void
```
dir
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)
```
"" | "auto" | "ltr" | "rtl"
```
disconnectedCallback
```
() => void
```
fontVariantNumeric
Set the numeric properties of the font.
```
"auto" | "normal" | "tabular-nums"
```
lineClamp
Truncates the text content to the specified number of lines.
```
number
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```
tone
Sets the tone of the component, based on the intention of the information being conveyed.
```
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
```

declare class Paragraph extends PreactCustomElement implements ParagraphProps {
  accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];
  accessor lineClamp: ParagraphProps['lineClamp'];
  accessor tone: Extract<
    ParagraphProps['tone'],
    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
  >;

  accessor color: ParagraphProps['color'];
  accessor dir: ParagraphProps['dir'];
  accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

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>

examples

Code

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

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-paragraph>
  Shopify POS is the easiest way to sell your products in person. Available for
  iPad, iPhone, and Android.
</s-paragraph>
</body></html>

Preview

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?