Banner
The hero banner component provides a prominent page introduction with background images and various content overlay styles. Use banners to create visual impact, establish page context, and guide users toward key actions. The component supports multiple layout types, overlay colors, decorative elements, and interactive features like search fields and call-to-action buttons.
Do
- Use high-quality background images that support the page content and maintain visual clarity with text overlays.
- Choose appropriate overlay colors (grey or blue) to ensure sufficient contrast between background images and text content.
- Keep banner titles concise and descriptive — they should clearly communicate the page purpose or main message.
- Include lead text for context when the banner title needs additional explanation or supporting information.
- Test banner readability across different devices and screen sizes to ensure text remains legible.
- Use consistent banner types throughout your site — establish patterns for different page types and content categories.
- Include proper alt text for background images to support screen readers and accessibility.
- Choose meaningful decorative elements (curve or line illustrations) that complement your content theme.
Don't
- Don't use low-contrast color combinations — always ensure text meets WCAG accessibility standards against background images.
- Don't overcrowd banner content — limit to essential information that users need to understand the page purpose.
- Don't use generic or placeholder text — banner content should be specific and actionable for each page.
- Don't ignore mobile experience — test how banners display and function on smaller screens.
- Don't use decorative elements excessively — ornaments should enhance, not distract from the main content.
- Don't forget to optimize images — large background images can impact page load performance.
- Don't use banners without clear purpose — every banner should serve a specific communication or navigation goal.
- Don't mix banner types inconsistently — maintain visual hierarchy and user expectations across your site.
Overlay Banner
Standard overlay banner with background image and text overlay. Demonstrates the overlay type with grey background overlay for optimal text readability. Use this pattern for most page introductions where you want to combine visual impact with clear messaging.
Overlay with Buttons
Interactive overlay banner featuring call-to-action buttons. Demonstrates how to include call-to-action buttons within the banner overlay. Perfect for landing pages, campaign pages, or any content that requires immediate user engagement.
Boxed Text Banner
Banner with a contained text box overlay on a background image. The solid background colour of the content container protects against potential colour contrast issues with the text placed over the background image. Ideal for pages with a very pale background image, pages that would benefit stronger colour contrast, or want to create a more structured layout.
Overlay with Search
Overlay banner with integrated search functionality. Shows how to embed a search form directly in the banner for immediate user access to site content. Use for homepage banners or service directory pages where search is a primary user need.
Accessibility Best Practices
Screen Reader Support
- Descriptive page titles: Use clear, specific titles that describe the page content and purpose.
- ARIA labels for context: Banner content area includes
aria-label="Page introduction"to identify its purpose. - Proper heading hierarchy: Banner titles use appropriate heading tags (h1 for main pages) to maintain document structure.
- Alt text for images: Background images include descriptive alt text when they convey important information.
Keyboard Navigation
- Focusable interactive elements: All buttons, links, and form controls within banners are keyboard accessible.
- Logical tab order: Interactive elements follow natural reading order and visual layout.
- Skip navigation options: Users can skip banner content to reach main page content efficiently.
- Search form accessibility: Banner search forms include proper labels and keyboard shortcuts.
Visual Accessibility
- High contrast overlays: Grey and blue overlay options provide sufficient contrast ratios for text readability.
- Text shadows: Apply shadows to text on banners that use overlays to ensure the text has the required colour contrast.
- Responsive text sizing: Banner text scales appropriately across all device sizes and zoom levels.
- Focus indicators: Clear visual focus states for all interactive elements within banners.
- Color independence: Banner meaning and functionality don't rely solely on color distinctions.
Content Guidelines
- Action-oriented titles: Use compelling, descriptive titles that clearly communicate page purpose.
- Supportive lead text: Include brief explanatory text that provides context without overwhelming the design.
- Clear call-to-action text: Button and link text should be specific and describe the expected outcome.
- Consistent messaging: Maintain brand voice and terminology across all banner implementations.
Implementation Considerations
- Image optimization: Use responsive images with appropriate srcsets for different screen sizes and resolutions.
- Performance impact: Monitor banner loading times, especially with large background images.
- Content management: Ensure banner content can be easily updated through your CMS or content workflow.
- Responsive behavior: Test banner layouts across breakpoints to ensure content remains accessible and visually appealing.
ARIA Attributes in Use
aria-label="Page introduction"- Identifies the banner content area's purpose for screen readers.role="banner"- Applied automatically to banner landmark when appropriate.aria-describedby- Connects banner elements when additional context is needed.alt- Provides alternative text for background images when they convey important information.