CSS Showcase · Live Demo

Alerts that get noticed.

Dismissible alert cards, sticky banners, and field-level alerts built with color-mix tone tints and semantic tokens.

Featured demo

mobile · stacked-compact
Backup completed
Battery at 15%
3 new updates available
Upload failed, tap to retry

mobile design patterns

alert-stacked-compact.css
/* Compact stacked alerts */
.alert-compact {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  font-size: 0.7rem;
  line-height: 1.1;
}

CSS features used

  • • Compact flex rows
  • • line-height tightening
  • • border radius scale
  • • Semantic tokens