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.
| Name | Value |
|---|---|
| data-variant | long, short |
Example
Sizes
HTML
Press Enter to start editing
Unable to parse html
const Sizes = () => { return ( <> <Paragraph data-size='xl'>This is an xl paragraph</Paragraph> <Paragraph data-size='lg'>This is a lg paragraph</Paragraph> <Paragraph data-size='md'>This is a md paragraph</Paragraph> <Paragraph data-size='sm'>This is a sm paragraph</Paragraph> <Paragraph data-size='xs'>This is an xs paragraph</Paragraph> </> ); }; render(<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
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "long" | "default" | "short" | default | Adjusts styling for paragraph length |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |