Skip to content
DOL Studio

SectionHeader

Design: extension Code: Code only headinglanding

Live preview

Module 04

Practice Speaking Skills

12 lessons · 4h 30m · Updated 2 days ago

Sub-section header

Smaller header for nested content

Import & files

Import
import { SectionHeader } from "@/components/ui/SectionHeader";
Source file
components/ui/SectionHeader.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
eyebrow string - —
title string - —
description string - —
align 'left' | 'center' 'left' —

Usage

Avoid `align=center` on back-to-back sections (slop-05 everything-centered).

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • Eyebrow + title + description

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# SectionHeader
Domain: general · Category: display
Design: extension · Code: code-only


## Description
Section header block - eyebrow + heading + optional description + optional CTA. For landing sections.


## Import
```ts
import { SectionHeader } from "@/components/ui/SectionHeader";
```
Source: `components/ui/SectionHeader.tsx`


## Props (4)
| Prop | Type | Default | Description |
|---|---|---|---|
| `eyebrow` | `string` | - |  |
| `title` | `string` | - |  |
| `description` | `string` | - |  |
| `align` | `'left' | 'center'` | 'left' |  |


## Usage
Avoid `align=center` on back-to-back sections (slop-05 everything-centered).


## Examples
- **Eyebrow + title + description**

Related

  • Section label

    SectionLabel

    Code only
  • DOL English logo

    Logo

    Coded

  • Avatar, User

    Coded
  • Tag label

    Tag

    Coded
  • Field
    Value
    Name
    DOL Edu

    Table

    Coded

  • Divider

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).