Back to Examples

Banner Layout Gallery

Visual reference for styling and customizing banner experiences. Copy configurations and adapt them to your brand.

Compact Dark Banner (Nextra-style)

Single-line, centered, dark theme announcement

New features just dropped! Check out our latest updates.

Configuration

{
  id: 'announcement',
  type: 'banner',
  content: {
    message: 'New features just dropped! Check out our latest updates.',
    buttons: [
      { text: "See What's New", url: '/', variant: 'link' as const }
    ],
    dismissable: true,
    position: 'top' as const,
    style: {
      background: '#111827',
      color: '#f9fafb',
      padding: '10px 20px',
      fontSize: '14px',
      fontWeight: '500',
      justifyContent: 'center',
      borderBottom: 'none',
    },
  },
  targeting: { url: { contains: '/' } },
  priority: 1,
}

Best for:

  • • Simple announcements
  • • Changelog updates
  • • Minimalist designs
  • • Dark mode themes

Tips:

  • • Use `justifyContent: "center"` for centered text
  • • Keep messages very concise
  • • Link buttons are good for subtle CTAs

Compact Promo Banner

Compact, single-line promo with custom brand color

Ends in 5h 59m 32s. One last deal | You've shopped for others. Now, get something for you. Courses from $9.99.

Configuration

{
  id: 'compact-promo',
  type: 'banner',
  content: {
    message: '<strong>Ends in 5h 59m 32s.</strong> One last deal | You\'ve shopped for others. Now, get something for you. Courses from $9.99.',
    buttons: [],
    dismissable: true,
    position: 'bottom' as const,
    style: {
      background: '#a6e3e3',
      color: '#1c1d1f',
      padding: '10px 0',
      fontSize: '14px',
      fontWeight: '500',
      borderBottom: 'none',
    },
  },
  targeting: { url: { contains: '/shop' } },
  priority: 5,
}

Best for:

  • • Time-sensitive promotions
  • • Single-line offers
  • • Minimalist calls to action
  • • Brand-specific color schemes

Tips:

  • • Use `<strong>` for emphasis within the message
  • • Combine multiple short phrases with `|` for density
  • • Consider `position: "bottom"` for less intrusive promotions

Multi-Button Feature Announcement

Default layout with primary and secondary CTAs

New Feature: Real-time Analytics Dashboard is now live. Track your metrics instantly.

Configuration

{
  id: 'feature-launch',
  type: 'banner',
  content: {
    message: '<strong>New Feature:</strong> Real-time Analytics Dashboard is now live. Track your metrics instantly.',
    buttons: [
      { text: 'Learn More', url: '/features/analytics', variant: 'primary' as const },
      { text: 'Watch Demo', url: '/demo/analytics', variant: 'secondary' as const }
    ],
    dismissable: true,
    position: 'top' as const,
  },
  targeting: { url: { contains: '/' } },
}

Best for:

  • • Feature announcements
  • • Product launches
  • • Major updates
  • • Event invitations

Tips:

  • • Primary CTA = main action
  • • Secondary CTA = alternative action
  • • Keep both CTAs relevant to the message
  • • Test different CTA combinations

Cookie Consent Style

Multi-line compliance banner with inline links and multiple action buttons

This website uses cookies and similar technologies to collect information you provide and information about your interactions with our sites to improve your experience, analyze performance and traffic on our website and assist our marketing efforts and customer service. We may share this information with our third-party partners. You can change your cookie preferences here. By continuing to browse, you agree to our use of these tools in accordance with our Privacy Notice and you agree to the terms of our Terms of Service.

Configuration

{
  id: 'cookie-consent',
  type: 'banner',
  content: {
    message: 'This website uses cookies and similar technologies to collect information you provide and information about your interactions with our sites to improve your experience, analyze performance and traffic on our website and assist our marketing efforts and customer service. We may share this information with our third-party partners. You can change your <a href="/cookie-preferences">cookie preferences here</a>. By continuing to browse, you agree to our use of these tools in accordance with our <a href="/privacy">Privacy Notice</a> and you agree to the terms of our <a href="/terms">Terms of Service</a>.',
    buttons: [
      { text: 'OK, got it', action: 'accept-cookies', variant: 'primary' as const },
      { text: 'Adjust preferences', action: 'adjust-preferences', variant: 'primary' as const },
      { text: 'Read our Cookie Policy', url: '/cookie-policy', variant: 'link' as const }
    ],
    dismissable: false,
    position: 'bottom' as const,
    className: 'cookie-consent-banner',
    style: {
      background: '#f5f5f5',
      color: '#333333',
      flexDirection: 'column', // Stack content vertically
      alignItems: 'stretch', // Full width for text
    },
  },
  targeting: { url: { contains: '/' } },
}

// Additional CSS for button alignment:
// .cookie-consent-banner .xp-banner__buttons {
//   justify-content: flex-end;
// }

Best for:

  • • GDPR/CCPA compliance
  • • Privacy policy updates
  • • Data collection consent
  • • Cookie opt-in/opt-out

Tips:

  • • Provide inline links to privacy policy and terms
  • • Use light neutral background for readability
  • • Set dismissable: false to require user interaction
  • • Align buttons to the right for professional look

Available CSS Classes

Use these classes with the className prop:

.xp-banner

Main banner container

.xp-banner--top

Top-positioned banner

.xp-banner--bottom

Bottom-positioned banner

.xp-banner__button

Button element

.xp-banner__button--primary

Primary button variant

.xp-banner__button--secondary

Secondary button variant

.xp-banner__button--link

Link button variant

.xp-banner__close

Close/dismiss button

View complete API documentation →