Skip to content

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

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.