Cards

Cards should be used to display a group of similar items, each one containing an image, description or summary, and, if appropriate, a link

The background colour should chosen from the secondary background colours

placeholder image

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui officia est quia, voluptatem exercitationem iusto. Ex animi dignissimos eaque voluptatem?

Card Link
placeholder image

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui officia est quia, voluptatem exercitationem iusto. Ex animi dignissimos eaque voluptatem?

Card Link
placeholder image

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui officia est quia, voluptatem exercitationem iusto. Ex animi dignissimos eaque voluptatem?

Card Link

To use cards, copy the HTML and the card classes from the CSS in the codepen below, as well as the column layout classes from the spacing page of this style guide, and replace the content and column classes as needed. To add additional cards to the layout, add copies of the .card-container div and its contents.

See the Pen Cards by Tyson Foster (@Foster-Design-System) on CodePen.