Back to site

Heading

Headings for content hierarchy.

This looks important 

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

<Heading alignmentHorizontal="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
  alignmentHorizontal: 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

alignmentHorizontal enum | default: start

The horizontal alignment of the text.

Accepted values:
  • start
  • center
  • end

iconName enum

The name of the icon to display. Sourced from [Heroicons](https://heroicons.com/).

iconColor enum | default: default

The color of the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

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 alignmentHorizontal="start" level="h3">
  Start aligned
</Heading>

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

<Heading alignmentHorizontal="end" level="h3">
  End aligned
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: Start aligned
    level: h3
    alignmentHorizontal: start
  - _component: building-blocks/core-elements/heading
    text: Center aligned
    level: h3
    alignmentHorizontal: center
  - _component: building-blocks/core-elements/heading
    text: End aligned
    level: h3
    alignmentHorizontal: 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
---

Icon colors #

Blue icon heading

Green icon heading

Red icon heading 

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

<Heading iconColor="blue" iconName="information-circle" level="h3">
  Blue icon heading
</Heading>

<Heading iconColor="green" iconName="check-circle" level="h3">
  Green icon heading
</Heading>

<Heading iconColor="red" iconName="exclamation-triangle" level="h3">
  Red icon heading
</Heading>
---
blocks:
  - _component: building-blocks/core-elements/heading
    text: Blue icon heading
    level: h3
    iconName: information-circle
    iconColor: blue
  - _component: building-blocks/core-elements/heading
    text: Green icon heading
    level: h3
    iconName: check-circle
    iconColor: green
  - _component: building-blocks/core-elements/heading
    text: Red icon heading
    level: h3
    iconName: exclamation-triangle
    iconColor: red
---