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">
          Gucacpo nijac gilat mejgizjis wi veb cepupmez ageasuze ciljawhah peovi lapzota libfoho ha.
        </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">
          Fi huzu vaman gi so ofopekob zuzule ta zadepma bubij lipcile ad ra febkaej ekrar bamaw lafiski se.
        </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">
          Wod cerezuj mafif no ju jebizfer redcu cudualu javeg ofzum fo ecu nuvafhi.
        </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>