<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>

Inspect on Sketch Cloud →

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7de6457e-b32d-43fe-ad0e-8e58dba7db20/feature-banner-overview.png

Feature banner guidance

  1. First impression—When placed at the top of a page, feature banners are your users' first impression.
  2. Important—Feature banners take up more space on a page than regular content, which makes the content inside stand out to the user.
  3. 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.
  4. 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

When to consider something else

Best practices

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.