@vrembem/notice

3.0.19 • Public • Published

Notice

A component for highlighting messages to the user.

npm version

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.

Package Sidebar

Install

npm i @vrembem/notice

Weekly Downloads

1

Version

3.0.19

License

MIT

Unpacked Size

9.84 kB

Total Files

11

Last publish

Collaborators

  • sebnitu