Vistaprint
styleKeysembeddedTextHero

Embedded Text Hero

The Embedded Text Hero is used whenever all the visible content of the hero is embedded in the image itself.

However, for accessibility and SEO reasons, we still to provide all that information (description, call to action, etc.) as visually hidden text, so the component includes sub-components for that information, and then hides those sub-elements on screens.

Example image
Share
Share
jsx
<div class="embedded-text-hero">
  <div class="embedded-text-hero-image">
    <img class="fluid-image" src="someurl" alt="localized alt text" />
    <!-- must be a Fluid Image -->
  </div>
  <div class="embedded-text-hero-contents visually-hidden">
    <div class="embedded-text-hero-title">Hero title here</div>
    <!-- can be an H* tag instead of div, 
        if appropriate for the page structure -->
    <p class="embedded-text-hero-description">Hero description here</p>
  </div>
  <a class="embedded-text-hero-link" href="someurl">
    <span class="visually-hidden">Call to Action</span>
  </a>
</div>

Components

EmbeddedTextHero

EmbeddedTextHero has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

EmbeddedTextHeroImage

EmbeddedTextHeroImage has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

EmbeddedTextHeroContents

EmbeddedTextHeroContents has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

EmbeddedTextHeroTitle

EmbeddedTextHeroTitle has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

EmbeddedTextHeroDescription

EmbeddedTextHeroDescription has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

EmbeddedTextHeroLink

EmbeddedTextHeroLink has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <component/>)

Guidelines

Designer Guidelines

  • Short, wide images may not look great on Extra-Small screens such as phones. You may want to consider providing an alternate image for Extra-Small screens, and having the page adaptively send that alternate image if the user's session is on a phone.

Developer Guidelines

  • Embedded Text Heroes should touch the edges of the browser window (as long as your screen width is less than 1920px), so they should not be used inside Bounded Content.

  • Embedded Text Heroes should use Fluid Image instead of Responsive Image; Responsive Images may not always properly crop or stretch.

SEO Considerations

  • If the title on the hero is the main title of the page, put it in a h1 tag. If it is not the page title, use whatever tag is appropriate for the page structure.

  • Like any image, Embedded Text Hero images need appropriate alt text about what's shown in the image.