Components
Paragraph
Paragraph is used for continuous text and is typically applied in articles, components, help text, and similar content.
React
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 />)
- 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. |
Usage
Examples
Sizes
React
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 />)
HTML
Use the class name ds-paragraph on <p>.
CSS variables and data attributes
No relevant css variables found.
| Name | Value |
|---|---|
| data-variant | long, short |