Component
Alert
A status block. The icon sits on the first line, and the heading and body sit beside it.
Classes
| Class | Type | |
|---|---|---|
| alert | Component | The block. Regular text is 16px. |
| alert-sm | Size | 14px text. |
| alert-lg | Size | 20px text. |
| primary | Color | Indigo by default. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. Used when you set no color. |
| info | Color | Sky by default. |
With an icon
The icon is the first element, and it is an svg. The text is the next element. The icon centers on the first line.
Check the date
This offer ends tonight.
<div class="alert warning">
<svg aria-hidden="true"><!-- info --></svg>
<div>
<p class="font-semibold">Check the date</p>
<p>This offer ends tonight.</p>
</div>
</div>Colors
Primary
A light surface with dark text.
Secondary
A light surface with dark text.
Tertiary
A light surface with dark text.
Neutral
A light surface with dark text.
Success
A light surface with dark text.
Error
A light surface with dark text.
Warning
A light surface with dark text.
Info
A light surface with dark text.
<div class="alert primary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Primary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert secondary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Secondary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert tertiary">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Tertiary</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert neutral">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Neutral</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert success">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Success</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert error">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Error</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert warning">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Warning</p>
<p>A light surface with dark text.</p>
</div>
</div>
<div class="alert info">
<svg aria-hidden="true"></svg>
<div>
<p class="font-semibold">Info</p>
<p>A light surface with dark text.</p>
</div>
</div>Sizes
Each size sets the type as well as the padding: 14px, 16px, and 20px.
Small
14px type.
Regular
16px type.
Large
20px type.
<div class="alert alert-sm">...</div>
<div class="alert">...</div>
<div class="alert alert-lg">...</div>No color class means warning.