Docs
  • Documentation
  • Shared components
  • Marketing
  • Application UI
  • Header navigations
  • Header sections
  • Features sections
  • Pricing sections
  • CTA sections
  • Metrics sections
  • Newsletter CTA sections
  • Testimonial sections
  • Social proof sections
  • Blog post sections
  • Content & rich text sections
  • Contact sections
  • Team sections
  • Careers sections
  • FAQ sections
  • Footers
  • Banners
  • Landing pages
  • Pricing pages
  • Blog pages
  • Blog post pages
  • About pages
  • Contact pages
  • Team pages
  • Legal pages
  • FAQ pages
  • Log in pages
  • Sign up pages
  • Verification pages
  • Forgot password pages
  • 404 pages
  • Email templates
  1. Marketing
  2. Components
Sign inGet PRO

Banners

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). Banners can be displayed at the top or the bottom of the screen. Only one banner should be shown at a time.

Text field default

Preview
Code

Text field brand

Get the code

Single action default

Get the code

Single action brand

Get the code

Dual action default

Get the code

Dual action brand

Get the code

Slim default

Get the code

Slim brand

Get the code

Text field default full width

Get the code

Text field brand full width

Get the code

Single action default full width

Get the code

Single action brand full width

Get the code

Dual action default full width

Get the code

Dual action brand full width

Get the code

Slim default full width

Get the code

Slim brand full width

Get the code