Notice

A component for highlighting messages to the user.

npm version

Source Code

npm install @vrembem/notice
@use "@vrembem/notice";

notice

The most basic implementation of the notice component consists of the notice container element wrapping text content.

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

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

notice__title

Add a title to your notice using the notice__title element.

Notice title

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

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

notice + media

For cases where a notice message should be displayed alongside an icon or image, try combining it with the media component.

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 media_gap_sm">
    <div class="media__obj">
      ...
    </div>
    <div class="media__body">
      ...
    </div>
  </div>
</div>

notice + icon-action

When a notice needs to be dismissible, try adding the icon-action component along with some flex utilities.

Hello, world!

Lorem ipsum dolor sit amet, consectetur adip iscing elit. Vivamus libero est, fermen.

<div class="notice">
  <div class="flex flex-justify-between">
    <p>...</p>
    <button class="icon-action">
      <svg class="icon" role="img">...</svg>
    </button>
  </div>
</div>

Dismissible JavaScript behavior is not provided.

notice_state_[value]

Adds styles for changing the look and feel of a notice to better reflect the urgency or status.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est.

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

Sass Variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$gap 0.5em The default gap spacing for the notice component.
$padding 1em Sets the padding property of the notice.
$border null Sets the border property of the notice.
$border-radius core.$border-radius Sets the border-radius property of the notice.
$background core.$shade Sets the background property of the notice.
$box-shadow null Sets the box-shadow property of the notice.
$title-font-size core.$font-size-lg Sets the font-size property of the notice__title element.
$title-line-height core.$line-height-lg Sets the line-height property of the notice__title element.
$title-font-weight core.$font-weight-semi-bold Sets the font-weight property of the notice__title element.