Section Heading — cinder playground

Overview

Styled heading element that visually separates and titles a content section.

<script lang="ts">
  import SectionHeading from '@lostgradient/cinder/section-heading';
</script>

<SectionHeading />

Live preview

Use when

Avoid when

Labelling a single form control or field — use label instead.
Rendering a page-wide header with primary navigation — use a hand-rolled page scaffold with a heading element.

A leveled section heading with description and actions, rendered without adding extra header landmarks.

Props for section-heading
Name	Type	Default	Required	Description
`title`	`text`		req	Section title text. Rendered inside the dynamic heading element.
`description`	`text`			Optional supporting description. Supplementary body text, not a heading subtitle — rendered after the heading but outside `<hgroup>`.
`level`	`2 \| 3 \| 4`	`2`		Heading level for the title element. Defaults to `2`. The correct level relative to the surrounding document outline is the consumer's responsibility.
`label`	`snippet`			Optional small uppercase "eyebrow" label. When present, the label is rendered as a `<p>` inside an `<hgroup>` that also contains the heading. The `<hgroup>` content model only permits `<p>` elements plus one heading element, so the snippet must render phrasing content only — plain text, `<span>`, `<strong>`, `<em>`, `<a>`, icons, etc. Do not render block elements (`<div>`, `<nav>`, `<button>` wrappers, additional headings) into this snippet; doing so produces invalid HTML inside `<hgroup>`.
`actions`	`snippet`			Optional trailing actions (buttons, menus). Rendered on the same row as the title at wide viewports.
`tabs`	`snippet`			Optional tablist. When both `actions` and `tabs` are present, `tabs` sits on a second row inside the shared root container.