Heading

1 example from SAP's documentation · no stylesheet in the package · Back to the gallery

About

Provides CSS classes and an SCSS mixin to style headings according to SAP design guidelines. Classes target specific heading levels, while the sap-heading mixin applies styles for h1 through h6. CSS Class: .sap-heading-number SCSS Mixin: @include sap-heading(level) where: number: is the heading level, an integer from 1 to 6 level: is the heading level -> h1, h2, h3, h4, h5, h6

Semantic Levels

There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6