Heading - Docs - Artefact

Heading

Typography

Presentational

Introduction

A polymorphic component for displaying titles and headings with consistent styling.

Usage

Page Title

import { Heading } from "../components/ui";

export default function MyPage() {
  return (
    <Heading as="h1" size="3xl">
      Page Title
    </Heading>
  );
}

CMS Page Builder

This component is available as a heading block in the Page Builder (content/pages/*.json):

{
  "type": "heading",
  "text": "Page Title",
  "as": "h1",
  "size": "3xl"
}

Props

Prop	Type	Description
`children`	`any`	The text or content.
`class`	`string`	Custom CSS classes.
`as`	`string`	The HTML element to render (e.g., "h1", "h2"). Defaults to "h2".
`size`	`string`	The font size variant.
`interactive`	`boolean`	Whether to enable client-side hydration.