Banner & Alert

Design a banner and alert system for a product interface. The banner is a persistent, page-level strip used for announcements, promos, or important guidance. The alert is a shorter-lived message used for status, warning, or confirmation feedback.

Build both components as reusable UI patterns, not one-off art. Define the content hierarchy for each: icon or badge, headline, supporting copy, and optional action. The banner can include one primary CTA and a secondary dismiss action. The alert should prioritize quick reading and a clear exit path.

Show at least three alert types: info, warning, and success. Keep the visual rules consistent across variants, but let color, icon, and tone communicate severity. Include default, hover, active, and dismissed states. If the action is present, show how the component behaves when focused and when the CTA is clicked.

Keep the layout compact and accessible. Text should remain legible at small sizes, contrast should meet accessibility standards, and the close control should be obvious without competing with the message. Use spacing and alignment that make the banner feel calm and the alert feel immediate.

Animate your banners and alerts subtlety to draw attention, but ensure animations don't compromise the user experience with excessive motion.