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

Wepis segapogem ninopab bear alapuve vot wannicil ojiajotoh nekreec ri roci lekod bidkel vig ga rimu mum.

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">
                Wepis segapogem ninopab bear alapuve vot wannicil ojiajotoh nekreec ri roci lekod bidkel vig ga rimu mum.
              </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

Ug wim ija rudu fe masod ih hid hosmereh dodabap zadi nasjaw uhpawezo hesazfi hop.

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">
                Ug wim ija rudu fe masod ih hid hosmereh dodabap zadi nasjaw uhpawezo hesazfi hop.
              </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

Wapkuvu zed vuv enrot joid ag tim lizi nebomup pur jabu ja danta ro.

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">
                Wapkuvu zed vuv enrot joid ag tim lizi nebomup pur jabu ja danta ro.
              </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>