Multi hero
Multi hero provides a way to showcase and persist several key products or services together in the hero position without using a carousel on desktop viewports. This allows the items to be displayed on page load and accelerates the visibility at the cost of reduced sizing for the secondary items.
Example
Best practices
Multi hero is best used when there are three heroic items that should be showcased together. For example, promoting a family of products or a series of games. When possible, avoid grouping types of items that don't seem to be related. Aim for a shared concept among the three items to make the multi hero more effective.
Do
- Use the same theme (light or dark) for all three items.
- Each image should have enough clearance for the overlaid text, especially at VP3 and VP1 where spacing can be tight.
- Be concise in the heading and subheading so that text does not overlap the area of interest.
Don’t
- Avoid odd angles for products when positioned together. Follow our guidance and best practices for imagery.
- Do not mix themes among the three items.
Options
- Masks: A gradient overlay can be applied over pictures through the use of maskings.
Option | Result |
---|---|
f-mask-95 |
Applies a 95% opacity gradient overlay over the multi-hero-item image. |
Development
- Schema definition: The multi-hero schema defines the acceptable configurations, requirements, and options for each module.
Code and preview
Theme: Light
<div class="m-multi-hero">
<div class="c-carousel f-multi-slide" role="region" aria-label="Label">
<div class="c-sequence-indicator" role="tablist">
<button role="tab" aria-selected="true" aria-label="View slide one" aria-controls="lightMutliHeroSlideOne" title="Slide one"></button>
<button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="lightMutliHeroSlideTwo" title="Slide two"></button>
<button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="lightMutliHeroSlideThree" title="Slide three"></button>
</div>
<button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
<button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="lightMutliHeroSlideOne" data-f-theme="light" class="f-active" role="tabpanel">
<section class="m-multi-hero-item theme-light f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/1066x600" media="(min-width: 1779px)">
<source srcset="http://placehold.it/1066x600" media="(min-width:1400px)">
<source srcset="http://placehold.it/930x523" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/930x523" src="http://placehold.it/930x523" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
<p class="c-subheading">Subheading</p>
</div>
</div>
</section>
</li>
<li id="lightMutliHeroSlideTwo" data-f-theme="light" role="tabpanel">
<section class="m-multi-hero-item theme-light f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/533x300" media="(min-width: 1779px)">
<source srcset="http://placehold.it/533x300" media="(min-width:1400px)">
<source srcset="http://placehold.it/465x262" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/465x262" src="http://placehold.it/465x262" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
</div>
</div>
</section>
</li>
<li id="lightMutliHeroSlideThree" data-f-theme="light" role="tabpanel">
<section class="m-multi-hero-item theme-light f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/533x300" media="(min-width: 1779px)">
<source srcset="http://placehold.it/533x300" media="(min-width:1400px)">
<source srcset="http://placehold.it/465x262" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/465x262" src="http://placehold.it/465x262" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
</div>
</div>
</section>
</li>
</ul>
</div>
</div>
</div>
Theme: Dark
<div class="m-multi-hero">
<div class="c-carousel f-multi-slide" role="region" aria-label="Label">
<div class="c-sequence-indicator" role="tablist">
<button role="tab" aria-selected="true" aria-label="View slide one" aria-controls="darkMutliHeroSlideOne" title="Slide one"></button>
<button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="darkMutliHeroSlideTwo" title="Slide two"></button>
<button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="darkMutliHeroSlideThree" title="Slide three"></button>
</div>
<button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
<button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="darkMutliHeroSlideOne" data-f-theme="dark" class="f-active" role="tabpanel">
<section class="m-multi-hero-item theme-dark f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/1066x600" media="(min-width: 1779px)">
<source srcset="http://placehold.it/1066x600" media="(min-width:1400px)">
<source srcset="http://placehold.it/930x523" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/930x523" src="http://placehold.it/930x523" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
<p class="c-subheading">Subheading</p>
</div>
</div>
</section>
</li>
<li id="darkMutliHeroSlideTwo" data-f-theme="dark" role="tabpanel">
<section class="m-multi-hero-item theme-dark f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/533x300" media="(min-width: 1779px)">
<source srcset="http://placehold.it/533x300" media="(min-width:1400px)">
<source srcset="http://placehold.it/465x262" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/465x262" src="http://placehold.it/465x262" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
</div>
</div>
</section>
</li>
<li id="darkMutliHeroSlideThree" data-f-theme="dark" role="tabpanel">
<section class="m-multi-hero-item theme-dark f-mask-95">
<picture class="c-image">
<source srcset="http://placehold.it/533x300" media="(min-width: 1779px)">
<source srcset="http://placehold.it/533x300" media="(min-width:1400px)">
<source srcset="http://placehold.it/465x262" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x608" media="(min-width:768px)">
<source srcset="http://placehold.it/767x430" media="(min-width:540px)">
<source srcset="http://placehold.it/539x304" media="(min-width:0)">
<img srcset="http://placehold.it/465x262" src="http://placehold.it/465x262" alt="Placeholder">
</picture>
<div>
<div>
<a href="#">
<h2 class="c-heading">Heading</h2>
</a>
</div>
</div>
</section>
</li>
</ul>
</div>
</div>
</div>