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.


level: number1Defines 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: stringHeading 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 | objectSize 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.


Basic usage