Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
  bundles: {
    main: {
      pages: ['**/*.html'],
      components: {
        alert: true
      }
    }
  }
}
Basic Usage
You can build your own using the previewer
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
NameDescription
.alertThe main container
.alert.alert-{variant}Apply alert theming
.alert.alert-compactChange size to smaller
.alert.alert-cozyChange size to larger
.alert.alert-dismissibleTo dismiss the alert, Add a close button element if you going to use it.
.alert > .alert-headingFor using alert title
Customize variables at:/library/extend/components/_alert.scss
Component's defaults:/library/components/alert/_defaults.scss
NameDefault valueNote
$alert-padding-y$spacer
$alert-padding-x$spacer
$alert-margin-bottom1rem
$alert-border-radius8px
$alert-link-font-weight$font-weight-bold
$alert-border-width$border-width
$alert-icon-spacing-density$alert-padding-x
$alert-cozy-padding-y$spacer * 1.125
$alert-cozy-padding-x$spacer * 1.125
$alert-cozy-border-radius8px
$alert-cozy-font-size1rem
$alert-cozy-icon-spacing-density$alert-cozy-padding-x
$alert-compact-padding-y$spacer * 0.625
$alert-compact-padding-x$spacer * 0.625
$alert-compact-border-radius.25rem
$alert-compact-font-size$font-size-base
$alert-compact-icon-spacing-density$alert-compact-padding-x
$alert-bg-scale-80%
$alert-border-scale-70%
$alert-color-scale40%
$alert-dismissible-padding-r$alert-padding-x * 3
$alert-cozy-dismissible-padding-r$alert-cozy-padding-x * 3
$alert-compact-dismissible-padding-r$alert-compact-padding-x * 3

Make sure to read the Customize components and Understanding and using the design system guides.

{title}