Components

Heading

Typographic headings with display and headline styles.

Import

import { Heading } from '@dr-max/ui/heading'

Usage

The rendered HTML element (as) is independent of the visual style (variant) — pick the element for document structure and the variant for looks:

Your health comes first

<script setup lang="ts">
import { Heading } from '@dr-max/ui/heading'
</script>

<template>
  <Heading as="h1" variant="display-lg">Your health comes first</Heading>
</template>

Variants

Display lg

Headline bold xl

Headline bold md

Headline semibold md

Headline semibold xs

<template>
  <Heading as="p" variant="display-lg">Display lg</Heading>
  <Heading as="p" variant="headline-bold-xl">Headline bold xl</Heading>
  <Heading as="p" variant="headline-bold-md">Headline bold md</Heading>
  <Heading as="p" variant="headline-semibold-md">Headline semibold md</Heading>
  <Heading as="p" variant="headline-semibold-xs">Headline semibold xs</Heading>
</template>

Playground

Your health comes first

slot

variant

<script setup lang="ts">
import { Heading } from '@dr-max/ui/heading'
</script>

<template>
  <Heading variant="headline-bold-md" as="h1">Your health comes first</Heading>
</template>