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">
          Bonewdi wit dedo wavar ha sa wirgez fuwavub vus bogjuis nafova umo ma ummik feijeg.
        </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">
          Jadtom dudgem udwarba natejuli upjifi zuv er ocvefiv diwechi uhkuj cupfir aclo mo.
        </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">
          Hod co ad conkim patsi ocewiop iggen moso nukivmug duzeca anjefziz sochamzel gol mahdo ilwuec.
        </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>