Flashmessage component

The .flashmessage element is simply a container with a background and some padding.

Example

njk

{% for color in ['success', 'warning', 'alert', 'info'] %}
   <div class="flashmessage {{ color }}">
      <div class="container">Flashmessage content</div>
      <button class="close-button" type="button" data-close>
         <i class="icon icon-close-fill" aria-hidden="true"></i>
      </button>
   </div>
   <br/>
{% endfor %}

html compiled

<div class="flashmessage success">
  <div class="container">Flashmessage content</div>
  <button class="close-button" type="button" data-close> <i class="icon icon-close-fill" aria-hidden="true"></i>

  </button>
</div>
<br/>
<div class="flashmessage warning">
  <div class="container">Flashmessage content</div>
  <button class="close-button" type="button" data-close> <i class="icon icon-close-fill" aria-hidden="true"></i>

  </button>
</div>
<br/>
<div class="flashmessage alert">
  <div class="container">Flashmessage content</div>
  <button class="close-button" type="button" data-close> <i class="icon icon-close-fill" aria-hidden="true"></i>

  </button>
</div>
<br/>
<div class="flashmessage info">
  <div class="container">Flashmessage content</div>
  <button class="close-button" type="button" data-close> <i class="icon icon-close-fill" aria-hidden="true"></i>

  </button>
</div>
<br/>

Variables

$flashmessage-palette (Map)

scss

$flashmessage-palette: (
  success: color(success),
  warning: color(warning),
  alert: color(alert),
  info: color(info),
) !default;

Coloring classes. A map of classes to output in your CSS, like .info, .success, .alert, .warning, and so on.

$flashmessage-background (Color)

scss

$flashmessage-background: color(dark-gray) !default;

Background color of flashmessage.

$flashmessage-padding (Number)

scss

$flashmessage-padding: $global-padding !default;

Padding top/bottom of flashmessage.

$flashmessage-font-size (Number)

scss

$flashmessage-font-size: 15px !default;

Font size of flashmessage.