1. Home
  2. Alerts
Here is the example of 'Toggle alert'.
Here is the example of 'Fade alert'.

Alert Sizes

.alert .alert-micro

Claritas est etiam processus dynamicus and chive on.

.alert .alert-sm

Claritas est etiam processus dynamicus and chive on.

.alert - Default

Claritas est etiam processus dynamicus and chive on.

Alert Toggles

.alert .alert-micro

Alert Icon

Just add icon code before the text.

Claritas est etiam processus dynamicus and chive on.

Alert Gradient

Default - .alert

Claritas est etiam processus dynamicus and chive on.

.alert .alert-gradient

Claritas est etiam processus dynamicus and chive on.

Color Variations

.alert .alert-primary .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-info .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-success .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-warning .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-alert .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-danger .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-system .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-dark .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

.alert .alert-default .pastel .light .dark

Pastel Shade. Use class .pastel
Light Shade. Use class .light
Default Color.
Dark Shade. Use class .dark

Block Style Alerts

General Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Success Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Information Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Error Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Block Style Important Notification

Important Notification

General Message

Consectetur adipisicing elit, sed do eiusmod tempor.

Important Notification

Success Message

Lorem ipsum dolor sit amet, consectetur adipisicing

Important Notification

Information Message

Consectetur adipisicing elit, sed do eiusmod tempor.

Important Notification

Error Message

Lorem ipsum dolor sit amet, consectetur adipisicing