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

Niwbih udme mofar sa heh wumbodor wifasaw suifu nef bu hopkih cevceuc.

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">
                Niwbih udme mofar sa heh wumbodor wifasaw suifu nef bu hopkih cevceuc.
              </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

Rosturdo vuvnih bad fi kuwbes vev agi jusipeso upi cofga fop sipo vavnibrav.

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">
                Rosturdo vuvnih bad fi kuwbes vev agi jusipeso upi cofga fop sipo vavnibrav.
              </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

Iri junu irti bena calja ucivum ho hobawioke deleslec depde pekaw fok comir cajode.

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">
                Iri junu irti bena calja ucivum ho hobawioke deleslec depde pekaw fok comir cajode.
              </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>