Web Standard: Media Blocks (aka Graphic List)

Definitions

Media blocks (images placed next to text) are added to Landing pages and are placed in rows of two. These rows are called Graphic Lists. Graphic Lists are used to showcase a number of related items and their respective images in a grid pattern.

Content Requirements

On public landing pages either graphic lists or cards are required under the banners and any taglines. Media blocks should NOT be placed under cards. The only permitted content between banners and media blocks are taglines.

Intranet landing pages must have at least two media blocks (one row of two across), and they may include up to six media blocks (three rows of two across). Follow the Intranet Media Blocks standard.

• Media block titles can vary. Headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, topics, or results.
• Use six words or less in your title. Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all Media Blocks: Two, Four, or Six. It creates a clean appearance with good spacing.
• Never highlight anything without a link to more information. In addition to your goal, find out your users’ goals. For anything you want to highlight with a media block, understand what information your users might be looking for. Consider your goals as well; what do you want them to learn or discover about the topic?

About this Standard

All EPA public web content must adhere to all federal requirements including the EPA Web Standards, the U.S. Web Design System guidelines, federal plain language guidelines, and the 21st Century Integrated Digital Experience Act.

Original effective date: 02/14/24
Last approved on: 10/10/24
Web Council review by:  10/10/27 (or earlier if deemed necessary by the Web Council)