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
{# Alert Severe #}
{% set severeOptions = {
  "block-message": {
    "title": 'Title',
    "text": 'This is an ALERT Severe block message',
    "class": 'miz-block-message--alert-severe'
  },
  "icon": {
    "name": "warning"
  }
} %}

<div class="miz-container pb-2">
  {% include '@miz/components/block-messages/block-messages.twig' with severeOptions only %}
</div>

{# Alert Warning #}
{% set warningOptions = {
  "block-message": {
    "title": 'Title',
    "text": 'This is an ALERT Warning block message',
    "class": 'miz-block-message--alert-warning',
    "attributes": {
      "id": 'test-id'
    }
  },
  "icon": {
    "name": "warning"
  }
} %}

<div class="miz-container pb-2">
  {% include '@miz/components/block-messages/block-messages.twig' with warningOptions only %}
</div>

{# Alert Informational #}
{% set infoOptions = {
  "block-message": {
    "title": 'Title',
    "text": 'This is an ALERT Informational block message',
    "class": 'miz-block-message--alert-info'
  },
  "icon": {
    "name": "info"
  }
} %}

<div class="miz-container pb-2">
  {% include '@miz/components/block-messages/block-messages.twig' with infoOptions only %}
</div>

{# Alert Clear #}
{% set infoOptions = {
  "block-message": {
    "title": 'Title',
    "text": 'This is an ALERT All Clear block message',
    "class": 'miz-block-message--alert-clear'
  },
  "icon": {
    "name": "info"
  }
} %}

<div class="miz-container pb-2">
  {% include '@miz/components/block-messages/block-messages.twig' with infoOptions only %}
</div>
<div class="miz-container pb-2">

    <div class="miz-block-message miz-block-message--alert-severe">
        <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">warning</i>Title</h2>

        </div>

        <div class="miz-block-message__content">
            <p class="miz-block-message__text">This is an ALERT Severe block message</p>
        </div>

    </div>
</div>

<div class="miz-container pb-2">

    <div class="miz-block-message miz-block-message--alert-warning" 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">warning</i>Title</h2>

        </div>

        <div class="miz-block-message__content">
            <p class="miz-block-message__text">This is an ALERT Warning block message</p>
        </div>

    </div>
</div>

<div class="miz-container pb-2">

    <div class="miz-block-message miz-block-message--alert-info">
        <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">info</i>Title</h2>

        </div>

        <div class="miz-block-message__content">
            <p class="miz-block-message__text">This is an ALERT Informational block message</p>
        </div>

    </div>
</div>

<div class="miz-container pb-2">

    <div class="miz-block-message miz-block-message--alert-clear">
        <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">info</i>Title</h2>

        </div>

        <div class="miz-block-message__content">
            <p class="miz-block-message__text">This is an ALERT All Clear block message</p>
        </div>

    </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