<aside>
<img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Calls attention to an important message
</aside>
Feature banner guidance
- First impression—When placed at the top of a page, feature banners are your users' first impression.
- Important—Feature banners take up more space on a page than regular content, which makes the content inside stand out to the user.
- Differentiating—Feature banners can be used on the homepage and other high-level pages to make them stand out from the lower-level or more internal pages of a website.
- Opportunity for industry or program recognition—It may be beneficial to use the same colour or background image in feature banners across the site that represent the same thing. For example, an image of a barcode as the background of feature banners that contain a call to action to apply for a membership, or a GS1 Peach background for feature banners that link to information about Verified by GS1.
When to use
- To highlight important and relevant messaging
- To give users an understanding of what a page or feature does in a quick and efficient way
When to consider something else
- Internal or technical pages. For most pages, feature banners are too much.
- When a page already has one. Though having two feature banners on one page can work under certain circumstances, using more than one should be a conscious decision made after considering other options.
Best practices
- Feature banners are most impactful when the content within them is kept short and punchy
- Feature banners should be used strategically and not simply to add visual interest
- Feature banners should always be relevant to the content on the rest of the page
- Buttons in banners should directly relate to the banner's message.
Feature banner structure
The feature banner component is a flexible, styled container that can include any text styles, buttons and links from the rest of the design system. The styling of the feature banner itself consists of only the background and spacing between the banner's edge and the content within.
Width
There are two possible widths for a feature banner:
