Section heading

Section heading options
Choice	Values	Default	What it does
`sizesmbk-section-heading--size-<value>`	`mdsm`	`md`	Small sets the title a heading step smaller with a smaller count, for a panel among many.

Partssmbk-section-heading__textsmbk-section-heading__title-rowsmbk-section-heading__titlesmbk-section-heading__countsmbk-section-heading__summarysmbk-section-heading__actionsmbk-section-heading__hidden

The title, its count and how fresh the section is, with one way into the full list.

Waiting on you

3 waiting

Updated a minute ago

See all

Medium heads a section of the page; small heads a panel among many.

Open pull requests

12 open

Across four repositories

See all

Open pull requests

12 open

Across four repositories

See all

The head of a card’s body, with a small ghost button as its action.

Scheduled releases

2 scheduled

The next one goes out on Friday

The action moves under the line, at its start.

Waiting on you

3 waiting

Updated a minute ago

See all

A long title wraps, with its count beside it.

Invoices sent this quarter that are still waiting for a payment

7 unpaid

See all

The count, the line and the action are each optional.

Recent activity

The last seven days

See all

Purpose

Heads a section of a page or a panel among many: its title, how many things it holds, a quiet line such as how fresh it is, and one action at its end, usually a way into the full list. It is smaller than the page header and holds no breadcrumbs or tabs.

When to use

At the top of a section of a dashboard or an overview, above the list or the cards it counts.
At the top of a card's body, for a panel among many.

When not to use

For the top of a whole page. Use the page header.
For a heading with a paragraph of introduction under it. Use a heading and a paragraph.
For the title of a card that has nothing to count and nothing to do. Use the card's own title.

Usage rules

Do

Keep the title to a few words that name what the section holds.
Say how fresh the section is in the summary, when it changes on its own.
Lead the action to the full list the section shows part of.

Don't

Put the count in the title's words.
Give a section more than one action, or more than two buttons in a group.
Use it where a page header belongs.

Waiting on you

3 waiting

Say what the count counts, so a screen reader hears "3 waiting", not a bare number.

Waiting on you (3)

Don't

Put the count in the title, where it becomes part of the heading’s name and changes it.

Anatomy

The block, a row: the text at its start and the action at its end.
The text part, holding the title row over the summary.
The title-row part, holding the title and the count side by side.
The title part, the heading, in a heading style.
The count part, an optional badge beside the title, outside the heading.
The summary part, an optional line in a small body style and the subtle text color.
The action part, an optional action: a link such as "See all", a small ghost button, or a group of two.
The hidden part, the words after the count that only a screen reader hears.

Behavior

The action is centred on the row. In a narrow layout the action moves under the summary, at its start. A long title wraps, with its count beside it. Small sets the title a heading step smaller with a smaller count.

What it does for you

The title is a heading of the level the page needs: 2 by default.
The count sits outside the heading, so the heading's name is the title alone ("Waiting on you"), however the count changes. The count describes the heading, so a screen reader hears it after the title.
Reading and Tab order: the title, the count, the summary, then the action.

What you must do

Set headingLevel to fit the page's outline.
Give the count its noun with countLabel, so a screen reader hears "3 waiting", not a bare number. Never show a count by color alone.
Give an action that is an icon alone a name.

How to test

With a screen reader, the title is read as a heading of the right level, and the count is read after it with its noun. Check the headings list: the title shows without the count.
Tab from the title: focus goes to the action, which shows the focus ring and has a name.
With text at 200% and the page 320 pixels wide, a long title wraps with its count beside it, and the action moves under the summary.
In a forced-color mode, the focus ring on the action stays visible.

The files the section heading is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

section-heading.css

/* smbk-section-heading — Section heading. Figma "Section heading" 7115:943 (Size × Layout; Count, Summary and Action
 * booleans). The heading row of a section or a panel: the title in Heading XS (Heading 2XS when small) with its count
 * as a default badge beside it, a line in Body SM under them, and one action at the row's end, centred on the block.
 * The count sits outside the heading element, so the heading's name is the title alone. In a narrow layout the
 * action moves under the line, at its start. */

.smbk-section-heading {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-lg);
}

/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
   frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
   that places the block keeps its say. */
:where(.smbk-section-heading) {
  position: relative;
}

.smbk-section-heading__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-sm);
}

.smbk-section-heading__title-row {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-md);
}

.smbk-section-heading__title {
  margin: 0;
  min-width: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-heading-xs-font-family);
  font-size: var(--smbk-typography-heading-xs-font-size);
  font-weight: var(--smbk-typography-heading-xs-font-weight);
  line-height: var(--smbk-typography-heading-xs-line-height);
  letter-spacing: var(--smbk-typography-heading-xs-letter-spacing);
  text-transform: var(--smbk-typography-heading-xs-text-transform);
}

.smbk-section-heading__count {
  flex: none;
}

/* Figures of one width, so a line that counts, such as "Updated 12 s ago", never moves the words after the number. */
.smbk-section-heading__summary {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
  font-variant-numeric: tabular-nums;
}

.smbk-section-heading__action {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

/* .smbk-section-heading__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */

/* ---- small: the title a heading step smaller ---- */

.smbk-section-heading--size-sm .smbk-section-heading__title {
  font-family: var(--smbk-typography-heading-2xs-font-family);
  font-size: var(--smbk-typography-heading-2xs-font-size);
  font-weight: var(--smbk-typography-heading-2xs-font-weight);
  line-height: var(--smbk-typography-heading-2xs-line-height);
  letter-spacing: var(--smbk-typography-heading-2xs-letter-spacing);
  text-transform: var(--smbk-typography-heading-2xs-text-transform);
}

/* ---- narrow: the action goes under the line, at its start ---- */

@container style(--smbk-layout: narrow) {
  .smbk-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--smbk-space-stack-lg);
  }

  .smbk-section-heading__text {
    align-self: stretch;
  }
}

Tokens it reads

Section heading tokens
Token and CSS	Value	Preview	Foundation
space.inline.lg--smbk-space-inline-lg	comfortable: 12pxcompact: 8pxchanges with density		Spacing
space.stack.sm--smbk-space-stack-sm	comfortable: 8pxcompact: 6pxchanges with density		Spacing
space.inline.md--smbk-space-inline-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.heading-xs--smbk-typography-heading-xs-font-family--smbk-typography-heading-xs-font-size--smbk-typography-heading-xs-font-weight--smbk-typography-heading-xs-line-height--smbk-typography-heading-xs-letter-spacing--smbk-typography-heading-xs-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 20px · max: 28pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
typography.heading-2xs--smbk-typography-heading-2xs-font-family--smbk-typography-heading-2xs-font-size--smbk-typography-heading-2xs-font-weight--smbk-typography-heading-2xs-line-height--smbk-typography-heading-2xs-letter-spacing--smbk-typography-heading-2xs-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 18px · max: 24pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
space.stack.lg--smbk-space-stack-lg	comfortable: 16pxcompact: 12pxchanges with density		Spacing

Manifest

section-heading.manifest.json

{
  "name": "section-heading",
  "block": "smbk-section-heading",
  "summary": "The heading row of a section or a panel: its title, how many it holds, a quiet line such as how fresh it is, and one action at its end.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "md",
        "sm"
      ],
      "default": "md",
      "description": "Small sets the title a heading step smaller with a smaller count, for a panel among many."
    }
  },
  "flags": {},
  "parts": [
    "text",
    "title-row",
    "title",
    "count",
    "summary",
    "action",
    "hidden"
  ],
  "figmaNodeId": "7115:943"
}

Menu

Customize the preview

Waiting on you

Options

Examples

Usage

Waiting on you

Sizes

Open pull requests

Open pull requests

In a card

Scheduled releases

In a narrow space

Waiting on you

With a long title

Invoices sent this quarter that are still waiting for a payment

Without a count

Recent activity

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Waiting on you

Waiting on you (3)

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source

Waiting on you

Options

Examples

Usage

Waiting on you

Sizes

Open pull requests

Open pull requests

In a card

Scheduled releases

In a narrow space

Waiting on you

With a long title

Invoices sent this quarter that are still waiting for a payment

Without a count

Recent activity

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Waiting on you

Waiting on you (3)

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Related

Source