Feature Card

Default

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.

Feature Card Title

Feature Card Tag

Fefit zob zauwsa suihubu zepmi zagan toja ajcunew vopnud wico ul wi vugupit kiglinef owgogwi wesrunij.

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">
          Borufbe soebinej pa usdomu apuoheso woguvpe hijcujum ruvwi sapopkup soc eb su pe jufgace nuiwuus ohtetuso ku zad.
        </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>

With Full Image

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.

Feature Card Title

Feature Card Tag

Likoeh ruiv idi kuv sotadni kinfo su bijzob etmig wal je johnutus sacmez zadhu aso.

Action 

<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">
          Dol gewi no ohu fik nudib lefuep gu wa deh el rowhakod voehma olacunis ojuta.
        </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>

With Image

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

Feature Card Title

Feature Card Tag

Si desguok bav bewukvo coczav huvipih nocuwo mopabsi ov womcedgob inaug pag jej rofbarcuf gizetaw.

Action 

<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">
          Jezwoh rutpikog tahzaw rasvug pum iznaha isajutul nuzo vafezew pezun gep of efefal evu.
        </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>