Components

Notification

sketch:Readyscss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
Usage
Code
Accessibility
Specs
Design

Import

@import 'settings-tools/_all-settings';
@import 'components/_c.notification';

Basic usage

Wrap a title (it may be any level of heading: h1, h2, h3 and so on, depending on the context or SEO requirements), p and a a or button tags in a div and apply the mc-notification class:

<div class="mc-notification">
  <div class="mc-notification__content">
    <h3 class="mc-notification__title">Information notification</h3>
    <p class="mc-notification__message">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa.
    </p>
    <a class="mc-notification__link mc-link" href="#">Link</a>
  </div>
</div>
Viewport: px 
<div class="example">
  <div class="mc-notification">
    <div class="mc-notification__content">
      <h3 class="mc-notification__title">Information notification</h3>
      <p class="mc-notification__message">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
        ligula eget dolor. Aenean massa.
      </p>
      <a class="mc-notification__link mc-link" href="#">Link</a>
    </div>
  </div>
</div>

Types

Depending on the context of use, you can use different types of notifications.

Mozaic provides you with 4 types of notifications, which you can use with the following css modifiers:

  • information (default): mc-notification--information
  • success: mc-notification--success
  • warning: mc-notification--warning
  • danger: mc-notification--danger

The modifier is to be applied on the element having the mc-notification class

Viewport: px 
<div class="example">
  <div class="example__mc-notification">
    <div class="mc-notification">
      <div class="mc-notification__content">
        <h3 class="mc-notification__title">Information notification</h3>
        <p class="mc-notification__message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa.
        </p>
        <a class="mc-notification__link  mc-link" href="#">Link</a>
      </div>
    </div>
  </div>
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--success">
      <div class="mc-notification__content">
        <h3 class="mc-notification__title">Success notification</h3>
        <p class="mc-notification__message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa.
        </p>
        <a class="mc-notification__link  mc-link" href="#">Link</a>
      </div>
    </div>
  </div>
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--warning">
      <div class="mc-notification__content">
        <h3 class="mc-notification__title">Warning notification</h3>
        <p class="mc-notification__message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa.
        </p>
        <a class="mc-notification__link  mc-link" href="#">Link</a>
      </div>
    </div>
  </div>
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--danger">
      <div class="mc-notification__content">
        <h3 class="mc-notification__title">Danger notification</h3>
        <p class="mc-notification__message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa.
        </p>
        <a class="mc-notification__link  mc-link" href="#">Link</a>
      </div>
    </div>
  </div>
</div>

Variations

Sizes

Mozaic offers you two sizes of notifications that you can use, by applying the following modifiers on the mc-notification element :

  • Size S: use the mc-notification--s modifier
  • Size M: default size - no modifier needeed
Viewport: px 
<div class="example">
  <div class="example__title">
    Size M (default)
  </div>


  <div class="mc-notification">
    <div class="mc-notification__content">
      <h3 class="mc-notification__title">Information notification</h3>
      <p class="mc-notification__message">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
        ligula eget dolor. Aenean massa.
      </p>
      <a class="mc-notification__link mc-link" href="#">Link</a>
    </div>
  </div>


  <div class="example__title">
    Size S
  </div>


  <div class="mc-notification mc-notification--warning mc-notification--s">
    <div class="mc-notification__content">
      <h3 class="mc-notification__title">Information notification</h3>
      <p class="mc-notification__message">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
        ligula eget dolor. Aenean massa.
      </p>
      <a class="mc-notification__link mc-link" href="#">Link</a>
    </div>
  </div>
</div>

Closable

Using mc-notification-closable class you have a closable notification:

Viewport: px 
<div class="example">
  <div class="mc-notification mc-notification-closable">
    <div class="mc-notification__content">
      <h3 class="mc-notification__title">Information notification</h3>
      <p class="mc-notification__message">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
      </p>
      <a class="mc-notification__link mc-link" href="#">Link</a>
    </div>
    <button type="button" class="mc-notification-closable__close" title="Close"></button>
  </div>
</div>