Components

Alert

A message about the state of the page or of something the person just did.

Keep it near what it refers to, and say what happened and what to do next.

Watch out. Don't use it for marketing. An alert that turns out to be a promotion teaches people to ignore the next real one.

Sub-brand

Theme

Liverendered from the shipped recipe

Tone

error default

warning

success

info

Code

The HTML for the live example above is on the page - use your browser's inspector, or copy the CSS here and the markup from the preview. Load post-ui.css once per site and this component works anywhere.

/* ============================================================================
   POST UI System — components
   HAND-WRITTEN. Not generated: this file encodes the RULES the components follow,
   which is not the same thing as whatever the Figma canvas currently looks like.
   The contract it implements (variant axes + reasoning) is synced in components.json.

   Import order:  tokens.css  ->  type.css  ->  components.css

   NAMING. Every class is `post-` prefixed. This ships into Webflow projects where
   `.button`, `.field`, `.label` or `.text-body` are exactly the classes a site
   already has, and an unprefixed collision would silently restyle real content.
   Block `post-x` · modifier `post-x--y` · state `is-*`.

   THE FOUR RULES EVERYTHING BELOW OBEYS
   1. Tokens are named by scale, never by consumer — space/m, stroke/m, icon-size/m
      and text/md all mean "the middle step".
   2. Strokes are altitude, not component — s detail · m component · l section.
   3. Optical padding — outer padding is uniform, the LABEL carries space/xs left and
      right, and the gap is 0. Text ends up inset by outer+xs while an icon sits at
      outer, which is correct: a glyph carries internal whitespace and text does not.
      One recipe covers icon-left, icon-right, both, or neither.
   4. Control height comes from the ICON TIER, never from text. Every control label
      carries min-height = its icon-size token. Without it the icon becomes the
      tallest child and toggling an optional icon grows the control — a chip jumped
      28 -> 32px exactly this way. With it, toggling an icon changes width only.

   currentColor is load-bearing. Outline/ghost controls bind their label fill AND
   their stroke to the same `action` token, so the border is written as
   `border-color: currentColor` and one colour change moves both.
   ============================================================================ */

/* ---- alert ---- */
/* Sits on the theme-INVARIANT feedback tokens, so it renders identically in all four
   themes. That is deliberate: an error must not restyle itself per section. Doubles
   as toast styling. */
.post-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  padding: var(--space-m);
  font-family: var(--font-post);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
}
.post-alert .post-icon { width: var(--icon-size-s); height: var(--icon-size-s); }
.post-alert--error   { background: var(--feedback-error-surface);   color: var(--feedback-error-text); }
.post-alert--warning { background: var(--feedback-warning-surface); color: var(--feedback-warning-text); }
.post-alert--success { background: var(--feedback-success-surface); color: var(--feedback-success-text); }
.post-alert--info    { background: var(--feedback-info-surface);    color: var(--feedback-info-text); }