Banner

Contextual alerts and global announcements. Banners provide critical updates at the top of pages or sections.

Usage

Use Banners for non-modal notifications. They are persistent enough to be noticed but don't block user flow. The variant color indicates the severity or nature of the message.

Content

Banner Variants

Different types of messaging styles.

New Feature

Analytics dashboards now support real-time data streaming.

Verification Successful

Your account has been fully verified and is ready for use.

Storage Limit Reaching

You have used 90% of your current storage quota.

Payment Failed

We couldn't process your last transaction. Please check your billing details.

Spec

Info (Default): Background #1A1A1A, White text.
Success: Standard green background, White text.
Warning: #F5B53F background, #1A1A1A text.
Error: #D74D0F background, White text.
Interaction: Optional close button with hover state.
Animation: 300ms slide-down entry.

Anatomy

ERROR VARIANT