@vrembem/notice

Notice

A component for highlighting messages to the user.

Documentation

Installation

npm install @vrembem/notice

Styles

@use "@vrembem/notice";

Markup

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

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

notice__title

Add a title to your notice using the notice__title element.

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

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

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

Dismissible JavaScript behavior is not provided.

Modifiers

notice_state_[value]

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

<div class="notice notice_state_danger">
  <p>An error has occurred!</p>
</div>

Available Variations

• notice_state_info
• notice_state_success
• notice_state_caution
• notice_state_danger

Customization

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 vertical gap spacing for elements inside the notice component.
$padding	1em	Sets the padding property.
$border	null	Sets the border property.
$border-radius	core.$border-radius	Sets the border-radius property.
$background	core.$shade	Sets the background property.
$box-shadow	null	Sets the box-shadow property.
$title-font-size	core.$font-size-lg	Sets the font-size property of the notice__title element.
$title-font-weight	core.$font-weight-semi-bold	Sets the font-weight property of the notice__title element.
$title-line-height	core.$line-height-lg	Sets the line-height property of the notice__title element.