Skip to main content

Feed hero

Feed hero is a more streamlined hero for scenarios where assets are pre-generated from a production workflow or when there is little to no ability to customize or generate the multiple images required for hero.

Example

Feed hero module

Best practices

Feed hero is best used when there is little control over the images for the Hero. For example, when working with images that have been mass converted or produced from a tool that does not allow for multiple crops and aspect ratios to ensure proper alignment. Feed hero offers one layout option for the content region which gives greater flexibility for the image, and no call to action as well.

Do

  • Each image should have enough clearance for the overlaid text, especially at VP3 and VP1 where spacing can be tight.
  • Keep heading and subheading text concise so it does not overlap the area of interest.
  • Keep text to one line at desktop sizes (VP4 and higher) so it can wrap to two lines at smaller VPs without truncating.

Don’t

  • Use an inappropriate theme, for example theme-dark when the vast majority of the image is light.

Related

Flipper
Image
Multi hero
Paragraph
Sequence indicator

Development

  • Schema definition: The feed-hero schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Feed hero theme light

<div class="m-feed-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="lightFeedHeroSlideOne" title="Slide one"></button>
            <button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="lightFeedHeroSlideTwo" title="Slide two"></button>
            <button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="lightFeedHeroSlideThree" 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="lightFeedHeroSlideOne" data-f-theme="light" class="f-active">
                    <section class="m-feed-hero-item theme-light">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Lorem ipsum dolor</h2>
                                </a>
                                <p class="c-subheading">Consectetur adipisicing elit</p>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="lightFeedHeroSlideTwo" data-f-theme="light">
                    <section class="m-feed-hero-item theme-light">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Quisque ligula est</h2>
                                </a>
                                <p class="c-subheading">Condimentum vel rhoncus at</p>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="lightFeedHeroSlideThree" data-f-theme="light">
                    <section class="m-feed-hero-item theme-light">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Suspendisse condimentum justo</h2>
                                </a>
                                <p class="c-subheading">Sit amet metus consectetur</p>
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Feed hero theme dark

<div class="m-feed-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="darkFeedHeroSlideOne" title="Slide one"></button>
            <button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="darkFeedHeroSlideTwo" title="Slide two"></button>
            <button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="darkFeedHeroSlideThree" 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="darkFeedHeroSlideOne" data-f-theme="dark" class="f-active">
                    <section class="m-feed-hero-item theme-dark">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Nulla facilisi</h2>
                                </a>
                                <p class="c-subheading">Ut ac turpis sagittis</p>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="darkFeedHeroSlideTwo" data-f-theme="dark">
                    <section class="m-feed-hero-item theme-dark">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Lorem ipsum dolor</h2>
                                </a>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="darkFeedHeroSlideThree" data-f-theme="dark">
                    <section class="m-feed-hero-item theme-dark">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Aliquam vestibulum</h2>
                                </a>
                                <p class="c-subheading">Adipisicing consectetur elt</p>
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Feed hero mixed theme

<div class="m-feed-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="mixedFeedHeroSlideOne" title="Slide one"></button>
            <button role="tab" aria-selected="false" aria-label="View slide two" aria-controls="mixedFeedHeroSlideTwo" title="Slide two"></button>
            <button role="tab" aria-selected="false" aria-label="View slide three" aria-controls="mixedFeedHeroSlideThree" 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="mixedFeedHeroSlideOne" data-f-theme="dark" class="f-active">
                    <section class="m-feed-hero-item theme-dark">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Pellentesque dignissim</h2>
                                </a>
                                <p class="c-subheading">Laoreet eleifend urna</p>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="mixedFeedHeroSlideTwo" data-f-theme="light">
                    <section class="m-feed-hero-item theme-light">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Sed iaculis sit</h2>
                                </a>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="mixedFeedHeroSlideThree" data-f-theme="dark">
                    <section class="m-feed-hero-item theme-dark">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1260x473" 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/1260x473" src="http://placehold.it/1260x473" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <a href="#">
                                    <h2 class="c-heading">Mathis ians malcolmous</h2>
                                </a>
                                <p class="c-subheading">Vehicula a lacus diam et</p>
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>