biofriction-wp-theme/node_modules/foundation-sites/docs/pages/card.md

title	description	video	sass	tags	flex
Card	Cards are a popular and flexible UI component.	OMwg8UsrLrM	scss/components/_card.scss	card	true

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.

Watch this part in video

<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>

Browser Bug (IE 11 - Flexbug): On IE 11, when using the card with image, you may see a lot of whitespace under each image that happens to match the original image size. The bug can be reproduced here on an IE11 browser. Use .card-image class to wrap your image to resolve this.

<div class="card-image">
  <img src="assets/img/generic/rectangle-1.jpg">
</div>

---

Card Divider

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

Watch this part in video

<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>

---

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.

Watch this part in video

<!-- 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.

Watch this part in video

<div class="grid-container">
  <div class="grid-x grid-padding-x small-up-2 medium-up-3">
    <div class="cell">
      <div class="card">
        <img src="assets/img/generic/rectangle-1.jpg">
        <div class="card-section">
        <h4>This is a row of cards.</h4>
          <p>This row of cards is embedded in an X-Y Block Grid.</p>
        </div>
      </div>
    </div>
    <div class="cell">
      <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="cell">
      <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>
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
  <div class="cell">
    <div class="card">
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <h4>This is a row of cards.</h4>
        <p>This row of cards is embedded in an Flex Block Grid.</p>
      </div>
    </div>
  </div>
  <div class="cell">
    <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="cell">
    <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>