Huesos
Style
Guide

Repositoire

GitHub

Preview

Alert

Alerts are colored boxes set to draw the user’s attention towards specific messages.

You can set a $alert-strategy of split or contrast (see handling color to know the difference) and a $alert-default-color for the default case.

It will use the $state map on $colors to generate a set of helper classes. By default, they are the following:

  • .alert--success - Sets the color to indicate a positive action or message
  • .alert--warning - Sets the color to indicate a warning
  • .alert--error - Sets the color to indicate a negative action or message

Example

<!-- Default -->
<div class="alert mb ">
    <p class="minititle">This is a title</p>
    <p>This is the content of an alert / info card.</p>
</div>


<!-- Success -->
<div class="alert mb alert--success">
    <p class="minititle">This is a title</p>
    <p>This is the content of an alert / info card.</p>
</div>


<!-- Warning -->
<div class="alert mb alert--warning">
    <p class="minititle">This is a title</p>
    <p>This is the content of an alert / info card.</p>
</div>


<!-- Error -->
<div class="alert mb alert--error">
    <p class="minititle">This is a title</p>
    <p>This is the content of an alert / info card.</p>
</div>

Assets

  • Filesystem Path: src/components/elements/alert/_alert.scss
  • Size: 705 Bytes 
  • .alert {
    padding: $gutter;
    border-radius: $border-radius;
    @if $alert-strategy == 'contrast' {
        @include background-contrast($alert-default-color);
    } @else if $alert-strategy == 'split' {
        @include background-split-color($alert-default-color); 
    }

    *:last-child {
        margin-bottom:0;
    }
}

@each $key, $value in map-get($colors, state) {
    .alert--#{$key} {
        @if $alert-strategy == 'contrast' {
            @include background-contrast($value); 
        } @else if $alert-strategy == 'split' {
            @include background-split-color($value); 
        } @else {
            @error "You must provide a valid $alert-strategy value";
        }
    }
}