Lucent UI
← ProductCardAnnouncementCardBulkActionBar →
✦ LLM-ready

AnnouncementCard

pattern

Announcement card with title, description, optional media, and action buttons. Includes system notice and promo variants. Composes Card, Stack, Row, Text, Chip, Button, and Icon.

"Build an AnnouncementCard pattern from lucent-ui with Card, Text for title/body, Chip for type label, and action Buttons. Include system notice and promo variants."

Usage

React / JSX
import { Card, Stack, Row, Text, Chip, Button, Icon } from 'lucent-ui'

<AnnouncementCard />

Installation

pnpm add lucent-ui

API Reference

AnnouncementCard props — * required

PropTypeDefaultDescription
Cardcomponent—Surface container for the announcement.
Textcomponent—Announcement title and description.
Chipcomponent—Type label (Announcement, Update, Promo).
Buttoncomponent—Action buttons (Learn more, Dismiss).
Stackcomponent—Vertical layout for content.
Rowcomponent—Horizontal layout for header and actions.