Notice & Banner

Two forms of the same family. .notice is a simple inline info callout, .banner is a full-width bar composed of an icon + single-line text + action button + dismiss. Both use semantic tokens exclusively and follow dark mode automatically.

Notice (Info Callout)

Background: color-mix(in srgb, var(--c-sky) 10%, transparent). Border: color-mix(in srgb, var(--c-primary) 28%, var(--c-line-soft)). Radius 16px. The inner strong tag is colored --c-primary for emphasis (sky in dark mode). For warning or error intents, use the Banner set below.

Notice: The application period has closed. Please check the next enrollment schedule.

Lays out an icon (lucide) · text · action button · dismiss (×) in a single row. Three intents — .banner-info (info · primary), .banner-warning (caution · warning), .banner-error (error · negative). Radius 16px; action button 8px. Action and dismiss are optional.

Info · The 2026 first-half education schedule is now available.
Caution · 3 days until the application deadline. Prepare your documents in advance.
Error · The application period has closed.

Rules

Guidelines to follow when using Notice and Banner.

  • Use semantic tokens only — info --c-primary, caution --c-warning, error --c-negative. Arbitrary hex values are not allowed.
  • Wrap emphasized text in a strong tag. Never apply inline color directly.
  • Icons must come from lucide (the global standard). Size 18–20px; color follows the intent token.
  • Use Notice for simple warnings and cautions; use Banner for informational messages that carry an action.
  • Radius is fixed at 16px (distinct from Card at 12px). Action button only: 8px.
  • Dark mode follows tokens automatically — only the info emphasis color flips to sky (no extra override needed).