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

@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