Content with Gray Background
What it will look like
We're using the Content with Gray Background content type throughout this documentation to set it apart visually from the rest of the site. In fact, the content in this block is Content with Gray Background. You'll also find an example below with the heading "Content type example."
Content type example
This is what Content with Gray Background looks like. It supports rich text and images, but most commonly you'll use it for a short description or instructions.
When to use
You'll only use this content type on Gateway pages. This content type is visually neutral and works as supporting text to highlight other content on a page. This is useful when introducing other types of content. Here are some ways you can use it:
- a collection of documents or videos
- an embedded tool or map
- a form
- a link to an external tool
When to consider something else
When you are editing or creating anything other than a Gateway Page, choose other content types to build your page. Good candidates are:
- Scannable Paragraphs
- Multicolumn Content
- Featured Image/Videos
- Accordion
Heading options
Use one of these four headings for the information you want to share about the document, map, video or other content on the gateway page:
How to use the map
Use only on maps pages.
Before you begin
Use to give user helpful information, such as:
- Details about the process (example: on bike registration page, informing user that multiple bikes have to be registered separately)
- If they'll have to provide info beyond the basics (name, email, address, phone). This could be account numbers, driver's license number, etc.
- An alert about an especially long (or tricky in some other way) document
Use wording that makes sense. For example, don't follow with "Enter your driver's license number and license plate number" – which is not something the user does before beginning. Try "Be prepared to enter your driver's license...." or "You'll need to provide your ...."
What to do
Use to provide instructions or explain the action a user should take. Examples:
- If a traffic light is broken, submit a report.
- If you witness a traffic accident, call 911.
- Download the application, fill it out and mail it to the address on the form.
What to know
Use when the documents or map on the page only need a brief introduction. For more detailed or crucial information, use the Before you begin heading.
Best practices
Do
- Keep content brief.
- Use sub-headings to break apart multiple paragraphs. Always start at a heading level 3 since the main heading of the content type is a heading level 2.
- Use bulleted or numbered lists when possible.
Don't
- Avoid including a lot of images.
Accessibility
It's critical to use the Content with Gray Background to describe tools and documents that may not be accessible to everyone. If you are introducing something visual, include all important and relevant information. For example, if you have a gateway page for an interactive map of a neighborhood, use the Content with Grey Background content type to describe the features of the map, including street names and locations of interest.
Resources
Accessibility
Help us improve
Send feedback to the Digital Services Team.