Banners are visual componentsused to highlight key messages, announcements, and important content across websites and digital services. In the Sharjah Design System, banners are designed to be flexible, responsive, and consistent—helping teams communicate effectively while maintaining a unified visual language.
Purpose
Promote key initiatives or featured content
Communicate important announcements or alerts
Introduce pages or sections with strong visual context
Highlight campaigns, services, or time-sensitive messages
Avoid overusing banners, as excessive visual emphasis can reduce clarity and distract users from primary tasks.
Banner Types
1. Carousel Banner
Carousel banners are used to display multiple messages or visuals within the same space. They are commonly placed on homepages or landing pages to highlight featured services, campaigns, or announcements.
Key characteristics:
Supports images, titles, descriptions, and call-to-action buttons
Includes navigation controls (arrows or indicators)
Auto-rotation should be optional and accessible
Content must remain readable and clear in every slide
Best practices:
Limit the number of slides to avoid cognitive overload (max 4 slides)
Ensure sufficient contrast between text and background
Avoid critical information that requires guaranteed visibility
2. Inner Page Head Banner
Inner page head banners appear at the top of internal pages to introduce content and provide context. They typically include a page title, optional description, and supporting visuals.
Key characteristics:
Clearly identifies the page purpose
Supports breadcrumbs or secondary navigation when needed
May include background imagery or solid colour surfaces
Maintains consistent height and spacing across pages
Best practices:
Keep content concise and focused
Avoid excessive imagery that competes with page content
Ensure text remains readable on all screen sizes
3. Informational & Utility Banners
These banners are used to communicate specific messages such as notifications, promotions, or service-related information.
Common use cases:
Announcements and updates
Temporary notices or alerts
Campaign highlights
Informational messages
Best practices:
Use clear, concise messaging
Apply appropriate visual emphasis based on importance
Avoid obstructing core content or user flows
Accessibility Guidelines
Ensure sufficient colour contrast between text and background
All interactive elements (links, buttons, carousel controls) must be keyboard accessible
Provide alternative text for background images when relevant
Avoid auto-playing animations without user control
Responsive Behavior
Banners must adapt seamlessly across screen sizes:
Images scale proportionally without cropping key content
Text remains legible on small screens
Carousel controls remain accessible on touch devices
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
