Headings
Section and subsection titles
Demo
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
API
Tags
| Name | Description |
|---|---|
<h1-h5>
|
Standard HTML tags, accepts content |
Guidelines
Padding and margins
Browser default margins are used for <h> tags, which may not align with UX specifications. Use util classes to adjust as necessary.
Alternative heading tags
It is best accessibility practice to use the "right" HTML element for a particular job. Therefore,
<h> tags should be used for headings where feasible. However, there may be edge cases where a
particular heading is not represented with a <h> tag. In order to make this text accessible to
screen readers, the element must be given role="heading" and the appropriate value must be assigned to
the aria-level attribute. An example is provided below for text that should be represented on screen
readers as a <h2> tag:
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com