Skip to main content

What are you looking for?

Try searching for…

Components

Paragraph

Paragraph is used for continuous text and is typically applied in articles, components, help text, and similar content.

HTML

Press Enter to start editing
Unable to parse html
const PreviewEn = () => {
  return (
    <Paragraph>
      The privacy statement provides information about what personal data we
      process, how this data is processed, and what rights you have.
    </Paragraph>
  );
};

render(<PreviewEn />)

Usage

Use the class name ds-paragraph on <p>.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

No relevant css variables found.

Data Attributes
NameValue
data-variantlong, short

Example

Sizes

React

variant
Description

Adjusts styling for paragraph length

Type
"long" | "default" | "short"
Default
default
asChild
Description

Change the default rendered element for the one passed as a child, merging their props and behavior.

Type
boolean
Default
false
NameTypeDefaultDescription
variant"long" | "default" | "short"default

Adjusts styling for paragraph length

asChildbooleanfalse

Change the default rendered element for the one passed as a child, merging their props and behavior.

Edit this page on github.com (opens in a new tab)