KeepReady
Section Header Component link

A section-level heading row with preamble, title, counter, description, and optional leading and trailing media.

Keep — all findings resolved
Rebuilt on node 4363:11467 in the 2026 Working File and renamed to Section Header. The 8-boolean matrix collapsed to TrailingMedia (4) × hasLeadingMedia (2) = 8 variants; property and layer naming follow the guidelines throughout, with text layers mapping onto §7 hierarchy as Preamble → Title → Description; and both media containers are now real Figma Slots. The nested Counter is the shared component as published, and the row is a static section label so interaction states are deliberately out of scope. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.
In Context

Section headers sit above grouped content — a list of transactions, a set of services, a carousel of offers — to label the section and optionally expose a trailing action.

Live Preview

Heading

Description goes here

Properties
preamble
description
leading media
trailing
DS Health
Reusable
Pass
Works across many screen sections. TrailingMedia (4) × hasLeadingMedia (2) gives 8 variants with no invalid combinations — every one is a shape a real section actually takes.
Self-contained
Pass
Owns its typography, spacing, and color tokens. No external state required.
Consistent
Pass
Renamed to Section Header, freeing the shared prefix. TrailingMedia is PascalCase per §1, hasLeadingMedia uses True | False per §5, and the text layers map onto §7 hierarchy — Preamble → Title → Description.
Composable
Pass
Leading media is an Image-Slot and the trailing icon an Icon-Slot, both real Figma Slots; Trailing Media is an instance in every variant that has one; and the count comes from the shared Counter component rather than being drawn in place.
Behavior
State iOS Android Figma Property Notes
Default Yes Yes 16 variants The only state today — no pressed/disabled/focused.
Trailing action pressed N/A N/A Not modeled Link, edit, counter should be real Button/Link instances that carry their own pressed state.
Disabled N/A N/A Not modeled Section headers are informational — no disabled variant needed.
Focused (a11y) N/A N/A — Focus lives on the trailing action, not the header itself.
Issues
  • Code Connect mappings not registered. Blocked — no native library exists yet. The schema is clean and ready: one enum, one boolean, three text layers and two slots. C7 · Code Connect Linkability
  • Renamed to Section Header. v2.0: Rebuilt on node 4363:11467 in the 2026 Working File and renamed from Header to Section Header, describing what it actually is — a section-level heading row, not a screen chrome bar. Frees the Header prefix that four structurally different components were sharing. (C1 · Rename) C1 · Layer Structure & Naming
  • Eight boolean props collapsed to two. v2.0: The 8-boolean matrix with 256 theoretical combinations and 16 built variants is now TrailingMedia (4) × hasLeadingMedia (2) = 8 variants. Fewer than the three props recommended, and every combination is meaningful. (C2 · Property) C2 · Variant & Property Naming
  • Property naming corrected. v2.1: hasTrailingMedia → TrailingMedia — a four-value enum should not carry a boolean has prefix (§2) — and hasLeadingMedia values went Yes | No → True | False, which §5 lists explicitly under DON'T. The has prefix is correct on that one because it is a genuine boolean. (C2 · Rename) C2 · Variant & Property Naming
  • Layer naming completed. v2.1–v2.2: Two frames both named container became LeadingMedia and HeaderContent; #title → Preamble, #heading → Title, #description → Description, header-description → DescriptionRow, header-counter → CounterSlot. The component-name prefixes are gone per §6, and the text layers now map exactly onto §7 content hierarchy: Preamble → Title → Description. Verified across all eight variants by full text scan. (C1) C1 · Layer Structure & Naming
  • Media containers converted to real Figma Slots. v2.2: Leading media went from a Placeholder instance to an Image-Slot SLOT in all four hasLeadingMedia=True variants, and the trailing icon is now an Icon-Slot SLOT inside the Trailing Media instance. Teams can drop in real content without detaching. (C6 · Slot) C6 · Asset & Icon Quality
  • Trailing media made consistent across variants. v2.2: Trailing Media is an INSTANCE in every variant that has one — the Icon variants previously used a plain FRAME — and the stray instance in TrailingMedia=None, hasLeadingMedia=True is gone, so both None variants now match. (C1) C1 · Layer Structure & Naming
  • Nested Counter confirmed correct. v2.2: Closed by owner decision — the Counter instance points at the Counter component as published, and stays. The rebuilt copy at 4675:21497 is a working-file version rather than a replacement, so no swap is needed. Worth revisiting only if the two ever diverge in the published library. (C4 · Composition) C4 · Native Mappability
  • Interaction states ruled out of scope. v2.2: Closed by owner decision — Section Header is not tappable. It is a static section label, so Default | Pressed | Disabled would describe interactions the component never has. Any tap target lives in the trailing media, and its states belong to that component. (C5) C5 · Interaction State Coverage
  • Header-family restructure closed. v2.3: Closed for this component. The restructure that mattered here is done — the base component is Section Header, which frees the Header prefix that four structurally different components were sharing, and its own naming, properties and layers all follow the guidelines. Header - With Logo has since been renamed Brand App Bar in Figma, confirming it stays a distinct component rather than merging into Title Bar. What remains is bookkeeping on two other pages rather than work on this one: the site still lists Brand App Bar under its old name, and Detail Hero still needs a call on whether it belongs in the family at all. Both are tracked on their own component pages. (Family) C1 · Layer Structure & Naming
Styles
Title only (baseline)
DES DEV

The simplest variant — a bare title. This is the baseline the other 15 variants layer slots onto.

Heading

Properties
preamble
description
leading
trailing
Properties
preamble no
description no
leading none
trailing none
Colors
Surface #FFFFFF
Title #0A2757
Preamble #005CE5
Description #6780A9
Link #005CE5
Icon #005CE5
Typography
Title style Heading/L — BarkAda 18/24
Color text/primary · #0A2757
Layout
Width Fill
Height 58 (hug)
Padding 0
Gap (stacked slots) space/space-4
Title — Colors

Baseline header: just the heading on a white surface. Card stroke is invisible by default.

Role Token Default
Surface bg main/header/surface #FFFFFF
Heading text/primary/headline/section #0A2757
Full stack (preamble + title + description)
DES DEV

All three text slots filled. This is the canonical "announce a section" pattern.

Preamble

Heading

Description goes here

Properties
preamble
description
leading
trailing
Properties
preamble yes
description yes
leading none
trailing none
Colors
Surface #FFFFFF
Preamble #005CE5
Title #0A2757
Description #6780A9
Icon #005CE5
Layout
Padding 24 horizontal · 16 vertical
Title size 22 / 26
Preamble size 14 / 14
Description size 12 / 18
Typography
Preamble Label/S caps · 12/16 · text/brand
Title Heading/L · 18/24 · text/primary
Description Body/S · 12/16 · text/secondary
Full Stack — Colors

Tier-three layout with eyebrow preamble, heading, and supporting description.

Role Token Default
Surface bg main/header/surface #FFFFFF
Preamble text/accent/eyebrow #005CE5
Heading text/primary/headline/section #0A2757
Description text/primary/body/secondary #6780A9
Title + Link — Colors

Heading followed by a trailing hyperlink (e.g. "See all").

Role Token Default
Surface bg main/header/surface #FFFFFF
Heading text/primary/headline/section #0A2757
Link label text/accent/link #005CE5
Title + trailing edit
DES DEV

Title left, pencil icon + "Edit details" link right. Used on profile/settings sections.

Heading

Edit details
Properties
preamble
description
leading
trailing
Properties
preamble no
description no
leading none
trailing edit
Colors
Surface #FFFFFF
Title #0A2757
Description #6780A9
Border #E5EBF4
Layout
Padding H 24px
Padding V 16px
Border bottom 1px solid
Title size 22 / 26
Typography
Title style Primary/Headlines/Section
Title font Proxima Soft Bold · 22 / 26
Title + Edit — Colors

Heading followed by an edit affordance (icon + hyperlink label).

Role Token Default
Surface bg main/header/surface #FFFFFF
Heading text/primary/headline/section #0A2757
Edit icon icon/accent #005CE5
Edit label text/accent/link #005CE5
Title + trailing counter
DES DEV

Title left, numeric counter pill right. Used on inbox/notifications.

Heading

0
Properties
preamble
description
leading
trailing
Properties
preamble no
description no
leading none
trailing counter
Colors
Surface #FFFFFF
Title #0A2757
Description #6780A9
Border #E5EBF4
Layout
Padding H 24px
Padding V 16px
Border bottom 1px solid
Title size 22 / 26
Typography
Title style Primary/Headlines/Section
Title font Proxima Soft Bold · 22 / 26
Title + Counter — Colors

Heading followed by a count chip (e.g. unread badge, item total).

Role Token Default
Surface bg main/header/surface #FFFFFF
Heading text/primary/headline/section #0A2757
Counter chip bg main/counter/surface #EEF2F9
Counter value text/primary/body/secondary #6780A9
Property Mapping
Figma PropertySwiftUICompose
preamble: boolean preamble?: String preamble: String?
(implicit) title: String title: String (required)
description: boolean description?: String description: String?
icon + left illustration leadingMedia?: icon | illustration leadingMedia: EBLeadingMedia?
right illustration + link + edit + counter trailing?: illustration | link | edit | counter trailing: EBHeaderTrailing?
Accessibility
RequirementiOSAndroid
Heading trait Apply .accessibilityAddTraits(.isHeader) to the title. Apply Modifier.semantics { heading() } to the title text.
Trailing action label Link/Edit/Counter must each carry their own accessibility label. Counter should announce count ("12 unread"). Same — each trailing slot owns its own semantics.
Minimum touch target Trailing interactive element must be ≥44×44pt. Trailing interactive element must be ≥48×48dp.
Reading order Preamble → Title → Description → Trailing. VoiceOver follows DOM order. Same reading order — TalkBack follows composition order.
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Requires Rework "Header" prefix shared with 3 structurally different components. Rename to Section Header.
C2 Variant & Property Naming Requires Rework 8 booleans → 3 props (preamble, leadingMedia, trailing). Drops 16 variants to ~6 canonical patterns.
C3 Token Coverage Ready Typography and color bound to DS tokens.
C4 Native Mappability Needs Refinement Maps to a simple EBSectionHeader view/composable once slots collapse. Trailing actions should be real Button/Badge instances, not drawn.
C5 Interaction State Coverage Needs Refinement Header itself is static; trailing actions inherit Button/Link state coverage once they become instances.
C6 Asset & Icon Quality Needs Refinement Confirm leading/trailing "illustration" slots accept vector instances (Avatar / Icon / custom). Placeholder circle suggests unverified.
C7 Code Connect Linkability Not Mapped Cannot map until property model collapses and trailing slots resolve to real components.
Variants Inventory (16 total)

Today: 8 independent boolean properties — preamble, description, icon, left illustration, right illustration, link, edit, counter. 2⁸ = 256 theoretical combos, only 16 built — most combinations are either invalid or unsupported.

GroupCountSlots enabled
Text-only4preamble × description permutations
With right icon (top-aligned)4preamble × description × icon
With leading illustration2description × left illustration
With trailing illustration2description × right illustration
With link (View All)2description × link
With edit1edit only
With counter1counter only
1.0.0 — April 2026Major
Initial Assessment · node 18430:2919
Verdict: Restructure — Rename to Section Header, collapse 8 boolean props into 3 slots (preamble, leadingMedia, trailing). Open
Architecture
Family restructure plan — 4 "Header*" components should be renamed by role; "With Logo" merges into Title Bar; "Transaction" moves out of family. Open
Family
Trailing actions should be real components — Link/Edit/Counter should be Text Button / Icon Button / Badge instances, not drawn in-place. Open
C4
C7 — Code Connect — Blocked until property model collapses. Open
C7