# Section heading 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. Block: `smbk-section-heading`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only. ## Options | Axis | Values | Default | Meaning | |---|---|---|---| | `size` | `md`, `sm` | `md` | Small sets the title a heading step smaller with a smaller count, for a panel among many. | Parts: `smbk-section-heading__text`, `smbk-section-heading__title-row`, `smbk-section-heading__title`, `smbk-section-heading__count`, `smbk-section-heading__summary`, `smbk-section-heading__action`, `smbk-section-heading__hidden` ## Markup ```html

Waiting on you

3 waiting

Updated a minute ago

See all
``` ## React ```tsx import { SectionHeading } from './design-system/components/section-heading/section-heading.js'; import { Link } from './design-system/components/link/link.js'; See all} /> ``` ## Stylesheet ```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 ```json { "space": { "inline": { "lg": { "$type": "dimension", "$value": "{{space.12}}", "$description": "Gap between things side by side, large." }, "md": { "$type": "dimension", "$value": "{{space.8}}", "$description": "Gap between things side by side, medium." }, "sm": { "$type": "dimension", "$value": "{{space.6}}", "$description": "Gap between things side by side, small." } }, "stack": { "sm": { "$type": "dimension", "$value": "{{space.8}}", "$description": "Gap between things stacked one above another, small." }, "lg": { "$type": "dimension", "$value": "{{space.16}}", "$description": "Gap between things stacked one above another, large." } } }, "color": { "text": { "default": { "$type": "color", "$value": "{{color.grey.900}}", "$description": "Main text." }, "subtle": { "$type": "color", "$value": "{{color.grey.700}}", "$description": "Secondary text: descriptions, metadata." } } }, "typography": { "heading-xs": { "$type": "typography", "$value": { "fontFamily": "Funnel Display, Funnel Display Fallback, system-ui, sans-serif", "fontSize": { "min": "20px", "max": "28px" }, "fontWeight": 400, "lineHeight": 1.2, "letterSpacing": "0px" } }, "body-sm": { "$type": "typography", "$value": { "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif", "fontSize": "14px", "fontWeight": 400, "lineHeight": 1.5, "letterSpacing": "0px" } }, "heading-2xs": { "$type": "typography", "$value": { "fontFamily": "Funnel Display, Funnel Display Fallback, system-ui, sans-serif", "fontSize": { "min": "18px", "max": "24px" }, "fontWeight": 400, "lineHeight": 1.2, "letterSpacing": "0px" } } } } ``` ## 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. ## 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. ## 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](page-header.md). - 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](card.md)'s own title. ## 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. ## Accessibility ### 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. ## 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.