Navi Announcement Strip
Figma Component: 13443-20101
GitHub Issue: #13
Last modified with commit d4bb750 on
by hip3r.
A site-wide horizontal banner displayed above the main navigation for announcements or promotional messages. Features scrolling text on mobile and optional CTA button. Text has a 100 character limit to remain on a single line within the desktop container. Same banner appears across all pages.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display announcement strip | Shows banner above main navigation with announcement text and optional CTA button. Text scrolls horizontally on mobile if it exceeds viewport width. |
| editor | Configure announcement text | Set announcement message text. Maximum 100 characters to ensure single-line display on desktop container. Text will auto-scroll on mobile if needed. |
| editor | Configure CTA button | Optional CTA button can be added to announcement strip. Requires button label and URL. Displays as button component within the strip. |
| user | Read announcement | View announcement message in magenta banner at top of page. On mobile, text auto-scrolls if message is longer than viewport width. |
| user | Click CTA button | Click optional CTA button in announcement strip to navigate to related page or perform action (e.g., "Learn more", "Register now"). |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |