Components
Summary Box
Also known as: Featured content
use: deployed WebExamples
Default
View va-summary-box in Storybook
Usage
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 Details component. Details 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 an alternative when accordions feel too heavy.
Placement
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
h2,h3orh4heading 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>.
Variations
Instances of this component in production
Eligibility
Am I eligible for VA health care benefits?
You may be eligible for VA health care benefits if you served in the active military, naval, or air service and didn't receive a dishonorable discharge.
-
If you enlisted after September 7, 1980, or entered active duty after October 16, 1981, you must have served 24 continuous months or the full period for which you were called to active duty, unless any of the descriptions below are true for you.
This minimum duty requirement may not apply if any of these are true:
- You were discharged for a disability that was caused—or made worse—by your active-duty service, or
- You were discharged for a hardship or "early out," or
- You served prior to September 7, 1980
- If you're a current or former member of the Reserves or National Guard, you must have been called to active duty by a federal order and completed the full period for which you were called or ordered to active duty. If you had or have active-duty status for training purposes only, you don't qualify for VA health care.
The Summary Box block is mainly intended for use in highlighting eligibility on VA.gov.
Like this
Not this
Like this
Not this
Code usage
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
Provide feedback
Share your feedback, report issues, or suggest improvements for the Summary Box component. Your input helps us make the design system better for everyone.
- Get immediate support in #platform-design-system for technical or urgent issues.
- Explore all feedback channels for additional ways to share your input.