Banner

View Original

A banner displays a prominent message at the top of a page or section. Used for announcements, promotions, alerts, and cookie consent.

Goshtoso Component

Go + Templ

Simple Banner (Dismissible by Default)

Persistent Banner (Non-dismissible)

With CTA Button

Color Variants

Cookie Consent Banner (Bottom Right)

Usage Example

// Simple Banner (Dismissible by default)
@banner.Banner(banner.Config{
    Text: "Limited Time Offer! Check out our deals",
})

// Persistent Banner (Non-dismissible)
@banner.Banner(banner.Config{
    Text:       "Important announcement - cannot be dismissed",
    Persistent: true,
})

// Banner with CTA Button
@banner.Banner(banner.Config{
    Text: "Get Fit Anywhere, Anytime",
    CTA: &banner.CTAConfig{
        Text: "Start free trial",
        Href: "/signup",
    },
})

// Fixed Position Banner (stays at top)
@banner.Banner(banner.Config{
    Text: "Important system maintenance scheduled",
    Position: banner.PositionFixed,
    Variant:  banner.Warning,
})

// Colored Variants
@banner.Banner(banner.Config{
    Text: "Success! Your changes have been saved",
    Variant: banner.Success,
})

// Cookie Consent Banner
@banner.Banner(banner.Config{
    CookieBanner: true,
    Text: "We use cookies to improve your experience",
    CookieConfig: &banner.CookieBannerConfig{
        Title:        "Cookie Settings",
        AcceptText:   "Accept All",
        RejectText:   "Decline",
        AcceptAction: "acceptCookies()",
        RejectAction: "show = false",
    },
})

Badge Card