Feature Card

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.

<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">
                Bog fakoru vafdok pinfal hidlu zilih getege nehopuzad buif tu dahubha gopum tifru rarkiwun habakooho gel viba.
              </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>
      

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.

<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">
                Rejhi lahu jehec uswol gikwa wotse juvemul ciba badim fesevozo da vuc ad zi rehisto.
              </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>
      

You can include an <img> with a class of FeatureCard-object within the aforementioned FeatureCard-figure to center it within the figure area.

<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">
                Goef dafujusu sotbi nivlak naf zifowiz zimovun di hus jiposep fukuga iv zocemo uf.
              </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>