Notice

npm install @vrembem/notice

@use "@vrembem/notice";

Options

Notice uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

Design tokens

Notice uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-notice-foreground

var(--vb-foreground-strong)

--vb-notice-background

var(--vb-background-shift)

--vb-notice-border

none

--vb-notice-border-radius

var(--vb-border-radius)

--vb-notice-box-shadow

none

--vb-notice-padding

1em 1.25em

--vb-notice-spacing

0.5em

--vb-notice-title-font-size

var(--vb-font-size-lg)

--vb-notice-title-line-height

var(--vb-font-weight-semi-bold)

--vb-notice-title-font-weight

inherit

Basic usage

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

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

Add a title to your notice using the notice__title element.

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

Using flex layout

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

<div class="notice">
  <div class="flex flex--wrap-no">
    <div class="flex-item-none">
      ...
    </div>
    <div class="flex-item-auto">
      ...
    </div>
  </div>
</div>

Dismissible

It's a common pattern to allow users to dismiss notices. This can be accomplished using the button component along with some simple vanilla JavaScript.

<div class="notice">
  <div class="flex justify-content-between">
    <p>...</p>
    <button 
      class="button button--icon button--size-sm" 
      aria-label="Dismiss this notice" 
      data-dismiss=".notice"
    >
      ...
    </button>
  </div>
</div>

// Get the button elements
const btns = document.querySelectorAll("[data-dismiss]");

// Loop through them and add click event listeners
btns.forEach((btn) => {
  btn.addEventListener("click", (event) => {
    // Get the value of data-dismiss and select the nearest matching element
    const selector = btn.getAttribute("data-dismiss");
    const result = event.target.closest(selector);

    // Hide the notice if it exists
    if (result) result.classList.add("display-none");
  });
});

notice--color-[key]

Applies a color theme to the notice, useful for conveying different states such as success, info, or error. These modifiers are generated using the palette theme tokens.

<div class="notice notice--color-important">
  <p>An error has occurred!</p>
</div>

Available variants

• notice--color-primary
• notice--color-secondary
• notice--color-neutral
• notice--color-important