Alert

Inline messages with a tone + optional icon. Solid variants and size modifiers available.

Tonal variants (subtle)

Info

An informational message.

Success

Operation succeeded.

Warning

Take note.

Error

Something went wrong.

<div class="alert alert--info" role="status">
  <div class="alert__content">
    <p class="alert__title">Info</p>
    <p class="alert__message">Message.</p>
  </div>
</div>

Solid

Info solid

Success solid

Warning solid

Error solid

<div class="alert alert--info-solid">…</div>

Sizes

Small alert

Default

Large

With title and extra padding.

<div class="alert alert--small">…</div>
<div class="alert alert--large">…</div>

Modifiers

Class	Effect
`.alert`	Base. Defaults to info tone.
`.alert--info / --success / --warning / --error`	Subtle tonal variant.
`.alert--info-solid / ...-solid`	Solid bg, white text.
`.alert--small / --large`	Scale padding + font.
`.alert--no-icon / --no-close`	Hide icon or close button.
`.alert--auto-dismiss`	Shows progress bar (pair with JS timeout).
`.alert--dismissing`	Triggers exit animation.
`.alert__icon / __content / __title / __message / __close`	Sub-elements.
`.alert-container--{top,bottom}-{left,right,center}`	Floating toast-style container.