Alert Bars



  • _alert-bars.scss
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/alert-bars

Module Overview

  • Name: alert-bar
  • Components: null
  • Modifiers: error, help, info, success


This is an alert bar.

Error Bar

This is an error alert bar.

Help Bar

This is a help alert bar.

Info Bar

This is an info alert bar.

Success Bar

This is a success alert bar.


The colors for the alert bars are defined (and hence can be changed from) within the color-palette module.

The alert bars can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
border-radius 0.25em The radius of the alert bar's corners.
border-width 1px The width of the alert bar's border.
padding 0.85em The inner padding of the alert bar.
font-size 0.9em The alert bar's font size.
font-weight lighter The alert bar's font weight.

To change one of the above values, pass your new value(s) to the alert-bars() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include alert-bars((
    'border-radius' : 0,
    'border-width'  : 3px,
    'padding'       : 1em,
    'font-size'     : 1em,
    'font-weight'   : normal

This is a customized alert bar.

This is a customized alert bar.