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';

export default function Example() {
  return (
    <AnnouncementBar
      message="🚀 Free shipping on orders over $75 — Shop the sale"
      backgroundColor="#245066"
      textColor="#ffffff"
      mapLinks={[{ url: '/sale' }]}
    />
  );
}
<script setup>
import AnnouncementBar from '@contentveda/ui/vue/AnnouncementBar.vue';
import '@contentveda/ui/theme.css';

const mapLinks = [{ url: '/sale' }];
</script>

<template>
  <AnnouncementBar
    message="🚀 Free shipping on orders over $75 — Shop the sale"
    backgroundColor="#245066"
    textColor="#ffffff"
    :mapLinks="mapLinks"
  />
</template>
<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' }]}
/>
import AnnouncementBar from '@contentveda/ui/solid/AnnouncementBar';
import '@contentveda/ui/theme.css';

export default function Example() {
  return (
    <AnnouncementBar
      message="🚀 Free shipping on orders over $75 — Shop the sale"
      backgroundColor="#245066"
      textColor="#ffffff"
      mapLinks={[{ url: '/sale' }]}
    />
  );
}
import { Component } from '@angular/core';
import { AnnouncementBarModule } from '@contentveda/ui/angular/AnnouncementBar';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [AnnouncementBarModule],
  template: `
    <announcement-bar
      message="🚀 Free shipping on orders over $75 — Shop the sale"
      backgroundColor="#245066"
      textColor="#ffffff"
      [mapLinks]="mapLinks"
    ></announcement-bar>
  `
})
export class ExampleComponent {
  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.