Block

Notification Card

Dismissible banner for announcements, warnings, alerts, or success messages. Available in subdued, warning, alert, and success variants.

Uses:CardBadge

Playground

Preview

Scheduled Maintenance

June 15

Our platform will undergo maintenance on June 15, 2026 from 2–4 AM UTC. Some services may be temporarily unavailable.

Configure

Subdued for plain notices, warning for caution, alert for errors, success for confirmations

Yes
Yes
Yes

Variants

Preview

Scheduled Maintenance

June 15

Our platform will undergo maintenance on June 15, 2026 from 2–4 AM UTC. Some services may be temporarily unavailable.

Profile updated

Just now

Your account settings were saved successfully. Changes may take a moment to appear everywhere.

Code

<Card className="w-full max-w-md shadow-xl">
  <CardContent className="flex items-start gap-3">
    <div className="flex size-8 shrink-0 items-center justify-center border border-border bg-muted text-muted-foreground">
      <Bell className="size-4" weight="bold" />
    </div>
    <div className="flex-1 min-w-0">
      <div className="flex items-center gap-2 mb-1">
        <p className="text-sm font-medium">Scheduled Maintenance</p>
        <Badge className="border border-border bg-muted text-muted-foreground">June 15</Badge>
      </div>
      <p className="text-sm text-muted-foreground">Our platform will undergo maintenance on June 15, 2026 from 2–4 AM UTC. Some services may be temporarily unavailable.</p>
    </div>
    <button type="button" aria-label="Dismiss" className="shrink-0 self-start text-muted-foreground transition-colors hover:text-foreground">
      <X className="size-3.5" weight="bold" />
    </button>
  </CardContent>
</Card>