Heading

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.

Code

NameTypeDescriptionDefault
level1 | 2 | 3 | 4 | 5Defines 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 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
Required
text
stringHeading text.-
weight'light' | 'normal' | 'bold'Modifies the default weight of the heading.-
as'h1' | 'h2' | 'h3' | 'h4'| 'h5'Specifies the HTML tag of the heading.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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.-

Examples

Basic usage