Documentation

Documentation

HeadingBlock

Section header that stacks an eyebrow, heading, description, and up to two actions.

The <dsgn-heading-block> component composes a section header from five named slots: an eyebrow, the heading, a description, and two action slots. It stacks them vertically with consistent spacing and aligns the whole group to the start or the center.

Usage

<dsgn-heading-block alignment="center">
  <span slot="eyebrow">Components</span>
  <dsgn-heading slot="heading" heading-size="h2"
    >Everything you need</dsgn-heading
  >
  <dsgn-text slot="description"
    >Composable primitives with a governed API.</dsgn-text
  >
  <dsgn-button slot="action-primary" appearance="solid">Get started</dsgn-button>
  <dsgn-button slot="action-secondary" appearance="outline"
    >Read the docs</dsgn-button
  >
</dsgn-heading-block>

Import the component module in your application entrypoint:

import '@ds-gn/ui/heading-block';

Playground

Props

Prop Type Default Description
alignment 'start' | 'center' 'start' Horizontal alignment of the whole block.
surface 'light' | 'dark' 'light' Semantic token surface to use.

The prop is alignment, not align, and there is no end/right value.

Slots

Slot Description
eyebrow Optional eyebrow text above the heading. The region is omitted when empty.
heading Heading content, typically an <dsgn-heading>.
description Supporting description, typically an <dsgn-text>.
action-primary Primary action, typically an <dsgn-button>.
action-secondary Secondary action.

The two action slots sit in a horizontal stack that wraps on narrow screens. There is no default slot — every child needs a slot attribute.

Examples

Start-aligned section header

<dsgn-heading-block alignment="start">
  <dsgn-heading slot="heading" heading-size="h2">Getting started</dsgn-heading>
  <dsgn-text slot="description">Set up your project in minutes.</dsgn-text>
</dsgn-heading-block>

Centered header with an eyebrow

<dsgn-heading-block alignment="center">
  <span slot="eyebrow">Public beta</span>
  <dsgn-heading slot="heading" heading-size="h1"
    >Welcome to DS-GN</dsgn-heading
  >
  <dsgn-text slot="description"
    >Build composable design systems with confidence.</dsgn-text
  >
</dsgn-heading-block>

On a dark surface

<dsgn-heading-block alignment="center" surface="dark">
  <dsgn-heading slot="heading" surface="dark" heading-size="h2"
    >Dark section</dsgn-heading
  >
  <dsgn-text slot="description" surface="dark"
    >Content on a dark background.</dsgn-text
  >
</dsgn-heading-block>

Usage patterns

  • surface themes the block itself; slotted children keep their own surface, so set it on both when the section sits on a dark background.
  • Slot a real <dsgn-heading> rather than plain text so the section header keeps its document outline level.
Esc