Announcement Block

Display notices, updates, or calls-to-action.

Syntax

<Announcement slots="heading, text, button" variant="secondary" backgroundColor="background-color-gray"/>

#### Your Heading

Your announcement text goes here.

- [Button Text](https://example.com)

Parameters

• slots:

  • "heading, text, button" - Full announcement
  • "button" - Button only

• variant: Style

  • "primary" - Bold (default)
  • "secondary" - Subtle

• backgroundColor: Background

  • "background-color-gray"
  • "background-color-white" (default)

Examples

Full Announcement

data-slots=heading, text, button

data-variant=secondary

data-backgroundColor=background-color-gray

Button Only

data-slots=button

Primary Variant

data-slots=heading, text, button

data-variant=primary