Alerts

Use a brightly colored container for noticeable user feedback.

kolache/core/alerts

@import "kolache/core/alerts" as .alert;
This is an alert. Links match the look, too.
<div class="alert">
  This is an alert. <a href="#">Links match the look</a>, too.
</div>

Variables:

  • $color - Text color. Defaults to a 30% darker version of $color-primary
  • $bg-color - Background color. Defaults to a much lighter shade of $color
  • $link-color - Color for any links in the alert. Defaults to a 15% darker shade of $color
  • $margin - Defaults to $default-margin on the bottom margin
  • $padding-offset-large
  • $border-radius

Color variant

@import "kolache/core/alerts:color" as .alert--danger {
  $color: $brand-danger;
};
This is an alert. Links match the look, too.
<div class="alert alert--danger">
  This is an alert. <a href="#">Links match the look</a>, too.
</div>

Variables:

  • $color - Required Text color. Defaults to a 30% darker version of $color-primary
  • $bg-color - Background color. Defaults to a much lighter shade of $color
  • $link-color - Color for any links in the alert. Defaults to a 15% darker shade of $color
  • $border-color - Defaults to $color