Notice

A component for highlighting messages to the user.

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.

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

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