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