Live demos and real-world usage patterns
A simple announcement bar with manual navigation. Click the arrows to navigate or click the expand button to see all announcements.
<div class="rsl-announcements" data-rsl-announcements>
<div class="rsl-announcement-item" data-priority="urgent">
School closed Monday due to inclement weather
</div>
<div class="rsl-announcement-item" data-priority="event" data-new data-date="2025-12-15">
Winter concert December 15th at 7pm in the auditorium
</div>
<div class="rsl-announcement-item" data-priority="news" data-date="2025-12-08">
New lunch menu options starting next week
</div>
<div class="rsl-announcement-item" data-priority="reminder">
Permission slips due Friday for field trip
</div>
</div>Announcements that automatically rotate every 5 seconds. Pauses on hover and when the pause button is clicked. Notice the pause button appears when auto-rotate is enabled.
<div class="rsl-announcements"
data-rsl-announcements
data-auto-rotate="true"
data-interval="5"
data-pause-on-hover="true">
<div class="rsl-announcement-item" data-priority="urgent" data-link="#">
Flash sale! 50% off all items today only
</div>
<div class="rsl-announcement-item" data-priority="news" data-new>
New product line launching next week
</div>
<div class="rsl-announcement-item" data-priority="event" data-date="2025-12-20">
Join us for our holiday open house
</div>
</div>Different color themes for different contexts. Use variants to match your site's messaging tone.
<!-- Info (blue gradient - default) -->
<div class="rsl-announcements" data-rsl-announcements data-variant="info">...</div>
<!-- Success (green gradient) -->
<div class="rsl-announcements" data-rsl-announcements data-variant="success">...</div>
<!-- Warning (amber gradient) -->
<div class="rsl-announcements" data-rsl-announcements data-variant="warning">...</div>
<!-- Danger (red gradient) -->
<div class="rsl-announcements" data-rsl-announcements data-variant="danger">...</div>
<!-- Neutral (gray gradient) -->
<div class="rsl-announcements" data-rsl-announcements data-variant="neutral">...</div>Announcements with links allow users to click through to more details. Links maintain proper focus states for accessibility.
<div class="rsl-announcements" data-rsl-announcements>
<div class="rsl-announcement-item"
data-priority="event"
data-new
data-link="https://example.com/event">
Annual conference registration now open - Click to register
</div>
<div class="rsl-announcement-item"
data-priority="news"
data-link="https://example.com/blog">
Read our latest blog post on industry trends
</div>
</div>Control announcements programmatically using the JavaScript API. This example has auto-rotate enabled to demonstrate pause/resume.
// Get instance
const container = document.getElementById('demo-api');
const instance = RSL.Announcements.getInstance(container);
// Navigation
instance.next(); // Go to next
instance.prev(); // Go to previous
instance.goTo(0); // Go to first
instance.goTo(3); // Go to fourth (index 3)
// Panel control
instance.expand(); // Open panel
instance.collapse(); // Close panel
instance.toggle(); // Toggle panel
// Auto-rotate control (when enabled)
instance.pause(); // Pause rotation
instance.resume(); // Resume rotation
// Cleanup
instance.destroy(); // Remove componentA complete implementation showing how announcements might appear on a school website with mixed priorities and dates.
Announcements can subscribe to the FilterBus pub/sub system for dashboard-level filtering. Add data-filter-key="keyName" to connect announcements to a filter control, and use data-category or data-priority on each item to specify what filter values they match.