SectionHead

SectionHead supplies a compact numbered heading with optional metadata and a trailing action.

01Preview

01Collection12 works

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Section, SectionHead } from "@dg/ui";
</script>

<Section>
  <SectionHead num="01" title="Collection" count="12 works" more="Explore" href="/artworks" />
  <p>Collection introduction.</p>
</Section>

03Notes

Native HTML attributes, DOM callbacks, class and style are forwarded to the root element; onclick handles the more button.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
By default the head takes its inset from its Section. In a Section padding="none" gap="none" whose content reaches the frame, pass padding="layout" so the head keeps the shared inset while staying inside the section it names.

04Parameters

Name	Type	Default	Description
`level`	`2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level; the compact visual style stays the same.
`num`	`string`	`""`	Optional section number, including a compound value such as 01 · 2.
`title`	`string`	`""`	Section heading text.
`count`	`string`	`""`	Optional metadata beside the title, such as an item count or a list of features.
`more`	`string`	`""`	Optional action label. Empty means no action is rendered.
`href`	`string`	`""`	When more is present, a nonempty href renders the action as a native link.
`onclick`	`(event: MouseEvent) => void`	`undefined`	Handles the more button when no href is supplied. Not used for the link variant.
`padding`	`string`	`"none"`	Presets: none, layout. layout applies the block/inline layout padding tokens; custom CSS accepts a full padding expression.

05Overrides

Name	Type	Default	Description
`--section-name-color`	`CSS color`	`var(--text-muted)`	Color of the compact title.
`--section-number-font-weight`	`font weight`	`var(--ui-font-weight)`	Weight of the displayed number.

06Accessibility

Choose level from the document hierarchy. Give the action a meaningful more label. Links use native navigation; action buttons support Enter and Space.

Related subjects

Markdown source: components/section-head