Feature Cards

View SiteImprove Policy for This Pattern

A Feature Card (formerly known as Content Box #3) is a flexible component used for building an individual block of content around one idea or "feature." Multiple cards can be used together to describe a variety of features.

Each card includes the option of using:

an icon (or image)
a heading
descriptive copy
a link

As a link:

The Job Skills You Need

Go from “higher ed” to “hired” with hands-on training that builds job-ready skills. You’ll learn from industry professionals in a small, supportive environment.

Not as a link:

The Job Skills You Need

Go from “higher ed” to “hired” with hands-on training that builds job-ready skills. You’ll learn from industry professionals in a small, supportive environment.

Basic Code and Classes:

<div class="feature-card bg-cprimary">
    <a href="#">
        <div class="cb-mainico">
            <span aria-hidden="true" class="ico fas fa-briefcase"></span>
        </div>
        <h3 class="cb-title">The Job Skills You Need</h3>
    </a>
    <p>Go from ... environment.</p>
</div>

.feature-card - applied to the containing <div>
Usually a Feature Card is used to link to another page, but the <a> element can be removed altogether if no link is needed
.cb-mainico - applied the child <div> where the icon will appear (to use an image instead, see below)
.cb-title - applied the element (usually a heading element) to serve as the title of the card (for additional styling options, you can apply any of the CB Titles in the Pegasus heading specifications)
Feature Cards can be used at any width; simply wrap component within a sized <div>, or any bootstrap column

Style This Component

Notice how variations to the layout above can be made by customizing individual USE Framework elements like the following:

The use of a shadow on the card (apply to .feature-card)
The color of the background of the card (apply to .feature-card; .bg-cprimary is used in this example)
The size and style of the heading (h2.cb-title is used in this example)

Accessibility Note!

The above example uses an <h3> but any of the heading elements can be used as long as it constitutes semantic code. The .cb-title class will always control the size and weight of that element.
If there is no descriptive copy beneath the title, we recommend using the <span> element instead.

Styles and Variations

Style Note: Notice how variations to the layouts below can be made by customizing individual USE Framework elements like the following:

The use of a shadow on the icon circle/square (apply to .cb-mainico) or on the image (apply to img.cb-mainimg)
The color of the icon circle/square (apply to .cb-mainico)
The size and style of the headings (h2.cb-title is used in this example)