Web Standard: Landing Page

On this page:

• Definitions
• Public Content Requirements
• Intranet Requirements
  • Elements
  • Section Styling

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.

Currently in the WebCMS, only homepages can be landing pages. However, the Intranet CMS allows for multiple landing pages in one web area. Other landing pages help consolidate a large collection of information within a larger web area. Multiple landing pages will be introduced to the WebCMS later. Other web applications may vary.

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 4 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. 

  • 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, ODC 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

Currently in the WebCMS, only homepages can be landing pages. However, the Intranet CMS allows for multiple landing pages in one web area. Other landing pages help consolidate a large collection of information within a larger web area. Multiple landing pages will be introduced to the WebCMS later. Other web applications may vary.

Landing pages should be used to introduce the most important groups or categories of content in your web area. A Landing page can also be used to bring structure to a grouping of information that your audience may not intuit as being related.

To determine whether or not your web area needs a Landing page, consider the following:

• Is this page introducing a new, large section of information?
• Is this the starting point to get to lots of other pages?
• Will the information on this page benefit from multiple boxes of chunked information?

If you answered "Yes" to at least 2 of the 3 above questions, you might need a Landing page! If not a Landing page, you may want to consider a basic page for your needs.

Elements on a Landing page

While some of the elements are optional, the order in which they are placed on the page is not.

1. Headline (Page Title) - not displayed to the user but used in breadcrumbs
2. Hero Image and Hero Block (required). Note: the hero image should not contain any text or images within the image. The hero image is responsive and the viewport will change based on the user's screensize. Only images without text and without additional images (such as the EPA logo/seal) should be used as hero images. Also, for the text fields that appear on each banner, the guidance for the title field is 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 ensure the banner text is concise. These are “teasers” and should not have long, descriptive text.
3. 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.
4. 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.
5. Any of the following (optional). Each component has it's own design standards or limitations.
   • Section with Call to Action
   • Dynamic List (News, Calendar, Blog)
   • Cards
   • ..and more

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.
• Do not link from one Landing page to another more than once. A landing page may contain a link to another landing page in the same web area, but that 2nd landing page must not contain a link to a third landing page in the same web area. Users tend to lose an understanding of where they are in the greater context of the site when they go more than 2 levels deep in a single web area with the benefit of the sidebar menu.
• 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.

---

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: 03/13/2024
Web Council review by:  03/13/2027 (or earlier if deemed necessary by the Web Council)