Components
Heading
Heading is used to structure content and create hierarchy on a page.
HTML
Press Enter to start editing
Unable to parse html
const PreviewEn = () => { return <Heading>This is a heading</Heading>; }; render(<PreviewEn />)
Usage
Use the class name ds-heading to style an HTML <h1>-<h6> element.
Example
Sizes
HTML
Press Enter to start editing
Unable to parse html
const Sizes = () => ( <> <Heading data-size='2xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xl heading </Heading> <Heading data-size='xl' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xl heading </Heading> <Heading data-size='lg' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a lg heading </Heading> <Heading data-size='md' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a md heading </Heading> <Heading data-size='sm' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a sm heading </Heading> <Heading data-size='xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is an xs heading </Heading> <Heading data-size='2xs' style={{ marginBottom: 'var(--ds-size-4)' }}> This is a 2xs heading </Heading> </> ); render(<Sizes />)
React
- level
- Description
Heading level. This will translate into any h1-6 level unless `asChild` is `true`
- Type
1 | 2 | 3 | 4 | 5 | 6- Default
2
- 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 |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level. This will translate into any h1-6 level unless `asChild` is `true` |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |