CMS
Loading playground
Overview
BrandHero is the hero section for surfacing a single brand identity: a background image, the brand name, an optional description, and an optional brand logo. The colorMode prop (on-dark, on-light, plain) picks the right text and chrome treatment for the backdrop. Apply the .radius-contained utility on a padded parent to round the hero inside a container; leave it off for a flat, edge-to-edge layout.
Key Business & UX Benefits
- Gives every brand page a distinct, high-impact entry point, reinforcing brand equity across multi-brand and partner catalogues.
- One configurable hero ships across every brand landing page, so marketing scales coverage without commissioning bespoke designs.
- The
colorModeswitch keeps the brand name and description readable on light, dark, and plain backdrops without re-cutting assets per brand. - Editors swap hero media and copy per brand in Studio, freeing the design team for higher-impact work.
Feature List
- Background media, brand name, optional description, and optional brand logo in one hero block
- colorMode (on-dark, on-light, plain) picks the matching text and chrome treatment per backdrop
- Theme-driven default background art kicks in when no background image is provided
- Editors swap hero media and copy per brand in Studio without engineering involvement
- Apply .radius-contained on a padded parent for rounded corners, or leave it off for an edge-to-edge layout
API Reference
| Prop | Default | Type |
|---|---|---|
namerequired | string | |
colorModerequired | "plain" | "on-dark" | "on-light" | |
logo | ||
nameTag | h2 | TextGroupHeadingAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 2 more)Semantic HTML element for the name/heading (h1-h6 or div). Defaults to h2. |
nameColor | string | |
description | string | |
descriptionColor | string | |
background | ||
overlay | ImageContrastOverlayProps { variant, opacity } | |
sizing | "fill" | "keep-ratio" | |
fallbackColor | UserColor { dark, light } |