- By: Author
- In: Agency
Short title
Briefly tell your reader what they will find at the card's destination then link to the official news release or news section within your site.
Card grid
There are three types of card grids to present related information:
- Basic card grid
- News grid
- Card grid with imagery
Basic
A basic card grid highlights content in grids. It visually shows content or elements that belong together with a button to indicate a call-to-action.
Card title
Use the content found at the button link to inspire your card title.
Button with link related to card titleTitle
Cards use the heading text style for titles. Keep them short, concise, and consistent.
Button with some linkCard body
Use this space to briefly tell your reader what they will find at the card's destination.
Button with link that goes somewhere
Card title
Use the content found at the button link to inspire your card title.
Button
with link related to card title
Title
Cards use the
heading
text style for titles. Keep them short, concise, and consistent.
Button
with some link
Card body
Use this space to briefly tell your reader what they will find at the
card's destination.
Button
with link that goes somewhere
News grid
The news grid features information relevant to your agency or department. It offers you space to highlight current events, topics or developments. Use this option to link to a news section within your site or a related, official press release. Add an optional date, author and agency name.
- By: Author
- In: Agency
Short title #2
Briefly tell your reader what they will find at the card's destination then link to the official news release or news section within your site.
- By: Author
- In: Agency
Short title #3
Briefly tell your reader what they will find at the card's destination then link to the official news release or news section within your site.
Month DD, YYYY
-
By:
Author
-
In:
Agency
Short title
Briefly tell your reader what they will find at the card's destination
then link to the official news release or news section within your
site.
Month DD, YYYY
-
By:
Author
-
In:
Agency
Short title
#2
Briefly tell your reader what they will find at the card's destination
then link to the official news release or news section within your
site.
Month DD, YYYY
-
By:
Author
-
In:
Agency
Short title
#3
Briefly tell your reader what they will find at the card's destination
then link to the official news release or news section within your
site.
Imagery
Imagery helps to visually communicate information. Use it to help your visitors understand your content better.
Graphics
Infographic
Commonly recognized by visitors and generally reserved for data-rich visualization.
Icons
Should be simple and maintain the likeness of the object it represents. samples
Card body
This space should quickly describe what visitors will find at the button link.
Images
Card title
Briefly tell your reader what they will find at the card's destination then link to that location.
Card title
Briefly tell your reader what they will find at the card's destination then link to that location.
Card title
Briefly tell your reader what they will find at the card's destination then link to that location.
Graphics
Infographic
Commonly recognized by visitors and generally reserved for data-rich
visualization.
Icons
Should be simple and maintain the likeness of the object it
represents. samples
Card body
This space should quickly describe what visitors will find at the
button link.
Images
Card title
Briefly tell your reader what they will find at the card's destination
then link to that location.
Card title
Briefly tell your reader what they will find at the card's destination
then link to that location.
Card title
Briefly tell your reader what they will find at the card's destination
then link to that location.
Usage
When and how to use it
Card grid
Keep cards simple. Cards are meant to show a taste of the available information. Don't overload cards with more information than necessary.
Communicate clearly about a card's destination. Cards take someone to another experience, so the content should focus on the value a person can find when they get there.
Cards, by definition, should have some form of interaction such as viewing, editing, purchasing, etc. Some actions are exposed in buttons, and others simply occur by clicking the card.
If a card only has an ability to be opened or viewed in more detail, do not include a button. Clicking anywhere on the card should perform that action.
Imagery
Use icons in a manner that is commonly understood.
How not to use it
Card grid
Avoid using the word “new” in a card unless the design has a limited timeframe or is actually new and relevant to someone. Avoiding this word also helps to minimize the work required to go back and update card titles when a feature is no longer new.
Images
Don't use a commonly used icon for a different purpose.
We use photos and illustrations for visualizing information. We follow these guidelines:
- Do not use images as unnecessary decoration. Photos and images should be used to support the content.
- Use an aspect ratio of 3:2 for all images. The exception is if the proportions of the subject of the image have significance. For example, an image of a driver's license or an image of an application form.
- Use alt text whenever adding images. Alt text makes websites more accessible and helps with search engine optimization. Read more about writing alt text in Harvard University's digital accessibility guidelines .
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes