Notice

A component for highlighting messages to the user.

npm version

npm install @vrembem/notice
@import "@vrembem/notice/index";

notice

Notice content goes here...

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

notice + media

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="notice">
  <div class="media">
    <div class="media__icon">
      ...
    </div>
    <div class="media__body">
      ...
    </div>
  </div>
</div>

notice__actions

Notice content goes here...

Did you mean to do this action?

<div class="notice">
  <div class="notice__body">
    ...
  </div>
  <div class="notice__actions">
    ...
  </div>
</div>

notice__title

Oops, wait what?

You should know that the action you just did had some consequences.

<div class="notice flex_align_start">
  <div class="notice__body">
    <h2 class="notice__title">...</h2>
    <p>...</p>
  </div>
  <div class="notice__actions">
    ...
  </div>
</div>

notice_stack

Oops, wait what?

You should know that the action you just did had some consequences.

<div class="notice notice_stack" data-dismissible>
  <div class="notice__body spacing_sm">
    <h2 class="notice__title">...</h2>
    <p>...</p>
  </div>
  <div class="notice__actions">
    ...
  </div>
</div>

notice_color_[key]

Notice content goes here...

Notice content goes here...

Notice content goes here...

<div class="notice notice_state_primary">...</div>
<div class="notice notice_state_secondary">...</div>
<div class="notice notice_state_dark">...</div>

notice_state_[key]

Notice content goes here...

Notice content goes here...

Notice content goes here...

Notice content goes here...

<div class="notice notice_state_info">...</div>
<div class="notice notice_state_success">...</div>
<div class="notice notice_state_caution">...</div>
<div class="notice notice_state_danger">...</div>

notice_state_[key]-bold

Notice content goes here...

Notice content goes here...

Notice content goes here...

Notice content goes here...

<div class="notice notice_state_info-bold">...</div>
<div class="notice notice_state_success-bold">...</div>
<div class="notice notice_state_caution-bold">...</div>
<div class="notice notice_state_danger-bold">...</div>

Examples

This site uses cookies

By using this site you agree with our use of cookies. Read more about our cookie policy →

<div class="notice notice_stack notice_color_dark elevate_16dp" data-dismissible>
  <div class="notice__body margin_bottom_lg spacing_sm">
    <h2 class="notice__title flex">
      <span class="flex_grow_1">...</span>
      <button class="icon-action icon-action_invert icon-action_color_subtle" data-dismiss>
        ...
      </button>
    </h2>
    <p>...</p>
  </div>
  <div class="notice__body">
    <div class="button-group button-group_full button-group_wrap">
      <button class="button button_invert">
        ...
      </button>
      <button class="button button_invert">
        ...
      </button>
    </div>
  </div>
</div>