Heading component is an essential element that contributes to define a great hierarchy within the application. It helps to give semantic meaning to the content as well as contributing to define a good structure for SEO (search engine optimization). The implementation will rely on the use of HTML tags.
Name | Default | Description |
---|---|---|
level: number | 1 | Defines the heading level from 1 to 5. 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 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop. |
text: string | Heading text. | |
as: 'h1' | 'h2' | 'h3' | 'h4'| 'h5' | Specifies the html tag of the heading. | |
weight: 'light' | 'normal' | 'bold' | Modifies the default weight of the heading. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. |