Usage

Import the component from its dedicated entry. Structural styles are loaded automatically.

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

<template>
  <Heading :level="1">
    Page title
  </Heading>
  <Heading :level="2" type="display-2">
    Overview
  </Heading>
</template>

Best practices

Guidance	Practice
Recommended	Choose level to match the document outline; avoid skipping levels.
Recommended	Use type="display-*" for marketing or large callouts while keeping the semantic level.
Recommended	Use color="secondary" for lower-emphasis headings.
Don't	Pick a level purely for visual size. Use type for visuals and level for semantics.
Don't	Put long paragraphs inside headings. Keep headings short.

Examples

Levels

Level 1 heading

Level 2 heading

Level 3 heading

Heading renders h1–h6 semantic elements with level-based sizing by default.

Display headings

Display 1

Display 2

Display 3

display-1, display-2, and display-3 provide larger display typography.