Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.


The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.


Summary box

Also known as: Featured content

Use: Deployed USWDS v3
The summary box component helps Veterans quickly identify must-read information on a page. Use this component to highlight a small chunk of the most important information on a page, like eligibility criteria or coverage under a particular VA benefit.



View va-summary-box in Storybook


Refer to the U.S. Web Design System for usage guidance

Additional guidance for VA

When to use summary box

  • Highlight the most important information. The Summary box component is for calling out key details that readers shouldn’t miss. It was originally intended to hold eligibility data exclusively. The content should be “evergreen”, not time sensitive.

When to consider something else

  • Basic overview information. This component is not intended for basic overview information.
  • Related content. Don’t use this component to highlight related information on, and drive Veterans to, other pages. Use related or major links, media cards, or stories (depending on template options) instead for this purpose.
  • Table of contents. Do not use a Summary box component for a table of contents. Use the On this page component instead for in-page navigation.
  • Dynamic highlight. If you’re highlighting something that was dynamically added to the page in response to a user action, use a variation of an Alert component.
  • Time sensitive. If you have a message that will appear only for a defined period of time, use an Alert component instead.
  • Sibling content. Use accordions to hold chunks of sibling content. For example, accordions are used in forms on the review screen.
  • Additional context. To reveal helpful background information in a form use the Additional information component. Additional info is especially useful when the content is closely tied to a particular message or input on the screen. The lighter design prevents breaking up the visual progression as the user navigates the form. These can also serve as alternative to where accordions feel too heavy.


Summary box is found towards the top of the page after the h1 title of the page and intro text.

How to use the Summary box component

  • Features must use a h3 or h4 heading depending on what the appropriate heading level is for your page based on the content of your page.
  • Also supports open text, such as <p>, <ul>, and <ol>, <strong>, <em>, and <a>.


Instances of this component in production


An example of an eligibility summary box block in the Health care eligibility page.
The summary box block is mainly intended for use in highlighting eligibility on

Like this

Example of the Link, Collection, Related links component to show a list of links.
Use the Major links variation of the Link - Collection component for a collection of links.

Not this

An example of a Summary box triptych.
Use of this component is not recommended to replace a Card component.

Like this

Example of the Related link component to show a list of links.
Use the Related links variation of the Link - Collection component for a collection of links.

Not this

An example of a spotlight content block in the VA Pittsburgh health care page.
Use of this component is not recommended for linking to related content.

Code usage

Code for this component is shown in Storybook. Follow the link provided in examples.

Content considerations

  • Keep content brief. If there are more than 5 bullet points, the bullet points are longer than 20 words, or the bullet points require a header, image or button consider using simple body text, headings, and lists instead.

Accessibility considerations

Refer to the U.S. Web Design System for accessibility guidance

Edit this page in GitHub (Permissions required)
Last updated: May 14, 2024