Notice

A component for highlighting messages to the user.

.notice

Notice content goes here...
<div class="notice">
  ...
</div>
<a href="#" class="notice notice_link">
  ...
</a>

.notice__close

Close Notice content goes here...
Notice content goes here...
<div class="notice" data-dismissible>
  <span class="notice__close" data-dismiss>
    <a href="#" class="link">Close</a>
  </span>
  ...
</div>

<div class="notice" data-dismissible>
  <button class="notice__close icon-action" data-dismiss>
    <svg role="img" class="icon">
      <use xlink:href="#x"></use>
    </svg>
  </button>
  ...
</div>

.notice_type_[name]

Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
Notice content goes here...
<div class="notice notice_type_info">
  ...
</div>

<div class="notice notice_type_success">
  ...
</div>

<div class="notice notice_type_caution">
  ...
</div>

<div class="notice notice_type_danger">
  ...
</div>

.notice_type_[name] > [content]

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed semper dui. Donec malesuada, augue sit amet auctor elementum, est sem consectetur nisi, ac pretium massa sapien eu quam.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed semper dui. Donec malesuada, augue sit amet auctor elementum, est sem consectetur nisi, ac pretium massa sapien eu quam.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed semper dui. Donec malesuada, augue sit amet auctor elementum, est sem consectetur nisi, ac pretium massa sapien eu quam.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed semper dui. Donec malesuada, augue sit amet auctor elementum, est sem consectetur nisi, ac pretium massa sapien eu quam.

<div class="notice notice_type_info" data-dismissible>
  <span class="notice__close" data-dismiss>
    ...
  </span>
    ...
</div>

<div class="notice notice_type_success" data-dismissible>
  <span class="notice__close" data-dismiss>
    ...
  </span>
    ...
</div>

<div class="notice notice_type_caution" data-dismissible>
  <span class="notice__close" data-dismiss>
    ...
  </span>
    ...
</div>

<div class="notice notice_type_danger" data-dismissible>
  <span class="notice__close" data-dismiss>
    ...
  </span>
    ...
</div>