Directory
- Welcome
Banner Component
Create full-width announcement bars that grab attention and communicate important messages effectively. Perfect for site-wide notifications, promotional messages, and status updates.
Key Features
-
Top of Page Placement: Automatically position at the page top
-
HTML Support: Include links and formatted content within banners
-
Responsive Design: Adapts seamlessly across all device sizes
-
Accessible: Built with semantic HTML and ARIA support
Quick Start
<Banner variant="primary">Welcome to our new website! 🎉</Banner><Banner variant="success" size="lg" topOfPage>Breaking News ✨</Banner>Variants & Sizes
Standard Variants
Size Options
Top of Page Placement
Moves the banner to a dedicated container at the top of the page. This is useful for site-wide announcements and important messages that need to be prominently displayed. Add a js-banner-container class to the container you want the banner inserted in.
Banner Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| scroll | boolean | false | Scroll animated banner |
| showOnLoad | boolean | true | Show banner on page load |
| size | sm | default | lg | default | Banner's size |
| topOfPage | boolean | true | Position at page top |
| variant | default | primary | secondary | success | error | warning | info | default | Banner's visual style |
Banner Functions API
| Function | Type | Description |
|---|---|---|
| toggle | (force?: boolean) => void | Toggle banner visibility: Force true to show, false to hide |
| variant | set: (value: default | primary | secondary | success | error | warning | info) => void | Set the banner variant |
Best Practices
-
Content Guidelines
- Keep messages concise and actionable
- Use clear, direct language
- Include next steps when relevant
- Limit to one main message per banner
-
Usage Tips
- Use stronger variants sparingly
- Match size to message importance
- Consider message timing
- Ensure mobile readability
Common Use Cases
Limited Time Launch Sale
Ready to enhance your website’s communication? Get our AstroJS starter template now and start creating engaging announcements with the Banner component.
GET 60% OFF!
