Summary box

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?