Komponenter
Heading
Heading brukes til å strukturere innhold og skape hierarki på siden.
HTML
Trykk Enter for å redigere
Unable to parse html
const Preview = () => { return <Heading>Dette er en overskrift</Heading>; }; render(<Preview />)
Bruk
Bruk klassenavnet ds-heading for å style et HTML <h1>-<h6>-element.
Eksempel
Størrelser
HTML
Trykk Enter for å redigere
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. |