Page Alerts

Page alerts provide a method for content owners to draw attention to critical or important information.

Design

Page alerts will display at the top of the page content area with a light-colored background and a dark-colored top accent border to help draw attention to them.

The alerts use specific color themes and icons to help convey the nature and level of priority for a message.

How to Use

  • Use page alerts only when truly necessary. If an alert appears too frequently on a site, users will become accustomed to seeing it and ignore it.
  • Include a succinct, direct title, ideally fewer than 10 words.
  • Keep the description content brief, no more than one or two sentences.
  • Link to another page for more detailed information; use the alert title as the link.

Alert Types

The CDC template provides five alert types, each with its own color theme.

Critical Alert

The critical alert is a high priority alert. It uses a red theme, a color commonly associated with danger and warnings.

Use the critical alert when you have an urgent and critical message.

Warning Alert


The warning alert is also a high priority alert, but this amber-themed alert conveys less urgency than the red-themed critical alert.

Use the warning alert when you have a critical message that has a less urgent impact.

Information Alert

The information alert is a medium priority alert. It uses a blue theme, a color that is neutral in meaning.

Use the info alert for messages that are important but carry no risks or urgency.

Success Alert

The success alert is also a medium priority alert. It uses a green theme, a color associated with positive results and the ability to proceed.

Use the success alert for messages that are important but carry no risks or urgency, and especially for messages with positive information.

Archive Alert

The archive alert will appear on web pages that have been flagged as archived content.

The gray archive alert is reserved solely for pages that are no longer being updated.

Specifications

Elements Common to All Alert Types

  • Location on Page:at the top of the content area, above all other content elements
  • Card Type: horizontal card, 100% width, height determined by content
  • Card Elements: icon, title, description (see specs for container text elements)
  • Container Padding:standard p-3 (17px)
  • Container Background: bg-tertiary (color theme will vary by alert type)
  • Border Accent: bt-5 (top border, 5px), bt-primary (see border specs)
  • Icon Color: fill-primary
  • Icon Size: medium = 36px
  • Icon Layout: left-aligned, top aligned to content, right margin of mr-3, content is left-aligned and does not wrap under the icon

Elements That Vary by Alert Type

  • Warning Alert
    • theme-amber
    • Icon: alert_06 (round warning icon)
  • Info Alert
    • theme-blue
    • Icon: alert_01 (info icon)
  • Success Alert
    • theme-green
    • Icon: alert_01 (info icon)
  • Archive Alert
    • No theme, tertiary=gray-light, primary=gray-dark
    • Icon: alert_06 (round warning icon)

Alerts - Global

Template Package 4.x framework includes styles for Global Alerts that appear at the very top of the page and are used to provide important site-wide messages.

Critical Alert

Critical Alert Specification

Warning Alert

Warning Alert Specification

Information Alert

Information Alert Specification

Success Alert

Information Alert Specification

All Alert Type Specifications

  • Background Padding: padding is p-3 (17px)
  • Background Color: tertiary (color theme will vary by Alert type)
  • Accent Border: bt-5 in primary (color theme will vary by Alert type)
  • Title (optional): .h4 and bottom margin of mb-2, can be set as a link for any Alert Type, set to link-blue, no underline by default, underline on Hover (same as Card Titles) if set as a link
  • Text: Normal #000
  • Separator Lines (optional): see Separator Lines
  • Links (optional): see Links
  • Close (optional): option for Warning, Information, and Success Alert Types (should not be used for Critical Alert Type), close_circle, 24px, background is #000 op-75 and op-100 on hover
View Page In: PDF [150k] DOC [150k]
Page last reviewed: