COMPONENT

Notice

A short standing message about how something is going. Three kinds: a plain note, a success, and a problem.

The three kinds

NOTE

Neutral information. The border stays at rule-strong so it does not shout.

SUCCESS

Brief received. A reply is on its way within two working days.

PROBLEM

Something is missing above. The field tells you which one.

HTML

<div class="notice">
  <span class="notice-kind">NOTE</span>
  <p class="notice-body">Neutral information. The border stays at rule-strong so it does not shout.</p>
</div>
<div class="notice notice-success">
  <span class="notice-kind">SUCCESS</span>
  <p class="notice-body">Brief received. A reply is on its way within two working days.</p>
</div>
<div class="notice notice-problem">
  <span class="notice-kind">PROBLEM</span>
  <p class="notice-body">Something is missing above. The field tells you which one.</p>
</div>

Reference

Read from components/notice.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.notice.notice-kind.notice-body.notice-success.notice-problem

READS--ds-accent--ds-font-body--ds-font-display--ds-gap-loose--ds-gap-tight--ds-ground--ds-hairline--ds-ink-soft--ds-pad-card--ds-radius--ds-rule-strong--ds-state-error--ds-state-success--ds-text-caption--ds-text-meta--ds-track-meta

Notes

WHY THE NEUTRAL ONE STAYS GREY

A neutral message that shouts in blue trains people to ignore the ones that are not neutral. Only success and problem colour their border, and even then the body text stays the ordinary ink — the kicker carries the state, not the prose.

Colour is never the only signal: each kind names itself, so the message survives a monochrome print, a colour-blind reader and a high-contrast mode that drops the border entirely.

IF IT APPEARS IN RESPONSE TO SOMETHING

Add role="status" so a screen reader announces it. The CSS cannot know whether a notice is standing or transient, so that decision is the caller's.