| Name | Type | Description | Default |
|---|---|---|---|
| as | 'h1' | 'h2' | 'h3' | 'h4'| 'h5' | 'h6' | Specifies the HTML tag of the heading. | - |
| level | 1 | 2 | 3 | 4 | 5 | 6 | Defines the heading level from 1 to 6. The styles of the heading are applied according to the level. The HTML tag of the heading will be the one specified in the as prop. If no as prop is provided, the tag of the heading is the the one corresponding to the value of the level prop (for example, level 1 will render an h1 tag). | 1 |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
Required text | string | Heading text. | - |
| weight | 'default' | 'regular' | 'light' | Modifies the weight of the heading. | 'default' |
() => { return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-l)" direction="column"> <DxcHeading level={1} text="Introduction" /> <DxcHeading level={2} text="Use case" /> <DxcHeading level={3} text="Default" /> <DxcHeading level={4} text="Best practices" /> <DxcHeading level={5} text="Example" /> <DxcHeading level={6} text="Code" /> </DxcFlex> </DxcInset> ); }