Skip to the page

MCSS-Lite 0.4.1

GitHub

Alert c-alert

BetaComponent · since 0.4.0

A printed notice on the page: tells people about something that affects what they are doing, with its severity in an icon, a word and a heavier bottom edge.

Pick this part

Pick c-alert for

  • Something on this page needs attention: a failed save, an expiring plan, a limit reached.
  • The error summary at the top of a form after a failed submit, with a link to each field.
  • Confirming that an action finished, when the page stays where it is.

Pick another part for

  • An error about one field: use its c-form-field error message.
  • A decision the person must make before going on: use c-modal.
  • A status label on an item: use c-badge.

Build it

  1. Start with <div> and add class="c-alert".
  2. Add the required parts: c-alert__body.
  3. Add the parts you need: c-alert__icon, c-alert__title, c-alert__actions, c-alert__close.
  4. Pick at most one tone modifier: --info, --success, --warning, --error.

Information: Maintenance on 3 October 2026

Sign-in is paused from 22:00 to 23:00 UTC.

Success: Invoice sent

Acme Inc. will get it by email in a few minutes.

Warning: Your trial ends on 12 October 2026

Choose a plan to keep your 4 projects.

Choose a plan

Error: The changes weren't saved

The connection dropped. Check your network and save again.

Show markup 34 lines 
<div class="l-stack">
  <div class="c-alert c-alert--info">
    <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-info"></use></svg></span>
    <div class="c-alert__body">
      <p class="c-alert__title"><span class="u-sr-only">Information: </span>Maintenance on 3 October 2026</p>
      <p>Sign-in is paused from 22:00 to 23:00 UTC.</p>
    </div>
  </div>
  <div class="c-alert c-alert--success">
    <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-success"></use></svg></span>
    <div class="c-alert__body">
      <p class="c-alert__title"><span class="u-sr-only">Success: </span>Invoice sent</p>
      <p>Acme Inc. will get it by email in a few minutes.</p>
    </div>
  </div>
  <div class="c-alert c-alert--warning">
    <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-warning"></use></svg></span>
    <div class="c-alert__body">
      <p class="c-alert__title"><span class="u-sr-only">Warning: </span>Your trial ends on 12 October 2026</p>
      <p>Choose a plan to keep your 4 projects.</p>
      <div class="c-alert__actions l-cluster">
        <a class="c-button c-button--primary c-button--sm" href="#plans">Choose a plan</a>
      </div>
    </div>
  </div>
  <div class="c-alert c-alert--error">
    <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-error"></use></svg></span>
    <div class="c-alert__body">
      <p class="c-alert__title"><span class="u-sr-only">Error: </span>The changes weren't saved</p>
      <p>The connection dropped. Check your network and save again.</p>
    </div>
    <button type="button" class="c-alert__close" aria-label="Dismiss this error"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-close"></use></svg></button>
  </div>
</div>

Check your build

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Give every toned alert its icon and a hidden severity prefix, so it never relies on color.

Warning: Your trial ends on 12 October 2026

Choose a plan to keep your projects.

Show markup 7 lines 
<div class="c-alert c-alert--warning">
  <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-warning"></use></svg></span>
  <div class="c-alert__body">
    <p class="c-alert__title"><span class="u-sr-only">Warning: </span>Your trial ends on 12 October 2026</p>
    <p>Choose a plan to keep your projects.</p>
  </div>
</div>

validate: 0 issues

Doesn't fit

Don't signal severity with color alone: screen readers and people who can't tell the edge color apart miss it.

<div class="c-alert c-alert--warning">
  <div class="c-alert__body">
    <p class="c-alert__title">Your trial ends on 12 October 2026</p>
  </div>
</div>

validate

  • warning c-alert--warning shows its severity by color alone. Add a c-alert__icon and start the title with <span class="u-sr-only">Warning: </span>. [alert-severity]

Fits

After a failed submit, list every error in an error alert, each linked to its field, and move focus to it.

Error: There is a problem

Show markup 10 lines 
<div class="c-alert c-alert--error" tabindex="-1" aria-labelledby="summary-title">
  <span class="c-alert__icon"><svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-error"></use></svg></span>
  <div class="c-alert__body">
    <h2 class="c-alert__title" id="summary-title"><span class="u-sr-only">Error: </span>There is a problem</h2>
    <ul>
      <li><a href="#email">Enter your email address</a></li>
      <li><a href="#terms">Agree to the terms of service</a></li>
    </ul>
  </div>
</div>

validate: 0 issues

Doesn't fit

Don't build an alert from elements outside the block: the tile and edge lose their shape.

<div class="c-card">
  <p class="c-alert__title">There is a problem</p>
</div>

validate

  • warning "c-alert__title" should be inside an element with class "c-alert". [element-outside-block]

Spec sheet

Apply to <div> <section> <aside>

Modifiers
ClassGroupWhat it does
c-alert--infotone (pick one)Neutral information. Circle icon, "Information:" prefix.
c-alert--successtone (pick one)Something finished well. Square check icon, "Success:" prefix.
c-alert--warningtone (pick one)Something may go wrong unless the person acts. Triangle icon, "Warning:" prefix.
c-alert--errortone (pick one)Something went wrong; also the error summary at the top of a form. Octagon icon, "Error:" prefix.
Elements
ClassOnWhat it does
c-alert__icon<span> <div>The keylined tile that holds the severity icon (a c-icon, aria-hidden).
c-alert__body required<div>Title, text and actions.
c-alert__title<p> <h2> <h3> <h4> <strong>One short line. Starts with the visually hidden severity prefix.
c-alert__actions<div>Buttons or links that resolve the alert, in an l-cluster.
c-alert__close<button>Dismiss button, 44px, with aria-label. The app sets hidden on the alert when it is pressed.
Show tokens 6
Tokens
TokenValue (light / dark)
--alert-background#ffffff / #14294d
--alert-border#1a1d20 / #cfdae5
--alert-edge-info#0c5460 / #9ad4df
--alert-edge-success#1e5631 / #a3d9b1
--alert-edge-warning#856404 / #f5d77a
--alert-edge-error#c91a09 / #f4a9b0

Accessibility

  • Severity is carried three ways: the hidden text prefix, the icon shape and the bottom edge.
  • role="alert" interrupts the screen reader: only for urgent messages that appear after an action.
  • An error summary gets tabindex="-1" and focus after a failed submit; its links move focus to each field.
  • c-alert__close needs aria-label, and the app moves focus to a sensible place after hiding the alert.
Keyboard
KeyWhat it does
TabMoves through the links and buttons inside the alert, then the close button.
EnterFollows a link in an error summary to its field.

Wording

  1. Titles say what happened in plain words, in sentence case, with no exclamation mark.
  2. The text says what to do next. Name the action: "Choose a plan", not "Click here".
  3. Keep the hidden prefix to one word and a colon: "Error:", "Warning:", "Success:", "Information:".

All content rules

Fits with

Researched from