Banner
Banners within web design refer to adhesive sections that display urgent or crucial information, offering a non-intrusive method to convey messages without overshadowing the primary content. These banners are particularly effective for time-sensitive notifications, promotions, or alerts that require immediate attention.
Introduction
The banner component emerges as a practical solution to the challenge of sticky, important and time-sensitive content. Banners serve as sticky elements strategically placed to provide essential notifications, announcements, or interactions without disrupting the overall user experience.
By being prominently positioned, often at the header or footer, banners ensure that urgent messages are promptly noticed while allowing users to engage with them at their convenience.
Visual representation
The following is a visual representation of the component in use along with it's code usage.
Code structure
The component is structured as follows:
<div class="aegov-banner banner-top">
<div class="container">
<div class="banner-content flex flex-wrap md:flex-nowrap items-center md:justify-center gap-3">
... The Notes ...
<a href="#" class="banner-link aegov-link link-underline">
... Action ...
<svg class="w-5 h-5 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</a>
</div>
</div>
</div>
Variations
Colored Banner - Dark Camel Background
Incorporating visual variety into the Banner component, the Colored Banner variation introduces a distinct and attention-grabbing design. With a background color reminiscent of dark camel, this variation stands out while harmonizing with the overall aesthetics of the website. The use of this variation can be particularly effective when conveying urgent messages or promotions that require immediate action.
<div class="aegov-banner banner-top bg-camel-600 border-camel-500">
<div class="container">
<div
class="banner-content text-camel-50 flex flex-wrap md:flex-nowrap items-center md:justify-center gap-3">
Upgrading your account to be used with UAE Pass is now active.
<a href="#"
class="aegov-link link-underline text-camel-50 hover:text-camel-100 focus-visible:ring-camel-400 focus-visible:ring-offset-camel-600">
Connect your account to UAE PASS
<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</a>
</div>
</div>
</div>
Header-Integrated Banner
The "Header-Integrated Banner" variation introduces a prominent banner element seamlessly integrated just below the website's header or navigation menu. This strategic positioning ensures that essential messages, announcements, or promotions are immediately visible to users without disrupting their interaction with the main content. By adopting this variation, websites can effectively deliver crucial information while maintaining a cohesive and engaging user experience.
<!-- Header goes here -->
<!-- Banner start -->
<div class="aegov-banner banner-top bg-aered-50 border-aered-500">
<div class="container">
<div
class="banner-content text-aered-600 flex flex-wrap md:flex-nowrap items-center md:justify-center gap-3">
Discover essential government services and stay informed about policies and initiatives. Your
gateway to efficient governance.
<a href="#" onclick="return false;"
class="aegov-link link-underline text-aered-600 hover:text-aered-700 focus-visible:ring-aered-400 focus-visible:ring-offset-aered-50">
Learn more
<svg class="link-icon rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</a>
</div>
</div>
</div>
Notice Banner - Secondary light
<div id="cookies-banner1" tabindex="-1"
class="aegov-banner banner-notice banner-bottom bg-slate-50 border-slate-700">
<div class="py-4 banner-content max-w-screen-lg">
<h2 class="mb-4 text-xl font-bold text-aeblack-800">
We use cookies to personalise this website
</h2>
<p class="font-normal text-aeblack-800 mb-0">
Our site enables script (e.g. cookies) that is able to read, store,
and write information on your browser and in your device. By using our
website, you're agreeing to the collection of data as described in our
Privacy Policy.
</p>
</div>
<div class="flex items-center flex-shrink-0">
<a href="" class="aegov-btn btn-secondary">Accept</a>
<a href="" class="aegov-btn btn-secondary btn-link">Deny</a>
</div>
</div>
Notice Banner - Primary light
<div id="cookies-banner2" tabindex="-1"
class="aegov-banner banner-bottom banner-notice bg-primary-50 border-primary-700">
<div class="py-4 banner-content max-w-screen-lg">
<h2 class="mb-4 text-xl font-bold text-primary-800">
We use cookies to personalise this website
</h2>
<p class="font-normal text-primary-800 mb-0">
Our site enables script (e.g. cookies) that is able to read, store,
and write information on your browser and in your device. By using our
website, you're agreeing to the collection of data as described in our
Privacy Policy.
</p>
</div>
<div class="flex items-center flex-shrink-0">
<a href="" class="aegov-btn btn-primary">Accept</a>
<a href="" class="aegov-btn btn-primary btn-link">Deny</a>
</div>
</div>
Dismissing a banner
Javascript requiredProvide the use with the ablity to dismiss an banner if the banner is temporary.
<div>
<div class="container">
<div id="toast-default" class="aegov-banner bg-slate-700 rounded-xl">
<div class="flex items-center justify-between gap-3">
<div class="banner-content text-slate-50 flex flex-col md:flex-row md:items-center gap-3">
We are participating at World Government Summit 2023
<a href="#" onclick="return false;"
class="aegov-link link-underline text-slate-50 hover:text-slate-100 focus-visible:ring-slate-400 focus-visible:ring-offset-slate-700">
Come join us
<svg class="link-icon rtl:-scale-x-100" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</a>
</div>
<button class="banner-dismiss text-slate-50" data-dismiss-target="#toast-default"
aria-label="Close">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
Behaviour
The Banner component exhibits specific behaviors that contribute to its effectiveness in communicating important information and interactions to users:
- Visibility: The Banner component is designed to be prominently visible when users visit a webpage. It appears at strategic locations such as below the header, within content, or in the footer. This ensures that users quickly notice and engage with the banner's content.
- Sticky Nature: Banners can have a sticky behavior, meaning they remain fixed at the top or bottom of the viewport as users scroll through the page. This ensures that the banner's content remains accessible without obstructing the main content.
- Interactive Elements: Depending on the banner's purpose, it may contain interactive elements such as buttons or links. These elements allow users to take immediate actions, such as dismissing the banner, accessing additional information, or adjusting their cookie preferences.
- Dismissal Options: Banners often provide users with the option to dismiss them. This could be achieved through a close button or a "Got it" link. Dismissing the banner may hide it for the current session or persistently across visits, depending on the banner's importance.
- Responsive Design: Banners are designed to be responsive, adapting to various screen sizes and devices. This ensures that users have a consistent experience regardless of whether they are using a desktop computer, tablet, or mobile phone.
- Timed Display: Dismissable banner allow users to close or hide them once they have read the content. A clear and easily identifiable "close" button or icon should be provided for this purpose.
Accessibility
Making the banner component accessible is crucial to ensure inclusivity and allow users of all abilities to comprehend and interact with the banner effectively. Here are some accessibility considerations for the banner component:
- Implement appropriate ARIA roles and attributes to identify the banner's purpose and state to assistive technologies. You must use the
` role="banner" `to indicate that the element represents an banner. - Use semantic HTML elements such as
<div>for the overall container and<p>for banner content to provide meaningful structure to assistive technologies. - Ensure that users can interact with the banner using only the keyboard. All interactive elements within the banner, such as the close button, should be focusable and operable using the "Enter" or "Space" keys.
- Manage focus appropriately to ensure that the keyboard focus is directed to the banner when it appears and returns to the expected location once the banner is dismissed.
- Test the banner with screen readers to verify that the content and dismiss buttons are announced correctly, and users can understand the context and purpose of the banner.
- When using the dismissable banner variation, ensure you add the
` aria-label="Close" `attribute to the icon that represents the dismissble trigger.
By adhering to accessibility best practices, you can create an inclusive and user-friendly component that caters to all users, including those with disabilities.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
Banners serve as dynamic communicators, strategically positioned to convey essential messages and foster meaningful interactions on websites. Their versatility makes them invaluable in a range of scenarios. Urgent Notifications find a perfect ally in banners, swiftly alerting users to critical information like maintenance schedules or unexpected service disruptions.
Another pivotal use case is Cookie Consent, wherein banners facilitate compliance with data privacy regulations.
Banners also shine in guiding users through Important Announcements, such as feature releases or significant updates, ensuring vital information is immediately apparent. Further, they effortlessly channel Call to Action initiatives, driving users toward specific actions like signing up, downloading resources, or participating in events.
Where to use a Banner?
Here are common use cases where an alert would be appropriate.
- Urgent Notifications: Banners are ideal for delivering time-sensitive information, such as maintenance alerts, system downtime, or emergency notifications. Placing a banner prominently ensures users are immediately informed about critical updates.
- Privacy Compliance: Banners play a pivotal role in ensuring compliance with privacy regulations. For instance, a banner can notify users about the website's use of cookies and provide options for consent and data management.
- Important Announcements: When there's important news, updates, or announcements that users need to know, banners can be positioned strategically to ensure maximum visibility. This could include changes in policies, upcoming events, or new product launches.
- Call to Action (CTA): Banners serve as effective CTAs by guiding users to take specific actions. Whether it's signing up for a newsletter, exploring a new feature, or downloading a resource, banners can prompt users to engage further with the website.
- Policy Changes: When there are updates or modifications to terms of use, privacy policies, or other legal documents, banners can inform users about these changes and direct them to review the updated information.
Spacing
Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards an alert.
- Always maintin a vertical padding of
1 remon the banner container. - Always maintin a horizontal padding of
0.75 remon the alert container. - If you are using the variation of an banner with an action, the spacing between the content and the action link must be
0.75 rem.
