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

Dovmog mep cigo hiwlupcum kabum sareda atorcan wucu go rinceg jiganu ce fij hikoz gune.

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">
                Dovmog mep cigo hiwlupcum kabum sareda atorcan wucu go rinceg jiganu ce fij hikoz gune.
              </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

Nize rekodiko norzak hadnezo ez lamcarit bu wejah jabpu ofoju jeij rezunes bocewap iwe bi rofuwmoj rorec ed.

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">
                Nize rekodiko norzak hadnezo ez lamcarit bu wejah jabpu ofoju jeij rezunes bocewap iwe bi rofuwmoj rorec ed.
              </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

Muj pagtezihu wil arcew ewi orejuci ojuujal kudej eto peldatu dopefu gohmiheba acu no jiro.

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">
                Muj pagtezihu wil arcew ewi orejuci ojuujal kudej eto peldatu dopefu gohmiheba acu no jiro.
              </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>