Clone's documentation uses Cookies and Google Analytics to help us better understand our visitors. By viewing this site, you agree to have this basic information collected and relayed back to us. You can learn more about how Google Analytics provides us with this information here.
Alerts
About Alerts
A description for this component is coming soon! You can check out the code below in the meantime.
A description of how this component is accessible is on its way!
Code Snippet
<!-- Alert -->
<!-- Alerts can have three arguments: information, warning, error. You can also include the toast argument on any of these types to fix the alert to the bottom right of the viewport. e.g. error(toast) -->
<div data-c-alert="error" data-c-radius="rounded" role="alert">
<div data-c-padding="all(.5)">
<!-- This optional close trigger will remove the element from the DOM. You'll need to manually add events if you need it to persist or perform further action. -->
<button data-c-alert-close-trigger data-c-padding="all(.5)">
<!-- This span can be replaced with an <i> icon font element, or an image. -->
<span data-c-font-size="h4" data-c-font-weight="bold">x</span>
</button>
<!-- This title/icon is optional. -->
<!-- This span can be replaced with an <i> icon font element, or an image. -->
<p data-c-margin="bottom(.5)" data-c-font-weight="bold"><span data-c-font-size="h4" data-c-font-weight="bold" data-c-margin="right(.25)">(!)</span>Sample Title
</p>
<!-- Alert Content -->
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe quia maiores in voluptate voluptatibus incidunt ut voluptas inventore earum facere unde veniam perspiciatis illo soluta, doloribus cum illum totam officia.</p>
</div>
</div>
Detailed Information
Types of Alerts
<div data-c-alert="information"></div>
The information argument specifies that the alert will use the information colour palette (chosen by variable). This alert is useful for displaying non-critical information to the user.
<div data-c-alert="warning"></div>
The warning argument specifies that the alert will use the warning colour palette (chosen by variable). This alert is useful for indicating to the user that they should be aware of something specific.
<div data-c-alert="error"></div>
The error argument specifies that the alert will use the error colour palette (chosen by variable). This alert is useful to indicate an interface error to the user.
Other Arguments
<div data-c-alert="TYPE(toast)"></div>
The toast argument changes the way the alert is displayed and fixes it to the bottom right corner of the viewport. This is useful for displaying system information to the user that might relate to interface that is off screen.
Examples
stars Optional Alert Title
This is a sample informative alert. These alerts are used to display non-critical information to the user.
info Optional Alert Title
This is a sample warning alert. These alerts are used to display user interface warnings and system alerts.
This is a sample error alert. These alerts are used to display critical system and form errors.
Changelog
Version 2.4.16
Alert titles now support span elements, images, as well as the original icon font i elements.
Alert close buttons now support span elements, images, as well as the original icon font i elements.
Version 2.4.11
Updates the example code to remove heading attribute and fixed examples.
Version 2.4.8
Changed the title element in alert example code to be a paragraph so that it would respect block level styles.
Version 2.3.12
Changes the markup of alerts to better support floated close buttons.
Updates pieces of accordions, alerts, carousels so that their data attributes are specific instead of values.
Version 2.3.3
Fixes a bug with toast alerts on mobile not displaying correctly.