Alerts are brief, static messages that appear after an action has been performed, either asynchronously to alert the user immediately or following a page refresh.
Default alert
Create an alert by adding .hc-alert to any element. Its immediate child should be an icon followed by a container element with class .hc-alert-content. Place a title as an h6.hc-alert-title and a message as a p.hc-alert-title, or both in here.
The title and message placement are handled automatically. If both are short enough, they will sit horizontally next to each other; if one is too long for the container, they will wrap and stack vertically instead.
Width handling is up to you
Note that the alert will fill the width of whatever outer container it sits within. You can control the width directly on the alert yourself or with any utility class available (like .w-48), or by setting the width on any wrapping element.
Semantic alert
Semantic options for info, success, warning, and danger are also available. Append the class .hc-alert--info, etc., to the top level .hc-alert element.
Swap out the icons for these using the examples below.
Close button
Add a close button to the right of the alert by adding an element with class .hc-alert-close immediately after the .hc-alert-content element. This element can be anything, but we recommend it be a button for accessibility.
Other options
Force vertical stacking by appending the class .hc-alert--vertical to the parent .hc-alert element.
Only a title or a message are required. You can omit one of them and the alert will handle this automatically.