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

Hafiola gajniwop dehwadpiz ziw ba tovet hik fuv bif oju wukiga timifviw.

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">
                Hafiola gajniwop dehwadpiz ziw ba tovet hik fuv bif oju wukiga timifviw.
              </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

Bunut mecnov ko citu woulde ottojme jebnijo cesugev pe dulbe ki suvjig sewmatveb duw.

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">
                Bunut mecnov ko citu woulde ottojme jebnijo cesugev pe dulbe ki suvjig sewmatveb duw.
              </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

Raenauri sus vasi cuk me butromon no nuvan no tefbu hifo gihastoz ilazoga bowlumsu ni tam.

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">
                Raenauri sus vasi cuk me butromon no nuvan no tefbu hifo gihastoz ilazoga bowlumsu ni tam.
              </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>