I9kSectionHeading

Heading with an optional description for introducing a section of a page. Use it above any grouped block of content — a card grid, a list, a feature set.

View as MarkdownView source

import { I9kSectionHeading } from '@9klabs/design';

Examples

Default

Speaking

Practical sessions grounded in building, shipping, and leading with AI.

<I9kSectionHeading title="Speaking" description="Practical sessions grounded in building, shipping, and leading with AI." />

Title only, custom level

Recent projects

<I9kSectionHeading title="Recent projects" :level="3" />

Watch out

• title and description are plain string props, not slots — there is no way to pass rich markup into the heading or description.
• level defaults to 2 and is not inferred from context; set it to match the surrounding document outline.

API

Props

Prop	Type	Default	Required
title	string	—	yes
description	string | null	null	no
id	string | null	null	no
level	2 | 3 | 4 | 5 | 6	2	no

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kSectionHeading from @9klabs/design to introduce a page section.

import { I9kSectionHeading } from '@9klabs/design';

Props:
- title: string (required)
- description?: string | null (default null)
- id?: string | null (default null) — set on the rendered heading element, e.g. for an in-page anchor link.
- level?: 2 | 3 | 4 | 5 | 6 (default 2) — the rendered heading level (renders <h{level}>).

Emits: none.

Slots: none — title and description are text-only props, not slots.

IMPORTANT: pick `level` to match the surrounding document outline; the component does not infer nesting from context, and the default is h2.

Usage:
<I9kSectionHeading title="Speaking" description="Practical sessions grounded in building, shipping, and leading with AI." />