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
