Heading

The heading reset provides comprehensive styles to semantic HTML5 headings.

Mobile styles

Top to fourth level headings (H1 through H4) have mobile styles, meaning they shrink slightly on mobile viewports. Some components, like the card, will force the mobile styles of headings on all viewports.

Classes

While it is always good practice to semantically structure your pages with appropriate heading nesting, sometimes you need to change the presentational styles of headings. This is why Compass provides classes for all the headings (i.e. .h1, .h2, .h3, etc.).

Examples

Elements

The following example is all 6 HTML5 headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Classes

The following example is 6 paragraphs styled to looking like headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6