Back to site

Heading

Headings for content hierarchy.

This looks important 

---
import Heading from "@core-elements/heading/Heading.astro";
---

<Heading alignX="start" iconName="null" iconPosition="before" level="h2" size="default">
  This looks important
</Heading>
---
blocks:
  _component: building-blocks/core-elements/heading
  text: This looks important
  level: h2
  size: default
  alignX: start
  iconName: null
  iconPosition: before
---

Overview

A heading component for establishing content hierarchy. Supports semantic levels (<h1> to <h6>), and controls for size, alignment, and icons.

Properties

text string | default: My Heading

The text content of the heading.

level enum | default: h2

The heading level or type.

Accepted values:
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

size enum | default: default

The font size of the text.

Accepted values:
  • default
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl

alignX enum | default: start

The horizontal alignment of the text.

Accepted values:
  • start
  • center
  • end

iconName enum

The name of the icon to display.

iconPosition enum | default: before

The position of the icon relative to the text.

Accepted values:
  • before
  • after

Slots

default

The content inside the Heading. Used only when the text property is not set.

Examples

Types

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading 
---
import Heading from "@core-elements/heading/Heading.astro";
---

<Heading level="h1">
  This is an h1 heading
</Heading>

<Heading level="h2">
  This is an h2 heading
</Heading>

<Heading level="h3">
  This is an h3 heading
</Heading>

<Heading level="h4">
  This is an h4 heading
</Heading>

<Heading level="h5">
  This is an h5 heading
</Heading>

<Heading level="h6">
  This is an h6 heading
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: This is an h1 heading
    level: h1
  - _component: building-blocks/core-elements/heading
    text: This is an h2 heading
    level: h2
  - _component: building-blocks/core-elements/heading
    text: This is an h3 heading
    level: h3
  - _component: building-blocks/core-elements/heading
    text: This is an h4 heading
    level: h4
  - _component: building-blocks/core-elements/heading
    text: This is an h5 heading
    level: h5
  - _component: building-blocks/core-elements/heading
    text: This is an h6 heading
    level: h6
---

Sizes

This h1 heading size is xs

This h1 heading size is sm

This h1 heading size is md

This h1 heading size is lg

This h1 heading size is xl

This h1 heading size is 2xl

This h1 heading size is 3xl

This h1 heading size is 4xl 

---
import Heading from "@core-elements/heading/Heading.astro";
---

<Heading level="h1" size="xs">
  This h1 heading size is xs
</Heading>

<Heading level="h1" size="sm">
  This h1 heading size is sm
</Heading>

<Heading level="h1" size="md">
  This h1 heading size is md
</Heading>

<Heading level="h1" size="lg">
  This h1 heading size is lg
</Heading>

<Heading level="h1" size="xl">
  This h1 heading size is xl
</Heading>

<Heading level="h1" size="2xl">
  This h1 heading size is 2xl
</Heading>

<Heading level="h1" size="3xl">
  This h1 heading size is 3xl
</Heading>

<Heading level="h1" size="4xl">
  This h1 heading size is 4xl
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is xs
    level: h1
    size: xs
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is sm
    level: h1
    size: sm
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is md
    level: h1
    size: md
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is lg
    level: h1
    size: lg
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is xl
    level: h1
    size: xl
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is 2xl
    level: h1
    size: 2xl
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is 3xl
    level: h1
    size: 3xl
  - _component: building-blocks/core-elements/heading
    text: This h1 heading size is 4xl
    level: h1
    size: 4xl
---

AlignX

Start aligned

Center aligned

End aligned 

---
import Heading from "@core-elements/heading/Heading.astro";
---

<Heading alignX="start" level="h3">
  Start aligned
</Heading>

<Heading alignX="center" level="h3">
  Center aligned
</Heading>

<Heading alignX="end" level="h3">
  End aligned
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: Start aligned
    level: h3
    alignX: start
  - _component: building-blocks/core-elements/heading
    text: Center aligned
    level: h3
    alignX: center
  - _component: building-blocks/core-elements/heading
    text: End aligned
    level: h3
    alignX: end
---

Icons

Icons default to appearing before headings

Icons can also come after headings 

---
import Heading from "@core-elements/heading/Heading.astro";
---

<Heading iconName="briefcase" level="h3">
  Icons default to appearing before headings
</Heading>

<Heading iconName="arrow-up-right" iconPosition="after" level="h3">
  Icons can also come after headings
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: Icons default to appearing before headings
    level: h3
    iconName: briefcase
  - _component: building-blocks/core-elements/heading
    text: Icons can also come after headings
    level: h3
    iconName: arrow-up-right
    iconPosition: after
---