Foundation
Jump to Nav

# Card

Cards are a popular and flexible UI component.

## Basics

A card is just an element with a `.card` class applied. You can put any kind of content inside. Make sure you wrap your content in a `.card-section` element in order to achieve the traditional card look.

A card container has no padding, allowing you to place full-bleed images inside. Use the `.card-divider` and `.card-section` classes to sub-divide a card.

    <div class="card" style="width: 300px;">
      <div class="card-divider">
        This is a header
      </div>
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <h4>This is a card.</h4>
        <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
    </div>

This is a header

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

### Card Divider

You can also include a `.card-divider` element as a title, footer or to break up content.

    <div class="card" style="width: 300px;">
      <div class="card-divider">
        <h4>I'm featured</h4>
      </div>
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <p>This card makes use of the card-divider element.</p>
      </div>
    </div>

#### I'm featured

This card makes use of the card-divider element.

### Images

Images play nicely with cards. Simply include one outside of the `.card-section` element to span nicely to the edges. Or move the image inside the `.card-section` to have padding around the image.

    <!-- image has no padding -->
    <div class="card">
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <p>This is a simple card with an image.</p>
      </div>
    </div>

    <!-- image has padding -->
    <div class="card">
      <div class="card-section">
        <img src="assets/img/generic/rectangle-1.jpg">
      </div>
      <div class="card-section">
        <p>This is a simple card with an image inside a `.card-section`.</p>
      </div>
    </div>

This is a simple card with an image.

This is a simple card with an image inside a `.card-section`.

    <div class="card">
      <div class="card-section">
        <p>Images work just fine below the content too!</p>
      </div>
      <img src="assets/img/generic/rectangle-1.jpg">
    </div>

Images work just fine below the content too!

## Sizing

You can either set the width of cards with custom css or add them into the Foundation grid.

    <div class="row small-up-2 medium-up-3">
      <div class="column">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="medium-4 columns">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
      <div class="medium-5 columns">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
      <div class="medium-3 columns">
        <div class="card">
          <img src="assets/img/generic/rectangle-1.jpg">
          <div class="card-section">
            <h4>This is a card.</h4>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
          </div>
        </div>
      </div>
    </div>

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

#### This is a card.

It has an easy to override visual style, and is appropriately subdued.

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$card-background` | Color | `$white` | Defualt background color.
`$card-font-color` | Color | `$body-font-color` | Default font color for cards.
`$card-divider-background` | Color | `$light-gray` | Default background.
`$card-border` | List | `1px solid $light-gray` | Default border style.
`$card-shadow` | List | `none` | Default card shadow.
`$card-border-radius` | List | `$global-radius` | Default border radius.
`$card-padding` | Number | `$global-padding` | Default padding.
`$card-margin` | number | `$global-margin` | Default bottom margin.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### card-container

    @include card-container($background, $color, $margin, $border, $radius, $shadow);

Adds styles for a card container.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$background` | Color | `None` | Background color of the card.
`$color` | Color | `None` | font color of the card.
`$margin` | Number | `None` | Bottom margin of the card.
`$border` | List | `None` | Border around the card.
`$radius` | List | `None` | border radius of the card.
`$shadow` | List | `None` | box shadow of the card.

#### card-divider

    @include card-divider;

Adds styles for a card divider.

#### card-section

    @include card-section;

Adds styles for a card section.