Cards

Basic example

<div class="card"><div class="body">Basic card example</div></div>

Card with heading

<div class="card">
  <div class="heading">Card heading without title</div>
  <div class="body">Card content</div>
</div>
<div class="card">
  <div class="heading"><h3>Card title</h3></div>
  <div class="body">Card content</div>
</div>

Card with footer

<div class="card">
  <div class="body">Card content</div>
  <div class="footer">Card footer</div>
</div>

Contextual alternatives

<div class="card primary">
  <div class="heading"><h3>Card title</h3></div>
  <div class="body">Card content</div>
</div>
<div class="card success">
  <div class="heading">Card title</div>
  <div class="body">Card content</div>
</div>
<div class="card info">
  <div class="heading">Card title</div>
  <div class="body">Card content</div>
</div>
<div class="card warning">
  <div class="heading">Card title</div>
  <div class="body">Card content</div>
</div>
<div class="card danger">
  <div class="heading">Card title</div>
  <div class="body">Card content</div>
</div>

With tables

<div class="card">
  <!-- Default card contents -->
  <div class="heading">Card heading</div>
  <div class="body">
    <p>
      Some default card content here. Nulla vitae elit libero, a pharetra augue.
      Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
      Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor
      id nibh ultricies vehicula ut id elit.
    </p>
  </div>
  <!-- Table -->
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

If there is no card body, the component moves from card header to table without interruption.

<div class="card">
  <!-- Default card contents -->
  <div class="heading">Card heading</div>
  <!-- Table -->
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

With list groups

<div class="card">
  <!-- Default card contents -->
  <div class="heading">Card heading</div>
  <div class="body">
    <p>
      Some default card content here. Nulla vitae elit libero, a pharetra augue.
      Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
      Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor
      id nibh ultricies vehicula ut id elit.
    </p>
  </div>
  <!-- List group -->
  <ul class="group">
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>