Heading

Headings whose semantic level and visual size are set independently.

Spice and Wolf

Dengeki Bunko, published 10 February 2006.

Volume One: Setting Out

Chapter One: Morning at the Harbour

<script setup lang="ts">
  import { Heading, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Heading :level="1">Spice and Wolf</Heading>
    <Text tone="muted">Dengeki Bunko, published 10 February 2006.</Text>
    <Heading :level="2">Volume One: Setting Out</Heading>
    <Heading :level="3">Chapter One: Morning at the Harbour</Heading>
  </Stack>
</template>

vue

Usage

import { Heading } from '@hina-ui/vue'

level decides which of h1 to h6 is rendered and defaults to 2. The font size follows the level, so level is usually the only property you need.

Section title

<script setup lang="ts">
  import { Heading } from '@hina-ui/vue'
</script>

<template>
  <Heading :level="2">Section title</Heading>
</template>

vue

Examples

Levels

Six levels map to six sizes, from 30 pixels down to 14. Sizes of xl and above tighten the letter spacing.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

<script setup lang="ts">
  import { Heading, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Heading :level="1">Heading level 1</Heading>
    <Heading :level="2">Heading level 2</Heading>
    <Heading :level="3">Heading level 3</Heading>
    <Heading :level="4">Heading level 4</Heading>
    <Heading :level="5">Heading level 5</Heading>
    <Heading :level="6">Heading level 6</Heading>
  </Stack>
</template>

vue

Semantics apart from size

size sets the font size without changing the tag. The heading outline follows the content, the visual size follows the layout, and the two need not agree.

Level 3 tag, level 1 size

Level 1 tag, body size

<script setup lang="ts">
  import { Heading, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Heading :level="3" size="2xl">Level 3 tag, level 1 size</Heading>
    <Heading :level="1" size="base">Level 1 tag, body size</Heading>
  </Stack>
</template>

vue

Weight

Defaults to semibold. Use medium or normal where a page needs lighter headings.

Semibold, the default

Medium weight

Regular weight

<script setup lang="ts">
  import { Heading, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Heading :level="3" weight="semibold">Semibold, the default</Heading>
    <Heading :level="3" weight="medium">Medium weight</Heading>
    <Heading :level="3" weight="normal">Regular weight</Heading>
  </Stack>
</template>

vue

Truncation

With truncate, a heading wider than its container ends in an ellipsis and never wraps.

A very long section title truncated at the container edge with an ellipsis

<script setup lang="ts">
  import { Heading } from '@hina-ui/vue'
</script>

<template>
  <Heading :level="3" truncate class="max-w-xs">
    A very long section title truncated at the container edge with an ellipsis
  </Heading>
</template>

vue

Headings in body content

Prose applies the same sizes to native h1 to h6 inside it, so rendered Markdown and rich text need no tag replacement.

A heading in body content

Rendering Markdown needs no tag replacement.

The next level down

Levels map to sizes exactly as they do in the component.

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <h2>A heading in body content</h2>
    <p>Rendering Markdown needs no tag replacement.</p>
    <h3>The next level down</h3>
    <p>Levels map to sizes exactly as they do in the component.</p>
  </Prose>
</template>

vue

API

Props

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Which heading tag to render
`size`	`'xs' \| 'sm' \| 'base' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	follows `level`	Font size
`weight`	`'normal' \| 'medium' \| 'semibold'`	`'semibold'`	Font weight
`truncate`	`boolean`	`false`	Truncate to one line with an ellipsis
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The heading text