Skip to main content

Toast

To notify users and communicate, you need something look-alike toasts that come on top of each other and will get hidden after an amount of time.
In this page, the toast mockup is presented, but appending the functionality is up to you.

index.html
<div class="toast-wrapper right bottom">
  <div class="toast">
    <svg class="toast-svg">...</svg>
    Lorem ipsum dolor sit amet
    <button type="button" class="close-button" aria-label="Close"></button>
  </div>
</div>

Positions

You can change toasts wrapper element position by adding x-axis classes: left, center and right and y-axis classes: top and bottom.

index.html
<div class="toast-wrapper right bottom">...</div>
<div class="toast-wrapper center bottom">...</div>
<div class="toast-wrapper left top">...</div>

Sizes

To change the toast size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html
<div class="toast size-xs">...</div>
<div class="toast size-lg">...</div>
<div class="toast size-2x">...</div>

Colors

There are helper classes for styling elements, first read about color setter classes, you can add classes to the wrapper element or each item separately.

index.html
<div class="toast style-orange-light">...</div>
<div class="toast style-red-light">...</div>
<div class="toast style-green-light">...</div>

Customization

Use CSS variables for customization, they can be set as :root for all toasts default style or just for a specific selector.

--flatify__toast-txt-color
--flatify__toast-bg-color
--flatify__toast-border-color
--flatify__toast-inner-space
--flatify__toast-animation-show
--flatify__toast-animation-hide