---
title: Cards
description: A card is a flexible and extensible content container. The card component allows a visitor to quickly scan a page to find a specific piece of information. Additionally, multiple cards can be used to facilitate the understanding of a group of information.
foundation: http://foundation.zurb.com/sites/docs/card.html
sass: ./scss/_cards.scss
---

## How to Use

The card component contains other style guide components.  
Below is a list of possible components to include, depending on the information you are chunking in a card. Use elements sparingly.
* Label
* Image
* Color
* Date
* Headline
* List
* Descriptive Copy
* Links
* Button(s)

## Default Card

The `.card` is broken up into two sections, the `.card-header` containing its title, and the `.card-section`, 
  containing its main content and (optional) interactive elements/calls to action.

```html_example
<div class="medium-5">
    <div class="card">
        <div class="card-header">
            Default Card
        </div>
        <div class="card-section">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
            quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
            eget elit non sodales.</p>
        </div>
    </div>
</div>
```


<hr />

## Colored Card

Color is added by using existing [background](colors.html#background-color) and [text](colors.html#font-color) color classes.

Color combinations are limited by accessibility restrictions.

```html_example
<div class="medium-5">
    <div class="card primary-background">
        <div class="card-header white-color">
            Same background
        </div>
        <div class="card-section white-color">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
            quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
            eget elit non sodales.</p>
        </div>
    </div>
</div>
```

```html_example
<div class="medium-5">
    <div class="card">
        <div class="card-header yellow-green-background white-color">
            Different colors
        </div>
        <div class="card-section">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
            quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
            eget elit non sodales.</p>
            <p><button class="button">Hit me</button></p>
        </div>
    </div>
</div>
```

<hr />

## Image Card

An image can be included in the header with default card section styling. The specific image would need to be defined in your
stylesheet, in this case, the `sustainability` class sets `background-image: url("/images/Home_Module_Sustain.jpg");`

This examples illustrates how the use of an image can draw attention to a new collection using only the following elements

* Label
* Image
* Color
* Descriptive Copy

```html_example
<div class="medium-5">
    <div class="card-image">
        <div class="card-header sustainability">
            Image Card
        </div>
        <div class="card-section">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et purus semper, accumsan
            quam eget, ultrices mi. Nam ut vehicula nisl, quis vestibulum lacus. Vestibulum dignissim
            eget elit non sodales.</p>
        </div>
    </div>
</div>
```

<hr />

## Guidelines
1. Be sure to confine cards within a given arrangement with `.columns` and pay attention to their resizing behavior 
   given their [spacing](/styleguide/spacing.html).
1. Use [colors](/styleguide/colors.html) to visually group similar or related cards.
1. When using an image, be sure to set the background color to something similar/complimentary to soften impact of page load.

## Accessibility 
1. Be careful to use the heading (`h1`, `h2`, `h3`, `h4`) that fits best semantically within the structure of your page.
1. When combining colors for background and font make sure there is a contrast ratio of 4.5:1