TopBanner

The TopBanner component displays a prominent announcement banner at the very top of the page, typically for important notices or calls-to-action.

Overview

• Type: Layout Component
• Category: Announcement
• Complexity: Simple
• File: src/components/TopBanner.astro

Features

• Dismissible - Users can close the banner (with JavaScript)
• Call-to-Action - Optional link button
• Sticky Positioning - Can stick to top on scroll
• Configurable Colors - Typically uses brand colors

Props

interface Props {
  message: string;
  link?: string;
  linkText?: string;
  backgroundColor?: string;
  textColor?: string;
}

Prop Details

Prop	Type	Default	Description
message	string	Required	Announcement text to display
link	string	undefined	Optional URL for CTA button
linkText	string	undefined	Text for CTA button
backgroundColor	string	'bg-blue-900'	Tailwind background color class
textColor	string	'text-white'	Tailwind text color class

Usage

Basic

---
import TopBanner from '@/components/TopBanner.astro';
---

<TopBanner message="Important announcement here!" />

With CTA

---
import TopBanner from '@/components/TopBanner.astro';
---

<TopBanner
  message="Join us for our Annual Conference!"
  link="/events/conference-2026"
  linkText="Register Now"
/>

Custom Colors

---
import TopBanner from '@/components/TopBanner.astro';
---

<TopBanner
  message="Membership renewals are now open"
  link="/membership"
  linkText="Renew"
  backgroundColor="bg-green-600"
  textColor="text-white"
/>

Styling

Default Appearance

• Background: Blue-900 (bg-blue-900)
• Text: White with medium font weight
• Padding: Vertical padding for comfortable reading
• Responsive: Stacks on mobile, inline on desktop

Layout

• Centered content with max-width
• Flexbox for message and CTA alignment
• Gap between elements

Common Use Cases

1. Event Announcements

   <TopBanner
     message="Triennial Gathering 2026 - Register Now!"
     link="/events/triennial-2026"
     linkText="Details"
   />

2. Membership Drives

   <TopBanner
     message="Become a member and join our community"
     link="/membership"
     linkText="Join Today"
   />

3. Important Notices

   <TopBanner message="Website maintenance scheduled for Sunday 2AM-4AM CET" />

Accessibility

• Color Contrast: Ensure sufficient contrast for readability
• Link Semantics: Uses proper <a> tags for CTAs
• Keyboard Navigation: All interactive elements are keyboard accessible

Dependencies

• None (standalone component)

Used On

• Selected pages where announcements are needed
• Often included at the very top of BaseLayout.astro

Related Components

• BannerTriennialGathering - Event-specific banner
• Navbar - Typically rendered below TopBanner

Source Code

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/TopBanner.astro