ContentVeda UI
View Source
📢 Component

Announcement Bar

Slim full-width bar for promotions and site-wide announcements. Customisable colours and optional link.

npm install @contentveda/ui

Interactive Demo Playground

<cv-announcement-bar> Playground
⚙️ Configure Properties
The announcement message.
Background color, any CSS color value (hex, rgb, CSS variable, etc.).
Text color, any CSS color value.
❌ Invalid JSON Formatting
Array containing link for the bar. { url: string }. When set, the message renders as a link to the first entry's url; otherwise it renders as plain text.

Usage Code Generator 

import AnnouncementBar from '@contentveda/ui/react/AnnouncementBar';
import '@contentveda/ui/theme.css';

<AnnouncementBar
  message="🚀 Free shipping on orders over $75 — Shop the sale"
  backgroundColor="#245066"
  textColor="#ffffff"
  mapLinks={[{ url: '/sale' }]}
/>
<script lang="ts">
  import AnnouncementBar from '@contentveda/ui/svelte/AnnouncementBar.svelte';
</script>

<AnnouncementBar
  message="🚀 Free shipping on orders over $75"
  backgroundColor="#245066"
  textColor="#ffffff"
  mapLinks={[{ url: '/sale' }]}
/>
<script type="module"
  src="node_modules/@contentveda/ui/dist/webcomponent/dist/AnnouncementBar.js"></script>

<cv-announcement-bar
  message="Free shipping on orders over $75"
  background-color="#245066"
  text-color="#ffffff"
></cv-announcement-bar>

Props API Reference

PropTypeDefaultDescription
message string undefined The announcement text content
mapLinks { url: string }[] undefined When provided, wraps message in an anchor using first entry's URL
backgroundColor string undefined CSS colour for the bar background (default: var(--cv-color-primary, #245066))
textColor string undefined CSS colour for the message text (default: #ffffff)
className string undefined Additional CSS class names on the root element
Place the AnnouncementBar at the very top of your layout, above the site header, for maximum visibility.