Alerts

Alerts provide contextual information about system status that persists until dismissed or resolved.

Specifications

  • Container (Height: 56px; Radius: 2px; background-color: white; 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) required
  • Alert text (Font: Open Sans Bold 14px) required
  • Leading Non-Interactive Icon/ Charm (16x16px) optional
  • Button (text only, right aligned) or trailing close icon (16px16px) optional
  • Link (underlined, only one per alert) optional

Alerts

  • Appear on top of the main content container.
  • Stretch horizontally to fill 100% of the container they are placed in.
    • Always follow typography line length guidelines when displaying alerts. Pair with another component, like a Form, or place in a fixed-width container to ensure alerts don’t get too wide.
  • Push other content down to make room for an alert on a page.
  • Can include tint to add extra emphasis or to increase contrast with page content. When changing background color, make sure the text and icons pass contrast ratio requirements.
  • Do not have a shadow.
  • Remain on the page until dismissed.

Basic Alerts

Behaviors

  • When applicable, dismiss by clicking the close icon.
  • When dismissed or resolved, alerts slide up and fade out, relinquishing their space.

Editorial

  • Keep titles three to five words if possible.
  • For titles, use title case and capitalize prepositions of four letters or more.
  • Messages should tell the user what’s happening and whether they need to act to successfully keep moving through a task. Warning alerts might tell a user what could happen if they don’t address what they’re being warned about.
  • For messages, use full sentences with punctuation. Use sentence case.
  • Unordered lists offer a structured format to present:
    • Items needing resolution
    • Guidelines to successful completion
    • Ways to resolve problems