Announcements - JSON API Examples

Back to Component API Examples

V2 API Support: The Announcements component supports the V2 JSON Layout API with semantic configuration. Use type: "announcements" with an items array to create announcement bars.

Example 1: Basic Announcements

A simple announcement bar with multiple items and navigation controls.

const config = {
    version: 2,
    layoutId: "basic-announcements",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "announcements",
                items: [
                    {
                        text: "Welcome to RSL! Check out our new components.",
                        priority: "news"
                    },
                    {
                        text: "System maintenance scheduled for Saturday.",
                        priority: "reminder"
                    },
                    {
                        text: "New feature: Dark mode is now available!",
                        priority: "event",
                        isNew: true
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Auto-Rotating Announcements

Announcements with auto-rotation, pause on hover, and clickable links.

const config = {
    version: 2,
    layoutId: "auto-rotate-announcements",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "announcements",
                autoRotate: true,
                interval: 5,
                pauseOnHover: true,
                items: [
                    {
                        text: "Flash sale! 50% off all items today only.",
                        priority: "urgent",
                        link: "#sale"
                    },
                    {
                        text: "Winter concert December 15th at 7pm.",
                        priority: "event",
                        date: "2025-12-15",
                        link: "#events"
                    },
                    {
                        text: "Don't forget to register for spring classes.",
                        priority: "reminder",
                        link: "#register"
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Priority Badges & Variants

Announcements with different priority levels and color variants.

const config = {
    version: 2,
    layoutId: "priority-announcements",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "announcements",
                variant: "danger",
                items: [
                    {
                        text: "URGENT: Server maintenance in progress.",
                        priority: "urgent"
                    },
                    {
                        text: "Critical security update available.",
                        priority: "urgent",
                        isNew: true
                    },
                    {
                        text: "All systems will be restored by 6pm EST.",
                        priority: "news"
                    }
                ]
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

API Reference

Announcements Configuration

Property	Type	Default	Description
`items`	Array	required	Array of announcement objects
`autoRotate`	Boolean	`false`	Enable automatic rotation
`interval`	Number	`5`	Rotation interval in seconds
`pauseOnHover`	Boolean	`true`	Pause rotation when hovering
`variant`	String	`null`	Color variant: info, success, warning, danger, neutral
`filterKey`	String	`null`	FilterBus integration key

Item Configuration

Property	Type	Description
`text`	String	Announcement text content
`priority`	String	Priority badge: urgent, event, news, reminder
`link`	String	URL to navigate to when clicked
`date`	String	Date string (YYYY-MM-DD format)
`category`	String	Category for FilterBus filtering
`isNew`	Boolean	Mark announcement as new