Mozaic

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>
    <div class="mc-notification__footer">
      <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
    </div>
  </div>
</div>

Use with link

You can add a link to your Notification component.

In order to keep the display of the component harmonious, please note that the link added to the Notification component must be a .mc-link in size M in mobile, but in size S in desktop (from the L breackpoint).

Note that any other use than a mc-link in size S, does not respect the Design System guidelines.

Use with buttons

You can also use the Notification component with one or two buttons.

In order to keep the component displaying harmonious, please note that the buttons added to the Notification component should be .mc-button in size M in mobile, but in size S in desktop (from the L breackpoint).

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">
  <!-- Notification type Information -->
  <div class="example__mc-notification">
    <div class="mc-notification" role="status">
      <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>
        <div class="mc-notification__footer">
          <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Notification type Success -->
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--success" role="status">
      <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>
        <div class="mc-notification__footer">
          <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Notification type Warning -->
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--warning" role="status">
      <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>
        <div class="mc-notification__footer">
          <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Notification type Danger -->
  <div class="example__mc-notification">
    <div class="mc-notification mc-notification--danger" role="alert">
      <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>
        <div class="mc-notification__footer">
          <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
        </div>
      </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>

  <!-- Notification type Danger -->
  <div class="mc-notification" role="status">
    <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>
      <div class="mc-notification__footer">
        <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
      </div>
    </div>
  </div>

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

  <!-- Notification type Danger -->
  <div class="mc-notification mc-notification--warning mc-notification--s" role="status">
    <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>
      <div class="mc-notification__footer">
        <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
      </div>
    </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" role="status">
    <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>
      <div class="mc-notification__footer">
        <a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
      </div>
    </div>
    <button
      type="button"
      class="mc-notification-closable__close"
      title="Close"
    ></button>
  </div>
</div>