import Heading from "@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 h1 with the visual size page-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 ​

<Heading h1="Page heading" page-heading />

Page heading

Use this visual size on the main heading of the page.

<Heading h3="Section heading" section-heading />

Section heading

Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size.

<Heading h3="Subsection heading" subsection-heading />

Subsection heading

Use subsection headings to break long sections or forms with several groups into digestible subsections.

Visual sizes for special elements ​

<Heading h4="Caption" caption />

Caption

Caption-style headings are found only within forms.

<Heading h3="Title" title />

Title

Use this visual size to title Tabs, Channels, Cards and Activities.

<Heading h3="Radio" radio />

Radio

Radio cards have giant titles.

<Heading h3="Secondary" secondary />

Secondary

A card may have a secondary title, as exemplified in the designs.

Add content to the left and to the right ​

<Heading h2="Heading" page-heading>
  <template #before>
    (Before)
  </template>
  <template #after>
    (After)
  </template>
</Heading>

(Before) Heading (After)

<Heading
  v-if="isLevel1And2"
  h1="Page heading (h1)"
  page-heading
/>
<Heading
  v-if="isLevel1And2"
  h2="Section heading (h2)"
  section-heading
/>
<Heading
  v-if="isLevel1And2"
  h2="Large section heading (h2)"
  subsection-heading
/>
<Heading
  h3="Subsection heading"
  subsection-heading
/>
<hr>
<Heading
  h4="Caption"
  caption
/>
<Heading
  h4="Title"
  title
/>
<Heading
  h4="Radio"
  radio
/>