Banner
A banner is a horizontal rectangle that serves to inform the user with important and relevant information.
Anatomy
Legend
- Banner Background
- Banner Icon
- Banner Text
- Button icon
Options
Banner Colors
All background colors are available to be used in the banner component.
Dismissable Button
The dismiss button can be toggled on or off.
Icons
Icons can be used to help supplment the message of the banner.
Behavior
Text overflow
Content that overflows the banner will not be cut off, but instead, the content will wrap and continue on the following line.
Active & Hover
The active and hover state is only applicable to the Button icon the banner itself has no hover or active state.
Usage guidelines
Accessibility
When the banner background is changed, the color of the text is not automatically adjusted. So it is the user's responsibility to ensure that contrast requirements meet WCAG 2.0 level AA.
Specs
Size
The banner will take 100% of its parent container width. The height is determined by the fixed padding, and if it has a Button icon.
Spacing
The banner has a fixed padding of 16px on all sides.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)