Heading

Semantic heading with independent level (h1-h6) and visual size.

Jump to API reference

Import

Vue
import { UiHeading } from '@ziyarago/ui/vue'

Sizes

Extra small

Small

Medium

Large

Extra large

Vue
<UiHeading size="xs">
  Extra small
</UiHeading>

<UiHeading size="sm">
  Small
</UiHeading>

<UiHeading size="md">
  Medium
</UiHeading>

<UiHeading size="lg">
  Large
</UiHeading>

<UiHeading size="xl">
  Extra large
</UiHeading>

Brand color

Umrah packages 2026

Vue
<UiHeading :level="1" size="lg" brand>
  Umrah packages 2026
</UiHeading>

Level vs size

An h3 styled large

An h1 styled small

Vue
<UiHeading :level="3" size="lg">
  An h3 styled large
</UiHeading>

<UiHeading :level="1" size="sm">
  An h1 styled small
</UiHeading>

API reference

Semantic heading h1-h6 with a responsive type scale; use for page and section titles.

Props

PropType and valuesDefaultDescription
level1234561 | 2 | 3 | 4 | 5 | 62HTML heading level (h1-h6). Clamped to 1-6.
sizexssmmdlgxl2xl'lg'Visual size, independent of the semantic level.
brandbooleanfalseColors the heading with the brand text color.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultHeading content.

Notes

  • Pick level for document structure and size for looks; they are independent.