Skip to main content

Banner

Example
Live

The Banner example highlights key content and actions on a page.

Usage​

Banners provide a container for images, text and actions to visually grab a users attention. Their style and layout are not set in Chroma and should be based on their content and purpose.

When to use​

Use Banners to communicate call to actions, purpose of a page, or promote key content.

When to avoid​

Avoid overuse of Banners as it may dilute their impact and overwhelm users.

Do

  • Ensure the Banner's content is relevant and concise.
  • Ensure calls to action are clear and align with the message or task.
  • Only use graphic where they add value and support the message.
  • Consider responsiveness and adaptability across different screen sizes and devices.

Don't

  • Overcrowd Banners with excessive content or elements, as it can diminish its impact and overwhelm users.
  • Use Banners for non-critical information that may disrupt the user experience without adding significant value.