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