Cover Block

The use of a Cover Block can introduce accessibility issues to your website. We highly discourage the use of a Cover Block unless it is absolutely necessary, and the content cannot be conveyed using another block.  

Please reach out to Web Services if you have a content need and feel that the Cover Block is the best solution.  This includes incorporating colors related to a campaign or social movement, and other needs.

Cover Block Guidance

The following are recommendations to follow when deciding if and where a Cover Block is needed:

  1. Before choosing a Cover Block, please review our other blocks and consider if it would be more appropriate to use another block. 
  2. The use of an image can cause color contrast issues; If the use of an image is needed with a cover block, the following are considerations to keep in mind:
    1. Please choose an image that is not brightly lit. This can improve the contrast with the foreground text. 
      1. Example of a brightly lit image
      2. Example of not as brightly lit image
  3. The foreground text is the most important element of the cover block, the image is there to support the foreground text’s meaning. 
  4. Select an image that is less busy overall.
  5. Be sensitive to the COVID-19 environment—such as social distancing and the use of personal protective equipment in public spaces.
  6. When using an image as a background with a foreground text: 
    1. Use the default white color as your foreground text color. 
    2. For the background image, the black scrim/overlay is the default. Any changes will not work.
  7. For COVID-19 Updates or announcements, we recommenced a Callout or Media and Text Block: a Cover Block is rarely necessary.