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