Notice / Alert

Notice / Alert highlights an important message — a tip, a success confirmation, a warning, or an error. It comes with four colored presets, a matching icon, an optional title, and a dismiss button.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Notice / Alert. Type your message inline; add a title above it if you want one.

Type

Pick one of four types — Info, Success, Warning, or Error. Each sets the preset color scheme and a default icon (info, check, alert triangle, and circle-x respectively).

Content

• Title — optional bold heading line.
• Message — the body text; basic inline formatting (bold, italic, links) is allowed.

A notice with neither a title nor a message renders nothing, so an empty block never leaves an empty box on the page.

Icon

Show icon toggles the leading icon. By default each type uses its own icon, but you can override it with any icon from the library and set a custom icon color and icon size.

Dismissible

Turn on Dismissible to add a close button. When a visitor dismisses the notice, it's hidden for that session.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the notice does; Styles is how it looks, organised by part.

Styling

Picking a Type sets the colors for all of these at once; the Styles rows override whichever ones you want to change.

Notice / Alert supports Wide and Full alignment and an HTML anchor.

HTML output

<div class="ab-notice ab-notice--warning has-icon" data-dismissible="1">
  <span class="ab-notice__icon" aria-hidden="true"><svg>…</svg></span>
  <div class="ab-notice__content">
    <div class="ab-notice__title">Heads up</div>
    <div class="ab-notice__message">This is a <strong>warning</strong> message.</div>
  </div>
  <button type="button" class="ab-notice__dismiss" aria-label="Dismiss this notice"><svg>…</svg></button>
</div>

The type modifier class (ab-notice--info|success|warning|error) drives the preset colors; background, text, accent, icon color, and radius are --ab-notice-* custom properties on the wrapper.