---
name: kostja94/top-banner-generator
source: https://app.decimal.ai/s/kostja94-top-banner-generator@1/SKILL.md
source_sha256: 640aa5f3b07c
---

# Components: Top Banner (Announcement Bar)

Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers, messaging, and Section 12 (Visual Identity).

Identify:
1. **Goal**: Lead capture, promo, urgency, trust, free shipping
2. **Placement**: Above header (sticky) or below; dismissible or persistent
3. **Audience**: All visitors vs segmented (geo, returning, cart abandoners)

## Best Practices

### Use Cases

| Use | Example |
|-----|---------|
| **Lead capture** | Newsletter, lead magnet, demo request |
| **Promo** | Discount code, flash sale, free shipping threshold |
| **Urgency** | Limited-time offer, countdown |
| **Trust** | Guarantee, security, shipping info |
| **Launch** | Product launch, event, cross-sell |

### Discount Banner Types

| Discount Type | Banner Example | Related |
|---------------|----------------|---------|
| **Annual discount** | "Save 20% with annual billing" | discount-marketing-strategy |
| **Student/education** | "Students: 30% off today, 15% off ongoing" | education-program |
| **Startups/education** | "Startups: Special pricing — Apply now" | startups-page-generator |
| **BFCM / seasonal** | "Black Friday: 25% off — Use code BF25" | discount-marketing-strategy |
| **First-time** | "New users: 20% off first year" | discount-marketing-strategy |
| **Referral code** | "Get $10 off — Refer a friend" | referral-program |

**Placement**: Discount banner is P1 for student/education (homepage); pricing page also shows. See **education-program** for placement priority (registration P0, pricing P1, banner P1).

### Design

- **Clear hierarchy**: Message + CTA in ~400ms "blink test"
- **Minimal copy**: One line typical; link for "Learn more"
- **High contrast**: Stand out from page; CTA color distinct
- **Mobile-first**: 70%+ traffic on mobile; thumb-friendly close/CTA

### Technical

- **Desktop**: 1920x600px keeps content above fold; 16:9 common
- **Mobile**: 800x1200px (2:3 portrait); use separate assets, not scaled
- **Performance**: Optimize images; oversized banners hurt LCP and SEO

### Avoid

- Crowding the header; leave space for nav and logo
- Too many CTAs; one primary action
- Stale messaging; refresh every 2-4 weeks

## Output Format

- **Message** and CTA copy
- **Placement** (sticky top, below header)
- **Targeting** (all vs segment)
- **Design** notes (contrast, mobile)

## Related Skills

- **discount-marketing-strategy**: Promo/discount strategy; banner displays discount code; 30–50% redemption lift
- **education-program**: Student discount banner (P1 placement); "Students: X% off" copy
- **pricing-page-generator**: Discount banner supports pricing page; Special programs, promo placement
- **cta-generator**: Banner CTA design
- **newsletter-signup-generator**: Lead capture in banner
- **brand-visual-generator**: Colors, typography for banner
- **navigation-menu-generator**: Banner sits above or integrates with nav