Skip to main content

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

Multi-hero module

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.

Related

Feature
Feature group
Flipper
Image
Paragraph
Pivot
Sequence indicator

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>