v3.0.0
SectionHeader

A section header divides sections of a screen.

3.0 3.0 -- 3.0.0

Freight Choose a vehicle for your cargo

Overview

SectionHeader names a section of a screen — the screen itself, a bottom sheet, an island or a group inside one — with a title and an optional subtitle. Four size presets differ only in the title's style; next to the text sit up to two slots for any DS component, and small inline slots for a chevron or an icon.

  • 1
    XL
  • 2
    L
  • 3
    M
  • 4
    S

Title Subtitle

Title Subtitle

Title Subtitle

Title Subtitle

States

SectionHeader has three states — Standard, Disabled and Skeleton — the same for every preset. A component in a slot shows its own state.

Standard

Title Subtitle

Title Subtitle

Title Subtitle

  • 1
    Background --section-header-background — unset: transparent, the header sits on its host's surface.The custom base can point it at any Background token.
  • 2
    Title --text-and-icon-primary in the size's Heading style (Layout).
  • 3
    Subtitle --text-and-icon-primary in Body Paragraph.The frame's list says Secondary; the masters bind Primary, and the web follows the masters — flagged.
  • 4
    Button --surface-on-white — the fill of a Button S, Secondary style, by default.--text-and-icon-primary — its label.
  • 5
    Icon Button --text-and-icon-primary — the glyph, an IconContainer 24.var(--sp-130-s40) — its tap area.
  • 6
    Squircle --surface-on-white — the fill of a Squircle S in its Standard state ("Surface").--text-and-icon-primary — its glyph.

Disabled

Title Subtitle

Title Subtitle

Title Subtitle

  • 1
    Title --text-and-icon-disabled.
  • 2
    Subtitle --text-and-icon-disabled.
  • 3
    Button The Button's own Disabled state — .button--disabled.
  • 4
    Icon Button --text-and-icon-disabled — the IconContainer's own Disabled state, .icon-container--disabled.
  • 5
    Squircle The Squircle's own Disabled state — .squircle--disabled.
  • Markup Root: .section-header--disabled, data-ds-state="disabled".Every button keeps aria-disabled="true" — still reachable, the tap refused (Accessibility).
  • Line Gap var(--sp-100-s8) between the title and the subtitle, as in Standard.Figma's Disabled variants draw s4 — flagged; a state does not move the layout.

Skeleton

  • 1
    XL .skeleton-text--heading1 — the title bar..skeleton-text--main-body — the subtitle bar, as on every size.
  • 2
    L .skeleton-text--heading1 — the title bar, as on XL: the Figma L Skeleton draws the Heading 1 bar.Heading 2's own bar would be 4 shorter — flagged.
  • 3
    M .skeleton-text--heading3 — the title bar.
  • 4
    S .skeleton-text--heading4 — the title bar.
  • Static Shape --section-header-skeleton-title-max — the title bar, up to 240.--section-header-skeleton-subtitle-max — the subtitle bar, up to 200."The skeleton is static and does not depend on the content." No slots. On the custom base a team draws its own Skeleton.
  • Shimmer --pattern-shimmer — the DS Skeleton's own sweep.
  • Loading Root: .section-header--skeleton, data-ds-state="skeleton"; the bars are aria-hidden.The host announces the loading, not the header.

Anatomy

A row: the TextContainer — a heading with the title over the subtitle, each with two inline slots — and the SlotsContainer with up to two slots. Only the title is on by default; every other part is optional.

Title Subtitle

  • 1
    Title The size's Heading style (Layout). Wraps; with a TitleSlot on, one line.Required — on by default.
  • 2
    TitleSlot#1 An IconContainer 20, Whole container, beside the title — chevron-right by default; hint-outline or any icon. Any component may go here.Optional — off by default.
  • 3
    TitleSlot#2 A second IconContainer 20 after the first.Optional — off by default.
  • 4
    Subtitle Body Paragraph under the title. Wraps; with a SubtitleSlot on, one line.Optional — off on the custom base; the size presets stage it on.
  • 5
    SubtitleSlot#1 An IconContainer 20 beside the subtitle.Optional — off by default.
  • 6
    SubtitleSlot#2 A second IconContainer 20.Optional — off by default.
  • 7
    Slot#1 var(--sp-130-s40) — the tap area of the default IconButton, an IconContainer 24.A Button S Secondary or a Squircle S in the frame's examples. "You can place any components in slot."Optional — off by default.
  • 8
    Slot#2 The same contents as Slot#1, after it.Optional — off by default.
  • Containers Dashed: the TextContainer (.section-header__text, a heading element) fills the row; the SlotsContainer (.section-header__slots) hugs its slots and centres them on the title's first line.Not drawn — layout only.

Tap Area

Title Subtitle

  • 1
    Tap Area On The TextContainer is one button inside the heading: the title, the subtitle and their inline icons are its label — the chevron says it opens something.Optional; on by default with an inline slot (the frame).
  • 2
    Tap Area Off The TextContainer is a heading only — not a target.
  • 3
    Slots Each slot is its own target, whatever the Tap Area: an IconButton, a Button.

Layout

One geometry for every size: paddings and gaps are fixed (SP/100%), the text scales by its own style.

Spacing

Title Subtitle

  • General Width — fills the host: Flexible on iOS, FillMax on Android, the host's full width on the web (360 in the Figma sets). Height — hugs.var(--sp-100-s20) — padding on top.var(--sp-100-s12) — padding at the bottom.var(--sp-100-s20) — padding at the start and the end (owner, 2026-11-12; the Figma masters draw s24 — flagged).No background, border or radius — it sits on its host's surface.
  • Gaps var(--sp-100-s16) — from the TextContainer to the SlotsContainer.var(--sp-100-s8) — from the title to the subtitle.var(--sp-100-s4) — from Slot#1 to Slot#2.0 — from the text to its inline slots.
  • 1
    Icon Button var(--sp-130-s40) — the tap area, max 130 %.var(--sp-s24) — the IconContainer inside it.Slots hug their content and are centred on the title's first line — a slot taller than the line overflows it evenly; the slots add no height to the header.
  • Custom Base --section-header-padding-top — the top padding.--section-header-padding-bottom — the bottom padding.--section-header-padding-inline — the start and end padding.--section-header-gap — the text to the slots.--section-header-text-gap — the title to the subtitle.--section-header-slots-gap — Slot#1 to Slot#2."All values can be customized" — any SP token, on an instance with data-ds-preset="custom".

Sizes

Pickup time Choose when the driver comes

Pickup time Choose when the driver comes

Pickup time Choose when the driver comes

Pickup time Choose when the driver comes

Pickup time Choose when the driver comes

  • 1
    XL --text-heading-heading1-* — Heading 1, PP Agrandir Bold 32/36.Fixed — does not scale (Figma binds SP/100%). 100 high with a subtitle.
  • 2
    L --text-heading-heading2-* — Heading 2, PP Agrandir Bold 24/28.Cap130. 92 high with a subtitle.
  • 3
    M --text-heading-heading3-* — Heading 3, Suisse Intl Bold 20/28.Cap130. 92 high with a subtitle. The default size.
  • 4
    S --text-heading-heading4-* — Heading 4, Suisse Intl Semibold 17/20.Full scaling. 84 high with a subtitle.
  • 5
    Custom --section-header-title-* — Heading 4 by default on the custom base (.section-header--custom), as the frame sets it; any DS text style.--section-header-padding-inline — re-pointed to var(--sp-100-s16) on this instance.
  • Subtitle --text-body-body-paragraph-* — Body Paragraph, Suisse Intl Book 16/24, on every size.Full scaling.
  • Lines The title and the subtitle wrap; with an inline slot on, the line keeps to one row and truncates.PP Agrandir has no Cyrillic — XL and L fall back to Suisse Intl Bold.

RTL

  • 1
    LTR The title and the subtitle align left; Slot#1 comes first, Slot#2 second.
  • 2
    RTL dir="rtl": the title and the subtitle align right; Slot#1 comes second, Slot#2 first — the row mirrors.The chevron mirrors — .icon-container--rtl. "The RTL layout is embedded in the components."

Animation

SectionHeader has no motion of its own: the states swap in one frame, and a component in a slot keeps its own motion.

  • 1
    Live Demo The buttons below swap the state. Press the slot's Button to see its own press; Tab through the text and the slots to see the focus.
  • Text Tap No motion — Figma stages no Pressed state. The tap goes to the host, which opens the section's details.
  • Button In A Slot --component-push-button-press — the Button's own pushButton, to 95 %.--component-push-button-release — back to 100 %.
  • Icon Button No press motion staged — the focus ring is its only feedback on the web.
  • Skeleton --pattern-shimmer — the DS Skeleton's sweep over the bars.Skeleton → Standard is a swap in one frame.
  • Disabled Standard ↔ Disabled is a swap of colours — no transition.
  • Reduced Motion --pattern-shimmer — zero at the token.--component-push-button-press — zero at the token.No override of its own.

Usage

Pick the size by the place it opens. Not the screen's navigation bar — that is the NavBar; not a row the user acts on — use a Cell; and not two headers of one size back to back with nothing between them.

  • 1
    XL The main header of the whole screen — one per screen.
  • 2
    L A bottom sheet's title; a long title wraps.
  • 3
    M The main header of an island — Payment, Ride details.
  • 4
    S The header of a group inside an island — Pickup time, Comment for the driver.

Freight Choose a vehicle for your cargo

Small truck
Up to 1.5 t
Medium truck
Up to 5 t
Large truck
Up to 10 t

Raise your fare to get drivers’ attention Drivers see higher fares first

Your fare
2 500 ₸
Recommended fare
2 900 ₸

Payment

Card ending 4242
Visa

Ride details

Rua Oscar Freire, 827
Congonhas Airport

Pickup time

Now
10–20 min
Schedule
Pick a date and time

Comment for the driver

Entrance from the courtyard

Accessibility

The TextContainer is always a heading; with Tap Area on it is also a button. Full strings per platform: section-header-a11y.md.

Tap Area On

  • 1
    TextContainer One element; the label is "[Title], [Subtitle]" — read as one stop, never two.TalkBack: role Button with isHeading = true — "Fast courier delivery, Send anything safely across the city, Button, Double-tap to activate".VoiceOver: traits .header and .button — "…, Button".
  • Inline Icons Decorative — part of the text element, not announced and not focusable. The chevron says the text opens something only to the eye.
  • Disabled Still in the focus order; the tap is refused.TalkBack ends with "disabled": "…, Button, disabled".VoiceOver says "dimmed": "…, dimmed, Button".
  • Web A heading element — the host sets its level: h1 for an XL screen title, h2 / h3 below it.Tap Area on puts one <button> inside the heading. Disabled: aria-disabled="true" — focusable, the activation refused.Trap: a native <button> still fires a click on tap, Enter and Space with aria-disabled — the host refuses it in the capture phase, before analytics counts a tap.

Tap Area Off

Complete weekly tasks Earn 150 coins — 3 days left

  • 1
    Heading The TextContainer is a heading only — "[Title], [Subtitle]" as one stop.TalkBack: role Heading — "Complete weekly tasks, Earn 150 coins — 3 days left, Heading".VoiceOver: trait .header — "…, Heading". Disabled reads as Standard on both.
  • 2
    Icon Button Labelled by its alt text — the web's aria-label.TalkBack: "Info, Button, Double-tap to activate"; disabled — "Info, Button, disabled".VoiceOver: "Info, Button"; dimmed — "Info, dimmed, Button".
  • 3
    Button Labelled by its own label.TalkBack: "120, Button, Double-tap to activate"; disabled — "120, Button, disabled".VoiceOver: "120, Button"; dimmed — "120, dimmed, Button".
  • Focus Order The TextContainer, then Slot#1, then Slot#2 — reading order. In RTL the row mirrors; assistive technology keeps the text first.
  • Focus Ring var(--sp-s2) — the outline on the button in focus, :focus-visible only.--text-and-icon-primary — its colour.
  • Skeleton The bars are hidden from TalkBack and VoiceOver (aria-hidden); the host announces the loading.

Resizing

Title Subtitle

Title Subtitle

  • 1
    100 % The header as designed.
  • 2
    150 % The text grows by its style's mode — the M title stops at 130 %, the subtitle and the inline icons grow in full.Paddings and gaps stay fixed; the IconButton's tap area stops at 130 %.A title with a TitleSlot keeps to one line and truncates; without one it wraps.