Foundation Cards

Foundation provides card components for displaying content in a flexible container.

Basic Card

<div class="card" style="width: 300px;">
  <div class="card-section">
    <h4>Card Title</h4>
    <p>This is a basic card with some example text.</p>
    <a href="#" class="button primary">Learn More</a>
  </div>
</div>

Card with Image

Live Preview: Card with Image

Card Title

Some quick example text to build on the card content.

Foundation Code:

<div class="card" style="width: 300px;">
  <img src="/placeholder.jpg">
  <div class="card-section">
    <h4>Card Title</h4>
    <p>Some quick example text to build on the card content.</p>
  </div>
</div>

Card Divider

<div class="card" style="width: 300px;">
  <div class="card-divider">
    Featured
  </div>
  <div class="card-section">
    <h4>Special title treatment</h4>
    <p>With supporting text below as a natural lead-in.</p>
  </div>
  <div class="card-divider">
    <small>2 days ago</small>
  </div>
</div>

Card Sizing

<div class="grid-x grid-margin-x">
  <div class="cell small-4">
    <div class="card">
      <div class="card-section">
        <h5>Small Card</h5>
        <p>Compact card content.</p>
      </div>
    </div>
  </div>
  <div class="cell small-4">
    <div class="card">
      <div class="card-section">
        <h5>Medium Card</h5>
        <p>Regular sized card with more content.</p>
      </div>
    </div>
  </div>
</div>

Card Colors

<div class="primary card">
  <div class="card-section">
    <h4>Primary Card</h4>
    <p>This is a primary themed card.</p>
  </div>
</div>

<div class="success card">
  <div class="card-section">
    <h4>Success Card</h4>
    <p>This is a success themed card.</p>
  </div>
</div>

<div class="alert card">
  <div class="card-section">
    <h4>Alert Card</h4>
    <p>This is an alert themed card.</p>
  </div>
</div>

Card Layouts

<div class="grid-x grid-margin-x">
  <div class="cell small-4">
    <div class="card">
      <div class="card-section text-center">
        <h5>Product 1</h5>
        <p>$19.99</p>
        <button class="button primary">Add to Cart</button>
      </div>
    </div>
  </div>
  <div class="cell small-4">
    <div class="card">
      <div class="card-section text-center">
        <h5>Product 2</h5>
        <p>$24.99</p>
        <button class="button primary">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Up next: Foundation Accordion