Notices

Notices in BaseWeb represent content blocks that give additional contextual information. This could be helpful tips, success, warning or error messages and additional information to a document. The most basic implementation involves a <div> with the .notice class.

<div class="notice">
  <p>...</p>
</div>

This is an example notice.

You can also create dismissible notices but adding the .dismissible class and a .dismiss trigger. This utilizes the global dismissible JavaScript component.

<div class="notice dismissible">
  <button class="dismiss chip">{% include icons/x.svg %}</button>
  <p>...</p>
</div>

Dismissible

Dismissible

Modifiers

Notices include semantic color modifiers that change the urgency of notices to highlight specific contexts as shown below.

.info

Example notice.

.info .inverted

Example notice.

.success

Example notice.

.success .inverted

Example notice.

.warning

Example notice.

.warning .inverted

Example notice.

.danger

Example notice.

.danger .inverted

Example notice.

Variable Map

Notice variables are encompassed within the $notices map and are used throughout all notice mixins to set default values.

$notices: (
  'output' : true,
  'output-modifiers' : true,
  'class' : 'notice',

  'margin' : 2em 0,
  'padding' : 0.25em 1.25em,
  'font-size' : 1em,
  'line-height' : 1.5em,
  'border' : 1px solid rgba($black, 0.15),
  'border-radius' : $border-radius,
  'box-shadow' : 0 1px 3px rgba($black, 0.1),

  'chips' : (
    'float': right,
    'margin': 1em 0 1em 1em,
    'padding': 0.25em,
    'font-size': 1em,
  ),

  'modifiers' : (
    'default' : (
      'color' : $color,
      'background' : $gray-100,
    ),
    'inverted' : (
      'color' : $white,
      'background' : $color,
      'chips' : (
        'key' : 'light',
      ),
    ),
    'info' : (
      'background' : $blue-50,
    ),
    'info.inverted' : (
      'color' : $white,
      'background' : $blue,
    ),
    'success' : (
      'background' : $green-50,
    ),
    'success.inverted' : (
      'color' : $white,
      'background' : $green,
    ),
    'warning' : (
      'background' : $yellow-100,
    ),
    'warning.inverted' : (
      'color' : $color,
      'background' : $yellow,
      'chips' : (
        'key' : 'default',
      ),
    ),
    'danger' : (
      'background' : $red-50,
    ),
    'danger.inverted' : (
      'color' : $white,
      'background' : $red,
    ),
  ),

) !default;

make-notice

Creates the base styles for a notice block.

@include make-notice( $options: () );
Variable Type Default
$options Map $notices

Example Usage

This example shows us using a %base-notice placeholder for the extend method. Other methods include adding make-notice() to a general class which is applied to notice elements directly (which is the method BaseWeb uses for its classes).

%base-notice {
  @include make-notice();
}
.message-success {
  @extend %base-notice;
  ...
}
.alert-error {
  @extend %base-notice;
  ...
}