A digital services project by FlexionAlert
feedbackUSWDS-derived
A colored alert box for informational, warning, success, error, or emergency messages.
Reference: USWDS documentation ↗
Variants
Emergency Alert
Emergency status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="emergency" role="alert">
<h4 class="flex-alert__heading">Emergency status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Error Alert
Error status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="error" role="alert">
<h4 class="flex-alert__heading">Error status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Info Alert
Informative status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="info" role="alert">
<h4 class="flex-alert__heading">Informative status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>No Icon Alert
Informative status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="info" data-no-icon="true" role="alert">
<h4 class="flex-alert__heading">Informative status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Slim Alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="info" data-slim="true" role="alert">
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Success Alert
Success status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="success" role="alert">
<h4 class="flex-alert__heading">Success status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Warning Alert
Warning status
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
<div class="flex-alert" data-variant="warning" role="alert">
<h4 class="flex-alert__heading">Warning status</h4>
<p class="flex-alert__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing</a> elit, sed do eiusmod.</p>
</div>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-alert | .flex-alert | Base alert class |
usa-alert--info | data-variant="info" | Informational alert |
usa-alert--error | data-variant="error" | Error alert |
usa-alert--success | data-variant="success" | Success alert |
usa-alert--warning | data-variant="warning" | Warning alert |
usa-alert--emergency | data-variant="emergency" | Emergency alert (dark background) |
usa-alert--slim | data-slim | Slim variant (no icon) |
usa-alert--no-icon | data-no-icon | No icon variant |
usa-alert__heading | .flex-alert__heading | Alert heading |
usa-alert__text | .flex-alert__text | Alert body text |
usa-alert__body | (none — flatter structure) | We omit the body wrapper; content is direct children |
Verified properties
background-colorborder-left-colorborder-left-widthIntentional differences
padding: ours = varies (icon via ::before), USWDS = varies (icon via background image)
Our alert uses CSS ::before for icons; USWDS uses background images on __body. Padding differs to accommodate.
Behavior promises
- ✓ Icon color matches ink for standard variants
- ✓ Emergency icon is white (inverted for dark background)
- ✓ Emergency has dark background with white text and links
- ✓ Slim variant hides icon
- ✓ No-icon variant hides icon
- ✓ Accessibility audit passes for all variants
Source CSS
Base styles: Alert Icon Base
/* flex-alert — USWDS Alert conformance
Extends: Alert Icon Base (base-classes.css#alert-icon) */
.flex-alert {
position: relative;
background-color: var(--flex-color-info-lighter);
border-inline-start: var(--flex-space-sm) solid var(--flex-color-info);
color: var(--flex-color-text);
/* Padding matches USWDS .usa-alert__body — we don't use a body wrapper */
padding-block: 1rem;
padding-inline: 3.5rem 1.25rem;
&::before {
inset-inline-start: var(--flex-space-md);
inset-block-start: var(--flex-space-md);
inline-size: 1.5rem;
block-size: 1.5rem;
}
&[data-variant="info"]::before,
&:not([data-variant])::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}
&[data-variant="success"]::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}
&[data-variant="warning"]::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
&[data-variant="error"]::before,
&[data-variant="emergency"]::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
/* Variants */
&[data-variant="info"] {
background-color: var(--flex-color-info-lighter);
border-inline-start-color: var(--flex-color-info);
}
&[data-variant="warning"] {
background-color: var(--flex-color-warning-lighter);
border-inline-start-color: var(--flex-color-warning);
}
&[data-variant="success"] {
background-color: var(--flex-color-success-lighter);
border-inline-start-color: var(--flex-color-success);
}
&[data-variant="error"] {
background-color: var(--flex-color-error-lighter);
border-inline-start-color: var(--flex-color-error);
}
/* Emergency: dark background, white text/icon — distinct from error */
&[data-variant="emergency"] {
background-color: var(--flex-color-emergency);
border-inline-start-color: var(--flex-color-emergency);
border-inline-start-width: var(--flex-space-md);
color: var(--flex-color-on-accent);
& .flex-alert__heading,
& .flex-alert__text,
& a {
color: var(--flex-color-on-accent);
}
&::before {
background-color: var(--flex-color-on-accent);
}
}
/* Slim modifier */
&[data-slim] {
padding-block: var(--flex-space-xs);
padding-inline-start: var(--flex-space-md);
border-inline-start-width: var(--flex-space-xs);
&::before {
display: none;
}
}
/* No-icon modifier */
&[data-no-icon] {
padding-inline-start: var(--flex-space-lg);
&::before {
display: none;
}
}
}
/* Internal elements */
.flex-alert__heading {
font-weight: 700;
margin-block-end: var(--flex-space-xs);
font-size: var(--flex-text-uswds);
line-height: 1.5;
}
.flex-alert__text {
font-weight: 400;
margin: 0;
font-size: var(--flex-text-uswds);
line-height: 1.5;
}