Installation
Coming soon..
Examples
<div class="co-alert co-alert--info" role="alert" aria-live="polite" id="info-alert">
<header class="co-alert__header">
<div class="co-alert__heading">
<i class="co-icon-24__information co-text-feedback-information" aria-label="information"
role="img"></i>
<h2 class="co-alert__title">Alert Title</h2>
</div>
<span class="co-icon-button--right">
<button class="co-icon-button co-icon-button--primary co-icon-button--small" onclick="onAlertClose()" aria-label="Close" type="button">
<i class="co-icon-16__close"></i>
</button>
</span>
</header>
<p class="co-alert__body">
Write a concise summary that will assist the user with their journey.
</p>
<footer class="co-alert__footer">
<div class="co-button-group-pair">
<button class="co-button co-button--padding co-button--primary" type="button">
Primary
</button>
<button type="button" class="co-button co-button--secondary co-button--padding co-button--padding">
Secondary
</button>
</div>
</footer>
</div>
Alert
<div class="co-alert-slim co-alert-slim--info" role="alert" aria-describedby="content">
<i class="co-icon-24__information co-text-feedback-information" aria-label="information" role="img"></i>
<span aria-live="polite" id="content" class="co-alert-slim__content">
A concise summary here
</span>
</div>
Alert slim
let infoAlert = document.getElementById("info-alert");
function onAlertClose() {
if (infoAlert) {
infoAlert.style.display = "none";
}
}
Use above snippet to close the alert
Class list
|
Class name |
Description |
|---|---|
|
co-alert--info co-alert--success co-alert--danger co-alert--warning |
Add any of these modifier classes to view the various alert variants. |
|
co-alert-slim--info co-alert-slim--success co-alert-slim--danger co-alert-slim--warning |
Add any of these modifier classes to view the various alert slim variants. |
|
co-icon-button--right |
Aligns the close action icon to the complete right. |
Accessibility
|
Attribute name |
Description |
|---|---|
|
role="alert" |
Using this attribute, screen readers announce the content immediately without moving the focus to the alert message. |
|
aria-live="polite" |
This attribute will inform users about dynamic content changes or important updates on a web page. |
|
aria-label |
This attribute will reads out the name of the icon. |
|
aria-describedby |
This attribute will reads out the alert slim content. |