Featured Card
Component status:Ready
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 ImageFeatured Card Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action<div class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-right ">
<div class="bux-featured-card--wrapper 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">
<h2 class="bux-card__heading">
<span>Featured Card Heading</span>
</h2>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<a class="bux-button bux-button--alt" href="#">CTA test</a>
</div>
</div>
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
<img class="bux-image " src="/img/location" alt="" />
</div>
</div>
<div class="bux-featured-card bux-grid bux-grid--no-gutters {% if {{ image_position }} %} bux-featured-card--image-{{image_position}} {% endif %}">
<div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
{% include '@card' %}
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
{% include '@image' %}
</div>
</div>
#
Left ImageFeatured Card Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action<div class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-left ">
<div class="bux-featured-card--wrapper 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">
<h2 class="bux-card__heading">
<span>Featured Card Heading</span>
</h2>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<a class="bux-button bux-button--alt" href="#">CTA test</a>
</div>
</div>
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
<img class="bux-image " src="/img/location" alt="" />
</div>
</div>
<div class="bux-featured-card bux-grid bux-grid--no-gutters {% if {{ image_position }} %} bux-featured-card--image-{{image_position}} {% endif %}">
<div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
{% include '@card' %}
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
{% include '@image' %}
</div>
</div>
#
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
- Don't use 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