Patterns
Pages
Pattern documentation on VA.gov’s page templates.
Hub pages
A hub page page does the following:
- Provides an executive summary of this hub
- Provides links to lead users to specific sections about that benefit
- Crosslink to related benefits
- Allows users to connect via social media
- Provides contact information for this benefit
An example hub page:
The hub page pattern can be broken down into an ordered set of components:
Hierarchy
We surface information that is important to Veterans first. The hierarchy of a hub page is as follows:
Page title (h1)
Tells the user what’s on this page, is also important semantically for html, defined in Foundation here
Intro text
Similar to the title, Intro text is an executive summary of page content, defined in Foundation here. Intro text is also important for SEO.
Jump link navigation (On this page)
Jump link nav serves two purposes: 1) It informs users what sections are on this particular page, and 2) it allows the user to jump to the section they wish to read.
Section breaks
In order to be clear when a section begins, we use a “—★★★★★—” visual treatment documented here
Section 1 (h2)
The first section on a Hub page template contains information about how a Veteran might go about getting this benefit. Our h2s are defined in Foundation
Section 2 (h2)
The second section on a Hub page template contains information about how a Veteran might go about managing this benefit.
Section 3 — optional (h2)
The third section on a Hub page template contains information about how a Veteran might go about finding more information about this benefit.
Link and teaser component
Each section contains a set of “link + teaser” components which takes the user to a particular subsection of the benefit (e.g. a page to see if they are eligible for health care, a page to apply for health care, etc). This component doesn’t have a home in our design system yet.
Cross-reference / footnote component
At the bottom of every Hub page, we list benefits that are related to, but not part of, the current benefit the user is viewing. All of these links drive users to other hub pages, so we treat this section visually different than the Link and teaser component. This content also deserves to be component-ized.
Right rail
The right rail contains [this kind] of content. More stuff about the right rail.
Promo spot
The top of the right rail contains our Promo spot. I don’t know anything about this content, but it seems like it should be a component in our design system
Accordion
In the second postion within the right rail, we list accordions containing specific groups of content. These accordions are the lowest priority pieces of content on a hub page, and they are positioned as such—at the bottom of the page. Some examples of accordions are:
- “Ask questions” a short list of contact emails and phone numbers
- “Not a Veteran” helpful links for folks that aren’t Veterans
- “Connect with us” social media links