Promotional Banner
Top-of-page or inline banner for short-lived promotions, offers, or announcements
What is it?
A promotional banner announces limited-time offers, release notes, or important changes. Banners can be dismissible and are often placed above the header or within content flows.
Mockdown
``` [New] Introducing our 50% discount for students → [Learn more] [Dismiss] ``` Characteristics: - Short headline with a single action - Dismissible state persisted per user when appropriate - Use color and iconography to indicate tone (info, promo, warning)
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ┌───────────────────────────────────────┐ │
│ │ ✉ Preview text goes here... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ◉ ACME Inc. │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ 🚀 Introducing Our New Feature │ │
│ │ │ │
│ │ We've been working hard to bring │ │
│ │ you something special... │ │
│ │ │ │
│ │ [ Learn More → ] │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ desc │ │ desc │ │ desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Unsubscribe · Preferences · View Online │
└───────────────────────────────────────────────┘Marketing
Product Launch Email Campaign
A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.
--email--campaign--launch
Simple
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.