Web Standard: Landing Page
Note
All EPA public and internal content pages and web applications are required to follow this standard.
On this page:
Definitions
A landing page introduces a large collection of information on a specific topic or subject and is often the starting point to get to other related information. All homepages are landing pages. Homepages provide an overview of the most important or relevant topics in the web area.
Only homepages can be landing pages.
Public Content Requirements
- Banner/Hero Image(s): Full-width image under the Web Area Name.
- Banner images should be a JPG image file that is 2048w x 820h pixels. Images should not contain embedded text. The only text permitted is on the overlay box. See Image Guidance.
- Up to four rotating banners are permitted but note that news-related banners are difficult to maintain.
- Banner/Hero Overlay box (content area): The banner/hero overlay box is the text that appears over the image in a blue box.
- This should be limited to four-six words in the title field, and the main body field should contain no more than 25 words.
- No images (including logos) are allowed in the main body field.
- Adding a button is optional, but strongly suggested. If used, button text should be two to four words, typically with a verb that includes a call to action. If you add a button, do not add any links in the main body field. Please follow the Link Text web standard.
- Links on banners should point directly to EPA related content and not to documents (e.g. Word files or PDFs) or any external EPA link including any EPA content that is not on an EPA website (e.g. StoryMaps).
- iFrames and CSS or custom code are NOT permitted in banners.
- (Optional) Tagline
- If you choose to use a tagline, you must add only one and it must be placed directly below the banner/hero. The tagline text must be no more than 80 words. Links are discouraged in taglines. If you wish to add a link, limit it to only one.
- You can use plain introductory text instead of the tagline paragraph.
- Under the banner/hero (and optional tagline) will be links pointing to the most important content within your web area. You must do this using one or more of the following components. Do not use more than one type of component in the same row.
- Graphic List: Made up of at least 2 Media blocks but up to 6. Media blocks should NOT be placed under cards. The only permitted content between banners and media blocks are taglines and, in exceptional circumstances, alerts. Follow the web standard for Media Blocks (aka graphic lists).
- Cards: Made up of at least 3 vertical cards or 2 Flag cards. Do NOT place media blocks under cards. Follow the web standard for cards.
- Collection of paragraphs: Create 1-2 complete rows of 2-3 paragraphs or sections with an image (optional), and links to related items within your web area below the headers (required). This includes dynamic lists, slideshows and other specialty content. When adding heading tags, you should ensure that they follow a nested structure. h1 is used for the page title, followed by h2 for subheadings, and so on to h6. Don't skip heading levels (e.g. h3 instead of h2).
- (Optional) Boxes
- Boxes should go after cards or other paragraph types. In emergency or natural disaster cases, OEA's Digital, Risk Communication, and Press Division must approve an alert or warning box used directly below the banner.
- If you want to direct people to important related content outside of your web area, use styled boxes liked "Related Information."
All web standard requirements for individual components on a landing page must be followed.
Intranet Content Requirements
Only homepages can be landing pages.
Content on a Landing page must link to content within its own web area. The only exception is outlined in the Banner/Hero Image(s) section.
Elements on a Landing page
While some of the components on a landing page are optional, the order in which components are placed on the page is not optional.
- Headline (Page Title) - not displayed to the user but used in breadcrumbs
- Hero Image(s) and Hero Block (required). A full-width image under the web area name.
- Banner images can be a JPG or PNG image file that is 2000w x 400h (up to 600h) pixels. Images should not contain embedded text. The only text permitted is on the overlay box. See Image Styles.
- Up to four rotating banners are permitted, which can include news-related banners that may link to news-related content within the www.work.epa.gov, www.epa.gov and SharePoint environments only. This is the only exception where content on a landing page can link to content outside the web area. News banners must pertain to or be related to the subject matter of the web area. Links on banners must not point directly to documents (e.g. Word files or PDFs) or any external EPA link.
Banner/Hero Overlay box (content area): The banner/hero overlay box is the text that appears over the image in a blue box. Also, for the text fields that appear on each banner, the guidance for the
Hero Heading (Alternate) title field – should consist of four to six words.
Hero Text, for the text field – should consist of overlay field of about 25 words or less.
Hero callout button Link text field – the button text field should consist of two to four words. , typically with a verb that includes a call to action. Follow the Link Text web standard.
- Tagline (optional):A tagline highlights your approach. The tagline should inspire confidence and interest, focusing on the value that your overall approach offers to your audience. Use a heading typeface and keep your tagline to just a few words, and don’t confuse or mystify. Use the right side of the grid (tagline text) to explain the tagline a bit more. What are your goals? How do you do your work? Write in the present tense, and stay brief here. People who are interested can find details on internal pages.
- The first component on the landing page after the optional tagline will be either:
- Graphic List (required): Made up of at least 2 Media blocks but up to 6. Media blocks should NOT be placed under cards.
-OR- - Cards: (required): Made up of at least 3 vertical cards or 2 Flag cards. If cards are used in place of media blocks, we recommend the inclusion of a tagline above it. Do NOT place media blocks under cards. Please note for the text fields that appear on each card, the guidance is for the title field four to six words, for the text overlay field 25 words or less, and for the button text field two to four words. Adhering to this guidance will help insure the card text is concise. These are “teasers” and should not have long, descriptive text.
- Graphic List (required): Made up of at least 2 Media blocks but up to 6. Media blocks should NOT be placed under cards.
- Any of the following (optional). Each component has it's own design standards or limitations.
Considerations
The Intranet CMS visual design is based on the U.S. Web Design System.
- You should NOT place text between the Hero and the first row of media blocks. The only type of content allowed between the Hero and the first row of media blocks, is the Tagline custom block.
- Limit the use of text on a Landing page - your content should provide just enough information to guide a user to the next layer of information. Any text blocks placed on a page must be below the media blocks.
- Remember - less is more! Don't overwhelm your users with content and too many choices.
Section Styling
Sections may have background colors applied to them.
- When colors are applied to sections, the sections in between those with colored background MUST have either a background color of None (white) or Gray-1.
- Use the table below to determine which background colors pass the color contrast testing for each component.
- Colors that have failed the color contrast test with a specific component may not be used.
Tagline components may NOT use a background color.
| Background Color | Media Block | Card | Section with Call to Action | Dynamic List | Slideshow |
|---|---|---|---|---|---|
| Accent Warm Lighter | Pass | Pass | Pass | Pass | Pass |
| Aqua Dark 1 | Fail | Pass | Fail | Pass | Fail |
| Accent Warm Darker | Fail | Pass | Fail | Pass | Fail |
| Blue Dark | Fail | Pass | Fail | Pass | Fail |
| Green Dark | Pass | Pass | Fail | Pass | Fail |
| Green Dark 1 | Fail | Pass | Fail | Pass | Fail |
| Gray 1 | Pass | Pass | Pass | Pass | Pass |
| Aqua Light | Pass | Pass | Pass | Pass | Pass |
| Blue Light | Pass | Pass | Pass | Pass | Pass |
| Green Light | Pass | Pass | Pass | Pass | Pass |
| Aqua Light 1 | Pass | Pass | Pass | Pass | Pass |
| Blue Light 1 | Pass | Pass | Pass | Pass | Pass |
| Green Light 1 | Pass | Pass | Pass | Pass | Pass |
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: 03/13/2024
Last approved on: 07/09/2026
Web Council review by: 07/09/2029 (or earlier if deemed necessary by the Web Council)