UX Patterns Guide
UI + UX Data Display And Exploration established

Summary box

Provide a concise, clearly headed summary region that extracts the essential facts or next steps from the surrounding page, preserves source context, keeps links selective, and avoids alert, warning, validation, and navigation semantics when those patterns would be more accurate.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • A longer page has a small set of key facts or next steps that users need early.
  • The content is important but not urgent dynamic status, severe warning, or submitted-form error recovery.
  • The product can keep the summary synchronized with the detailed content.
  • The box helps users orient, decide, or continue without replacing the full explanation.

Avoid when

  • The highlighted content is an urgent status, outage, validation result, or severe consequence.
  • The page is already short enough that a summary duplicates it.
  • The content needs to be hidden until requested.
  • The primary purpose is a list of onward links rather than summarizing current-page content.
  • The summary would become the only place where required instructions appear.

Problem it prevents

Long pages often contain a small set of facts users need immediately, but burying those facts in prose slows scanning while over-highlighting whole sections creates another wall of text.

Pattern anatomy

What a strong implementation has to make clear

User need

The page has longer guidance, policy, service instructions, eligibility rules, process detail, or next-step information.

Pattern promise

Provide a concise, clearly headed summary region that extracts the essential facts or next steps from the surrounding page, preserves source context, keeps links selective, and avoids alert, warning, validation, and navigation semantics when those patterns would be more accurate.

Required state

Default summary box with heading, concise body, key points or next steps, and optional task-specific link.

Recovery path

Users treat static summary guidance as a current alert because the styling mimics alerts.

Access contract

Expose the box as a labelled region or group with a heading that fits the page heading hierarchy.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A benefits guide has a summary box headed Before you apply with deadline, required documents, and Start application link above the detailed eligibility rules.
  • A service page shows What happens next with three short steps, expected timing, and one link to track the case.
  • A user scans the box, learns they need photo ID and proof of address, then continues into the detailed instructions with the same terms repeated in context.
  • A returning user uses the next-steps box to jump to Track application without rereading the whole guidance page.
Weak implementation

Vague, hidden, hard to recover from

  • A pale box repeats the entire page introduction, every related link, and several unrelated policy notes.
  • A red box labelled Summary contains validation errors and warnings, making it look like an alert but behave like static guidance.
  • Users miss an eligibility rule because it appears only inside a sidebar summary and not in the main instructions.
  • A summary box lists six links but gives no explanation of which one is the next step.
UI guidance
  • Render a summary box as a labelled region with a specific heading, short body, scannable key points or next steps, and only links that directly support the summarized page task.
  • Place the box close to the longer content or decision it summarizes, and keep the visual treatment distinct from warnings, alerts, validation summaries, decorative cards, and navigation link collections.
UX guidance
  • Use summary box when users need the essential facts, eligibility notes, deadlines, documents, or next steps from a longer page before reading every detail.
  • Keep the box selective and source-faithful: it should reduce cognitive load by extracting the few facts users need now, not duplicate the whole page or hide critical content that must remain in the main flow.
Implementation contract

What the implementation must handle

States

  • Default summary box with heading, concise body, key points or next steps, and optional task-specific link.
  • Summary with no link, one primary link, and several tightly scoped supporting links.
  • Long-page paired state where detailed sections repeat or expand the summarized facts.
  • Out-of-date or content-mismatch review state when the summary no longer matches the page body.

Interaction

  • The summary box summarizes content that is present, reachable, or clearly linked from the same task context.
  • The heading names the summary's purpose, such as Before you apply or What happens next, not only Summary.
  • Every bullet is short, specific, and independently useful.
  • Links inside the box are limited to the next action, tracking route, evidence requirement, or directly summarized section.

Accessibility

  • Expose the box as a labelled region or group with a heading that fits the page heading hierarchy.
  • Do not rely on background color, border, icon, or placement alone to communicate importance.
  • Use semantic lists for key points and descriptive link text for next steps.
  • Keep the box in the normal reading order near the content it summarizes.

Review

  • What exact longer content does this box summarize?
  • Can users understand the box from its heading without reading the entire page?
  • Are the facts selective enough to reduce scanning effort?
  • Would alert, warning text, inline message, disclosure details, related links, or error summary be more accurate?
Interactive lab

Inspect the states before you copy the pattern

Extract key facts from a longer page

Inspect a purpose-specific summary heading, key facts, next-step link, synchronized body sections, outdated-summary review, too-long, alert-misuse, warning-misuse, link-dump, hidden-required, vague-heading, and mobile-wall failures.

Summary box
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default summary box with heading, concise body, key points or next steps, and optional task-specific link.

Keyboard / Access

Static summary text does not receive focus unless it contains links or controls.

Avoid Generating

Repeating the whole page in a highlighted box.
Evidence trail

Source-backed claims behind this guidance

USWDS: Summary box component

U.S. Web Design System - checked

USWDS documents summary boxes for highlighting key information from longer pages or displaying next steps.

VA Design System: Summary box

U.S. Department of Veterans Affairs - checked

VA documents summary boxes for surfacing important page information with headings, links, and accessibility guidance.

NHS Service Manual: Inset text

NHS - checked

NHS inset text guidance distinguishes important non-warning page information from warning and alert treatment.

Full agent/debug reference

Problem Context

  • The page has longer guidance, policy, service instructions, eligibility rules, process detail, or next-step information.
  • Users need a compact orientation before deciding whether to continue, gather evidence, start a task, or read the full page.
  • The highlighted content is important but not a dynamic urgent status, form error summary, severe warning, or hidden optional explanation.
  • The box may contain a heading, short paragraph, bullet list, limited links, and a call to action that belongs to the page task.
  • The same facts must remain consistent with the detailed page content and any downstream form or confirmation state.

Selection Rules

  • Choose summary box when a longer page needs a compact extract of key facts, next steps, eligibility, documents, dates, or outcomes.
  • Use alert when the message is a current urgent status or dynamic condition that users must notice now.
  • Use warning text when the content is a severe consequence before an action or omission.
  • Use inline message when feedback belongs to one row, card, form section, or local object state.
  • Use disclosure details when the content is optional help that can stay hidden behind a specific summary label.
  • Use related links when the main job is onward navigation rather than summarizing page content.
  • Use error summary when submitted form errors need a linked list of invalid answers.
  • Keep summary boxes short enough to scan; move long explanations, branching instructions, and full workflows back into the page body.
  • Do not use summary box as decoration around ordinary paragraphs or as a universal card style.
  • Do not place facts only in the summary box when users must encounter them in sequence during the task.

Required States

  • Default summary box with heading, concise body, key points or next steps, and optional task-specific link.
  • Summary with no link, one primary link, and several tightly scoped supporting links.
  • Long-page paired state where detailed sections repeat or expand the summarized facts.
  • Out-of-date or content-mismatch review state when the summary no longer matches the page body.
  • Narrow-screen state where heading, bullets, and links wrap without turning into a card stack or alert.
  • Print or no-style state where the summary remains readable as a labelled region.

Interaction Contract

  • The summary box summarizes content that is present, reachable, or clearly linked from the same task context.
  • The heading names the summary's purpose, such as Before you apply or What happens next, not only Summary.
  • Every bullet is short, specific, and independently useful.
  • Links inside the box are limited to the next action, tracking route, evidence requirement, or directly summarized section.
  • The box does not auto-dismiss, announce as urgent, open a modal, or hide details unless another pattern owns that behavior.
  • Updating detailed page content requires updating or removing any summary that restates those facts.
  • The summary remains visually connected to the page content it summarizes and does not compete with page title, error summary, or primary action.

Implementation Checklist

  • Identify the long page content that users repeatedly need to scan first.
  • Choose three to five key facts or next steps; remove background explanation, exceptions, and loosely related links.
  • Write a purpose-specific heading and short bullets using the same terms as the detailed page.
  • Place the summary after the H1 or near the relevant section according to the page task.
  • Keep the box as a semantic region or labelled group with proper heading order.
  • Check that each summarized fact is still present or expanded in the body content where users need it.
  • Test long headings, long links, no links, several links, mobile width, zoom, print, screen readers, and content updates.
  • Audit for misuse as alert, warning text, error summary, card grid, related-links list, or disclosure control.

Common Generated-UI Mistakes

  • Repeating the whole page in a highlighted box.
  • Using a summary box for urgent dynamic status that should be an alert.
  • Using a summary box for severe consequence copy that should be warning text.
  • Listing unrelated links until the box becomes a navigation dumping ground.
  • Putting required facts only in the box and not in the relevant detailed section.
  • Using vague headings such as Important or Summary without saying what the box helps users do.
  • Letting summarized dates, amounts, eligibility, or next steps drift from the main page content.

Critique Questions

  • What exact longer content does this box summarize?
  • Can users understand the box from its heading without reading the entire page?
  • Are the facts selective enough to reduce scanning effort?
  • Would alert, warning text, inline message, disclosure details, related links, or error summary be more accurate?
  • Are summarized facts repeated or expanded in the main content where users need them?
  • What editorial process keeps the box synchronized with the page body?
Accessibility
  • Expose the box as a labelled region or group with a heading that fits the page heading hierarchy.
  • Do not rely on background color, border, icon, or placement alone to communicate importance.
  • Use semantic lists for key points and descriptive link text for next steps.
  • Keep the box in the normal reading order near the content it summarizes.
  • Avoid role alert unless the content is truly urgent and dynamic, which usually means a different pattern is needed.
  • Ensure links, bullets, and headings wrap cleanly at high zoom and small widths.
Keyboard Behavior
  • Static summary text does not receive focus unless it contains links or controls.
  • Links inside the summary appear in normal reading order after the heading and supporting copy.
  • Any primary link has destination-specific text such as Start application or Track your case.
  • Keyboard order moves from the summary into the detailed page content without skipping required instructions.
  • If a link jumps to a detailed section, focus or scroll lands on a real heading that expands the summarized fact.
Variants
  • Before you start summary
  • Before you apply summary
  • What happens next box
  • Key facts box
  • Evidence needed box
  • Eligibility summary
  • At a glance box
  • Process summary
  • Service next steps box

Verification

Last verified: