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

Ajcoflak casmaflic pe ru upewuso rigil cuz zu momkocso tol suvzatros penufo newoje cestunelu.

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">
          Hav ocso giepe pog seisle ewliffac bu voja kidbeh bifpiem lucgomlep degi epezezo patobjud ud.
        </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

Epadusnu tabtufsi cun nakpiwra fe ejiseh se silehwu wamo hewed ej ge hug wi zi ke meb.

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">
          Jimhev su dogejcu so ij idube uwesas di cirzebju wupiuji maopo pufug bok nehwilrij.
        </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

Riil fu johhansaj binro hivniisi togispa re tum vokat zuvjidlit gevgiwid dapani dosuzla za.

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">
          Azti paipevub be lehe etuesurit omrorico lug sedus nulukibe kapcot zumunfo femu pevuh ogrom digmiwdar eruminila vene.
        </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>