Welcome to the Notice System Demo

This banner notice is visible across all pages. Try navigating to different routes to see how notices follow you.

Notice System

Scheduled, page-specific, dismissible announcements

Interactive Demo

This page demonstrates the notice system. The banner notice at the top of the page and the card notices below are dynamically rendered from a configuration. Try dismissing notices and navigating between pages to see how they behave.

Active Notices

Total Active

Banner Notices

Card Notices

NoticeBanner Component

Displays banner-location notices for the current page. These typically appear at the top of the page.

Banner Preview 1 active

This shows what the NoticeBanner component renders for this page.

Welcome to the Notice System Demo

This banner notice is visible across all pages. Try navigating to different routes to see how notices follow you.

NoticeCard Component

Displays card-location notices for the current page. These are great for inline announcements within forms or content sections.

Card Preview 0 active

This shows what the NoticeCard component renders for this page.

No card notices active for this page. They may have been dismissed.

Notice Variants

Notices support different visual variants to convey urgency and type.

Info

General information, announcements, tips

Success

Positive updates, new features, confirmations

Warning

Cautions, upcoming changes, time-sensitive info

Error

Critical issues, outages, required actions

Notice Features

Date Scheduling

Set startDate and endDate to control when notices appear. Perfect for holiday announcements or temporary maintenance notices.

Page Targeting

Use pages: ['*'] for global notices or target specific routes like ['/service-request'].

Dismissible

Set dismissible: true to allow users to close notices. Dismissals persist in localStorage.

Call-to-Action Links

Add a link object with text and href to include actionable CTAs in your notices.

Priority Sorting

Set priority values to control notice order. Higher numbers appear first.

Quick Toggle

Use enabled: false to quickly disable a notice without removing it from config.

Usage Example

// In your +layout.svelte
import {
  initializeNotices,
  setCurrentPath,
  NoticeBanner
} from '@classic-homes/theme-svelte';
import { page } from '$app/stores';
import { notices } from '$lib/notices/config';

// Initialize on mount
initializeNotices(notices);

// Update path on navigation
$effect(() => {
  setCurrentPath($page.url.pathname);
});

// In your template
<NoticeBanner />
<slot />

// For card notices in specific pages
<NoticeCard />