Skip to main content

Featured Card

Component status:Beta
With high visual emphasis, a Featured Card displays content and an action about a single subject.

A Featured Card is often used on a Landing page layout, such as a homepage, campaign page or section index page, but can be used simply to break up the monotony of long-form content.

Examples#

Right Image#

<div class="bux-featured-card bux-grid bux-grid--no-gutters">

<div class="bux-featured-card--card bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
<div class="bux-card bux-card--featured">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<div class="bux-card__content">

<h3 class="bux-card__heading">
<span>Card Heading</span>
</h3>

<div class="bux-card__body">
Cloud bread mixtape cornhole, forage godard organic retro knausgaard. Ethical small batch mumblecore drinking vinegar.
</div>
<button class="bux-button bux-button--alt">
Call to Action
</button>
</div>
</div>
</div>

<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
<img src="/img/location" alt="" />
</div>

</div>

Left Image#

Usage#

Dos#

  • Use to call attention to most important features among all content
  • Limit to one per page; use occasionally on pages without sidebars
  • Include a high-quality image
  • Strongly consider using the included Button as a call-to-action
  • Use the “right image” variant if the subject of the image faces left
  • Use the “left image” variant if the subject of the image faces right

Don’ts#

  • Don’t write multiple paragraphs into the body
  • If a high-visual emphasis is needed on a homepage; consider a Hero instead

Accessibility#

  • Make sure to write appropriate alternative text if including an image in your card
  • See the WebAIM website for more information on writing alternative text for images