Skip to main content

Alerts

Alerts are a great way to communicate with users, to show errors warnings, tips, and much more ideas an alert can be helpful.
Alerts can be dismissable so if users do not want to see them again they can close it.

A simple alert

Any HTML tag can be alert with the .alert class, however, a <div> with paragraphs in it is the most common choice.

index.html
<div class="alert">...</div>

Colors

Like any other component, alerts can have different colors by adding color setter classes.

Light theme

Alerts can have the light theme to gain less attention since you can set color setter helper class with -light suffix, e.g. style-danger-light.

index.html
<div class="alert style-info">...</div>

<div class="alert style-info-light">...</div>

<div class="alert style-success">...</div>

<div class="alert style-success-light">...</div>

<div class="alert style-danger">...</div>

<div class="alert style-danger-light">...</div>

<div class="alert style-purple">...</div>

<div class="alert style-purple-light">...</div>

Dismissable

Alerts might be dismissable in this case implementation of this feature is so simple, first, you need to make sure you are using the flatify JS file on your web page, then add a button insidealert with the .close-button class, nothing more. Now your alert can be closed by users!

Floating close button

You can add the .floating class to the .close-button for having a floating button, it means that the button is hidden by default, does not get the space of alert and it just shows up when the user hovers/focuses alert.

index.html
<div class="alert" role="alert">
  <button class="close-button" aria-label="Close"></button>

  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  </p>
</div>

<div class="alert" role="alert">
  <button class="close-button floating" aria-label="Close"></button>

  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  </p>
</div>

With icon

It is possible to have an SVG as an icon for alert just add .has-icon to the alert and put SVG inside a div with .alert-svg class before message.

index.html
<div class="alert has-icon" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"><path d="M0 22.815H10.937V34.223H0z"></path><path d="M0 66.719H10.937V78.12599999999999H0z"></path><pathd="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"></path></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>

<div class="alert style-success has-icon" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><pathd="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z"></path></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>

<div class="alert style-info has-icon" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><pathd="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z"></path><pathd="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z"></path></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>

<div class="alert style-warning has-icon" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><pathd="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z"/></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>

<div class="alert style-danger has-icon" role="alert">
    <div class="alert-svg"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><pathd="M79.001 49.667c-2.002-7-5.336-15-10-22.333-1-1.667-3.002-2-4.668-1.001-.013.007-.021.017-.032.023-.812.41-1.458 1.096-1.635 1.977-.438 2.188-1.456 4.23-2.76 6.131-4.176-6.131-6.573-13.509-6.573-21.131 0-2-1.334-3.333-3.333-3.333-7.334 0-16.667 14.333-18.667 17.334C28 32.666 20 46.667 20 60c0 16.667 13.333 30 30 30s30-13.333 30-30c0-3.001-.332-6.667-.999-10.333zM40 73.333c0-5.854 4.278-13.119 7.49-17.127.908 3.358 2.549 6.54 4.844 9.461.667.668 1.667 1 2.666 1 .667 0 1.667-.332 1.999-1 .28-.233.544-.481.798-.741.684 1.52 1.223 3.001 1.536 4.407.335 1.666.667 3.001.667 4 0 5.668-4.333 10-10 10s-10-4.332-10-10zm26.33 3.411c.221-1.1.337-2.239.337-3.411 0-1.998-.332-3.665-.668-5.667-.999-3.665-2.998-7.998-5.332-11.667-.999-1.666-3.001-1.998-4.668-.999a3.124 3.124 0 00-1.358 1.628A17.443 17.443 0 0153.333 50c0-2-1.334-3.333-3.333-3.333-.208 0-.421.02-.637.054-.099.016-.19.041-.285.063-6.363 1.418-15.745 16.702-15.745 26.549 0 1.172.117 2.312.337 3.411-4.331-4.223-7.003-10.137-7.003-16.744 0-15.797 13.367-35.409 20.305-41.472.999 8.702 4.51 16.787 10.362 23.472.667.666 1.667 1 2.666 1 .667 0 1.667-.333 1.999-.666.065-.066.119-.142.181-.211.051-.043.107-.076.154-.122a32.995 32.995 0 004.111-5.68c2.688 5.102 4.656 10.331 5.889 15.012.667 3.335.999 6.001.999 8.667 0 6.607-2.672 12.521-7.003 16.744z"></path></svg></div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>

Customization

Each alert has these CSS variables for customization, they can be set as :root for all alerts default style or just for a specific selector.

--flatify__alert-bg-color
--flatify__alert-txt-color
--flatify__alert-border-color
--flatify__alert-animation-hide to have a custom animation when alert is removed

index.html
<div class="alert has-icon my-alert" role="alert">
    <div class="alert-svg">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"><path d="M0 22.815H10.937V34.223H0z"></path><path d="M0 66.719H10.937V78.12599999999999H0z"></path><pathd="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"></path></svg>
    </div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    <button class="close-button floating" aria-label="Close"></button>
</div>
Alert remove animation custom duration

To change alert remove animation duration you need to change $ALERT_REMOVE_ANIMATION in _config.scss or --flatify__alert-remove-animation CSS variable. JavaScript automatically will remove alert when animation is finished.

style.css
/* Define the custom animation */
@keyframes my-custom-animation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) rotate(0.5turn);
  }
}

.my-alert {
  --flatify__alert-bg-color: #a0cecb;
  --flatify__alert-txt-color: #434a54;
  --flatify__alert-border-color: #a0cecb;
  --flatify__alert-animation-hide: my-custom-animation 0.4s ease;
}