Content & Typography · 13 Props

Heading

Section heading with optional eyebrow text, title, subtitle, and alignment. Use as the primary heading block inside Section blocks.

Content & Typography 13 Props

src/components/blocks/Heading.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
as	string	—	"header" \| "div"
class	string	—
eyebrow	any	—	Eyebrow: string or { text, variant, tone, class }
eyebrowClass	string	—	@deprecated Use eyebrow: { class: "..." } instead
id	string	—
maxW	string	none	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "none"
subtitle	any	—	Subtitle: string or { text, class }
subtitleClass	string	—	@deprecated Use subtitle: { class: "..." } instead
subtitleMaxW	string	2xl	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "none"
subtitleTone	string	muted	"default" \| "primary" \| "accent" \| "success" \| "info" \| "warning" \| "error" \| "muted" \| "inherit"
title	any	—	Title: string or { text, class }
titleAs	string	—	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"
titleClass	string	—	@deprecated Use title: { class: "..." } instead

Beispiele

Sizes

lg, md, sm.

Large Heading

With a subtitle underneath.

Medium Heading

Small Heading

{
  "type": "stack",
  "props": {
    "gap": "lg"
  },
  "blocks": [
    {
      "type": "heading",
      "props": {
        "title": "Large Heading",
        "subtitle": "With a subtitle underneath.",
        "size": "lg",
        "align": "left"
      }
    },
    {
      "type": "heading",
      "props": {
        "title": "Medium Heading",
        "size": "md",
        "align": "left"
      }
    },
    {
      "type": "heading",
      "props": {
        "title": "Small Heading",
        "size": "sm",
        "align": "left"
      }
    }
  ]
}

<Stack gap="lg">
  <Heading
    title="Large Heading"
    subtitle="With a subtitle underneath."
    size="lg"
    align="left"
  />
  <Heading title="Medium Heading" size="md" align="left" />
  <Heading title="Small Heading" size="sm" align="left" />
</Stack>

With Eyebrow

Eyebrow text above the title for section labeling.

Our Services

What We Offer

Comprehensive web solutions tailored to your needs.

{
  "type": "heading",
  "props": {
    "eyebrow": "Our Services",
    "title": "What We Offer",
    "subtitle": "Comprehensive web solutions tailored to your needs.",
    "align": "center"
  }
}

<Heading
  eyebrow="Our Services"
  title="What We Offer"
  subtitle="Comprehensive web solutions tailored to your needs."
  align="center"
/>

Alignment

left, center, right.

Left Aligned

Center Aligned

Right Aligned

{
  "type": "stack",
  "props": {
    "gap": "lg"
  },
  "blocks": [
    {
      "type": "heading",
      "props": {
        "title": "Left Aligned",
        "size": "sm",
        "align": "left"
      }
    },
    {
      "type": "heading",
      "props": {
        "title": "Center Aligned",
        "size": "sm",
        "align": "center"
      }
    },
    {
      "type": "heading",
      "props": {
        "title": "Right Aligned",
        "size": "sm",
        "align": "right"
      }
    }
  ]
}

<Stack gap="lg">
  <Heading title="Left Aligned" size="sm" align="left" />
  <Heading title="Center Aligned" size="sm" align="center" />
  <Heading title="Right Aligned" size="sm" align="right" />
</Stack>