1.9 KiB
import Heading from "~/components/ui/Heading.vue";
Heading
Use a heading when the content or the page structure requires it. Define the visual style independently from the logical hierarchy.
- Each page has exactly one
h1with the visual sizepage-heading. - Headings always describe the content below. Do not use headings for input captions.
- Try to avoid gaps in the hierarchy.
Semantic heading level
Use heading levels wherever you want to add logical (not necessarily visual) hierarchy.
Consult the allyproject for a comprehensive guide on headings.
Visual sizes for page sections and subsections
Page heading
Use this visual size on the main heading of the page.
Section heading
Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size.
Subsection heading
Use subsection headings to break long sections or forms with several groups into digestible subsections.
Visual sizes for special elements
Caption
Caption-style headings are found only within forms.
Title
Use this visual size to title Tabs, Channels, Cards and Activities.
Radio
Radio cards have giant titles.
Secondary
A card may have a secondary title, as exemplified in the designs.