Block Messages

A Block Message is used to provide timely information to a user. This component provides feedback for successful interactions, errors, important information and warnings.

Usage

{% set options = {
  "block-message": {
    "class": "miz-block-message--info",
    "title": "Block message with icon",
    "datetime": "Aug. 13, 2019 | 12:14 p.m.",
    "text": "This block message shows what using icons can do for you!",
    "attributes": {
    "id": 'test-id'
    }
  },
  "icon": {
    "name": "info",
    "class": "miz-text--blue"
  }
} %}

{% include '@miz/components/block-messages/block-messages.twig' with options only %}

The above code will output:

<!-- Block Message output -->
<div class="miz-block-message miz-block-message--info" id="test-id">
  <div class="miz-block-message__header">
    <h2 class="miz-block-message__title miz-block-message__title--icon"><i class="miz-icon material-icons miz-block-message__icon miz-text--blue">info</i>Block message with icon</h2>
    <time class="miz-block-message__pubdate">Aug. 13, 2019 | 12:14 p.m.</time>
  </div>

  <div class="miz-block-message__content">
    <p class="miz-block-message__text">This block message shows what using icons can do for you!</p>
  </div>
</div>

See the View tab for each block message variation to see an example of how it is being used.

Options reference

Block Message

The Block Message is used by including it with an object made of a block-message object and an optional icon object. See the Icon component for its reference.

block-message

Param Default Values Description
class miz-block-message String Additional classes appended to the block message
attributes null Object Attributes to be applied to the block messsage
title null String The title to be displayed on the block message
datetime null String A date/timestamp for the message
text null String The text to be displayed on the block message
{% set options = {
  "block-message":
  {
    "title": "Default",
    "text": "This is a default block message"
  }
} %}

{% include '@miz/components/block-messages/block-messages.twig' with options only %}
<div class="miz-block-message">
    <div class="miz-block-message__header">

        <h2 class="miz-block-message__title">Default</h2>

    </div>

    <div class="miz-block-message__content">
        <p class="miz-block-message__text">This is a default block message</p>
    </div>

</div>
/* No context defined for this component. */
  • Content:
    /**
     * @component Block Messages
    */
    
    // Base Block message
    .miz-block-message {
      /* stylelint-disable-next-line */
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: relative;
      border: $border-width $border-style $border-color;
      border-radius: 0;
    
      :last-child {
        margin-bottom: 0;
      }
    }
    
    // Block message header
    .miz-block-message__header {
      padding: $miz-space-inset-default;
      /* stylelint-disable-next-line */
      display: flex;
      flex-flow: column nowrap;
      align-items: stretch;
    
      > * {
        flex: 0 1 auto;
        padding-left: #{$miz-space-l * 1.25};
        padding-right: #{$miz-space-l * 1.25};
      }
    
      // Theme variant styling for headers
      @each $key, $val in $theme-colors {
        .miz-block-message--#{$key} > & {
          background-color: scale-color($val, $lightness: 90%);
          color: scale-color($val, $lightness: -30%);
        }
      }
    }
    
    // Block message
    // └─ Title
    .miz-block-message__title {
      margin: $miz-space-stack-default;
      flex: 1 1 auto;
      font-size: $miz-font-size-level-4;
    }
    
    // Block message
    // └─ Title with icon modifier
    .miz-block-message__title--icon {
      text-indent: -#{$miz-space-default * 1.25};
    }
    
    // Block Message
    // └─ Icon
    .miz-block-message__icon {
      display: inline-block;
      vertical-align: -3px;
      margin: $miz-space-inline-left-default;
    }
    
    // Block Message
    // └─ Pubdate
    .miz-block-message__pubdate {
      font-weight: $miz-font-weight-bold;
      display: block;
      margin: $miz-space-stack-xs;
    }
    
    // Block Message
    // └─ Content
    // Provides base padding for content.
    .miz-block-message__content {
      text-align: left;
      flex-grow: 1;
      padding: $miz-space-default #{$miz-space-l * 1.75};
    
      :last-child {
        margin-bottom: 0;
      }
    }
    
    // Block Message
    // └─ Text
    // Currently only makes sure the last item doesn't have a bottom margin.
    .miz-block-message__text {
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    // Alert Messages
    // IMPORTANT. These are reserved for MU Alert usage. DO NOT USE.
    
    // Block Message
    // -> Alert Severe modifier
    .miz-block-message--alert-severe {
      > .miz-block-message__header {
        background-color: $miz-color-alert--severe;
        color: $miz-white;
      }
    }
    
    // Block Message
    // -> Alert Warning modifier
    .miz-block-message--alert-warning {
      > .miz-block-message__header {
        background-color: scale-color($miz-color-alert--warning, $lightness: -30%);
        color: $miz-white;
      }
    }
    
    // Block Message
    // -> Alert Informational modifier
    .miz-block-message--alert-info {
      > .miz-block-message__header {
        background-color: $miz-color-alert--info;
        color: $miz-white;
      }
    }
    
    // Block Message
    // -> Alert All Clear modifier
    .miz-block-message--alert-clear {
      > .miz-block-message__header {
        background-color: $miz-color-alert--clear;
        color: $miz-white;
      }
    }
    
  • URL: /components/raw/miz-block-messages/_block-messages.scss
  • Filesystem Path: fractal/pattern-library/miz/components/block-messages/_block-messages.scss
  • Size: 2.8 KB