<h2 class="toc">Cards</h2>
{% apply view_source %}
<div class="card shadow">
  <div class="card-body">
    <h4 class="card-title">Card</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div><!-- .card-body -->
  <div class="card-footer">
    <small class="text-muted">Last updated 3 mins ago</small>
  </div><!-- .card-footer -->
</div><!-- .card -->
{% end %}

<h3>Card groups</h3>
{% apply view_source %}
<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little
        bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text.</p>
    </div>
  </div>
</div>
{% end %}

<h3>Card group spacing</h3>
<p>To add spacing between card groups, use `.ml-* border-left` on the second card group item onwards.</p>
{% apply view_source %}
<div class="card-group">
  <div class="card">
    <div class="card-body border-left">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text</p>
    </div>
  </div>
  <div class="card ml-2 border-left">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text</p>
    </div>
  </div>
  <div class="card ml-2 border-left">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Shot card text</p>
    </div>
  </div>
</div>
{% end %}

{% apply view_source %}
<div class="card shadow mt-3">
  <div class="card-body">
    <h4 class="card-title">Main card</h4>
      <div class="card-group">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">Short card text.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
  </div><!-- .card-body -->
</div><!-- .card -->
{% end %}

{% apply view_source %}
<div class="card shadow col-md-6 col-lg-3 mt-3">
  <div class="card-img-top">
    <div class="row">
      <div class="col-3 mt-3">
        <img src="team.svg" class="rounded" alt="Team image">
      </div>
      <div class="col-9">
        <h4>Abagael Enno</h4>
        <div class="card-subtitle mt-1 mb-1">aenno@gramener.com</div>
        <div class="card-subtitle mt-1 mb-1">Product Manager</div>
      </div><!-- .col-9 -->
    </div><!-- .row -->
  </div><!-- .card-img-top -->
  <div class="card-body">
    <table class="table table-sm table-bordered">
      <thead>
        <tr>
          <th class="text-center" scope="col"><small>Invite</small>  <div class="support-text text-info">13</div> </th>
          <th class="text-center" scope="col"><small>Pending</small> <div class="support-text text-danger"><i class="fa fa-circle"></i> 05</div> </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">
            <div scope="col"><small>Graph Title</small></div>
            <img width="100%" src="big-graph.png" alt="Large sample graph">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
{% end %}
