Skip to main content

Feed hero item

Feed hero item is a single instance of 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

Minecraft characters adventuring.

Minecraft: Story Mode - A Telltale Games Series

The adventure of a lifetime in the world of Minecraft

Feed hero module in theme dark

Best practices

Feed hero item 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

  • The 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

Feed hero
Flipper
Image
Paragraph
Sequence indicator

Development

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

Code and preview

Feed hero item theme light

Placeholder with grey background and dimension watermark without any imagery

Lorem ipsum dolor

Consectetur adipisicing elit

<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>

Feed hero item theme dark

Placeholder with grey background and dimension watermark without any imagery

Lorem ipsum dolor

Consectetur adipisicing elit

<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>
            <p class="c-subheading">Consectetur adipisicing elit</p>
        </div>
    </div>
</section>