<script setup>
  import Heading from "~/components/ui/Heading.vue"
</script>

```ts
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 `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](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/).

## Visual sizes for page sections and subsections

---

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

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

---

<Heading h3 section-heading>Section heading</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</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</Heading>

Caption-style headings are found only within forms.

---

<Heading h3 title>Title</Heading>

Use this visual size to title [Tabs](/components/ui/tabs), Channels, [Cards](/components/ui/card) and [Activities](/components/ui/activity).

---

<Heading h3 radio>Radio</Heading>

Radio cards have giant titles.

---

<Heading h3 secondary>Secondary</Heading>

A card may have a secondary title, [as exemplified in the designs](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=5e293790-52d3-11ed-9497-8deeaf0bfa97).
