Headings:

Headings tags

The page always starts with h1 tag with heading--h2 class with type-2 style. The H tags should follow a chronological order on the page. We can't have missing H tag from the order.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 4

Heading 5

Paragraph tags

The paragraph can be used as the component or as the a normal p tag since it inherits the font-size and weight from body.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum eaque nobis obcaecati praesentium qui similique? Explicabo facere facilis harum laborum non nulla, officia praesentium sapiente tempora temporibus veniam vitae.

Documentation

Here is the documentation for the Headings, explaining their variants, sizes, and use cases.

  • Heading 1: h1 tag with heading--1 style is used once on a page for main titles
  • Heading 2: h2 tag with heading--2 style is used after h1 for secondary important titles, titles of sections.
  • Heading 3: h3 tag with heading--3 style is used for titles of cards and subsections.
  • H tags follow a semantic order for better analytics: h1, h2, h3, h4, h5