Feature Card

Based on the visual appearance of the ProductCard pattern but intended for showing secondary content callouts on the homepage.

Basic appearance includes tag, body content and call to action.

<a class="FeatureCard " href="">
  <div class="FeatureCard-main">
    <div>
        <h2>
          Feature Card Title
        </h2>
      <p class="FeatureCard-tag">
        Feature Card Tag
      </p>
    </div>
    <div class="FeatureCard-body u-spaceEnds02 u-spaceItems02">
        <p class="u-textShrink1">
          Gopsupaf higkahe fofiboz buerailo jezuwle ni uzonuc fob fu umi zejmozroh nik zutatupu cujpumu sel ufkatej.
        </p>
    </div>
    <p class="FeatureCard-action">
      Action
      <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon">
  <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
    </p>
  </div>
</a>

If the optional FeatureCard-figure element is included and it has a background-image specified inline, it will be shown "full-bleed" at a cinematic 2.4:1 aspect ratio _or_ a vertical layout depending on the viewport.

<a class="FeatureCard " href="">
    <div class="FeatureCard-figure"
      style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);">
    </div>
  <div class="FeatureCard-main">
    <div>
        <h2>
          Feature Card Title
        </h2>
      <p class="FeatureCard-tag">
        Feature Card Tag
      </p>
    </div>
    <div class="FeatureCard-body u-spaceEnds02 u-spaceItems02">
        <p class="u-textShrink1">
          Ifzumum zubpomvoj etezagdol surva momisge go puro tohozge vefet isir ticicta osumu.
        </p>
    </div>
    <p class="FeatureCard-action">
      Action
      <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon">
  <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
    </p>
  </div>
</a>

You can include an <img> with a class of FeatureCard-object within the aforementioned FeatureCard-figure to center it within the figure area.

<a class="FeatureCard " href="">
    <div class="FeatureCard-figure"
      >
        <img class="FeatureCard-object" src="/images/icons/badges/electric-start.svg" alt="">
    </div>
  <div class="FeatureCard-main">
    <div>
        <h2>
          Feature Card Title
        </h2>
      <p class="FeatureCard-tag">
        Feature Card Tag
      </p>
    </div>
    <div class="FeatureCard-body u-spaceEnds02 u-spaceItems02">
        <p class="u-textShrink1">
          Ka tueh vobo se ebuko anebizi in huw tof sofesided oki sacum da ric lugvacer wudizki.
        </p>
    </div>
    <p class="FeatureCard-action">
      Action
      <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon">
  <polygon points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
    </p>
  </div>
</a>