Display Modes Demo

This page demonstrates stack mode, the default display mode that shows all announcements vertically.

What You’re Seeing

Look at the top of this page - you’ll see three announcements stacked one below the other. Each uses a different variant to make them visually distinct.

The plugin supports three display modes: stack, first, and rotate. This demo uses stack mode, which displays all active announcements simultaneously.

Demo Configuration

The announcements on this page are configured as:

{
  id: 'demo-stack-1',
  content: 'First stacked announcement (note variant)',
  variant: 'note',
  showOn: ['/demos/display-modes/'],
},
{
  id: 'demo-stack-2',
  content: 'Second stacked announcement (tip variant)',
  variant: 'tip',
  showOn: ['/demos/display-modes/'],
},
{
  id: 'demo-stack-3',
  content: 'Third stacked announcement (caution variant)',
  variant: 'caution',
  showOn: ['/demos/display-modes/'],
},

Try It

• Dismiss announcements one by one to see the stack shrink
• Refresh after dismissing to see they stay hidden (localStorage)
• Clear storage to reset all dismissed announcements

Learn More

See the Display Modes guide for complete documentation on all display modes, including first mode for priority-based display and rotate mode for cycling through announcements.