w8mngr | styleguide

Cards

For information that needs to be grouped and is independent, often sortable.

Card Header

Here's the card body

Card Header

Here's the card body

<div class="card">
  <div class="card-header">
    <h1>Card Header</h1>
  </div>
  <div class="card-body">
    <p>Here's the card body</p>
  </div>
</div>
<div class="card-colorful">
  <div class="card-header">
    <h1>Card Header</h1>
  </div>
  <div class="card-body">
    <p>Here's the card body</p>
  </div>
</div>

Full Card Example

<div class="activity card-colorful">
  <div class="card-top-meta">
    <a class="btn-icon" title="Edit this Activity" href="/activities/4/edit">
      <i class="fa fa-pencil"></i>
      <span class="screen-reader-text">Edit Activity</span>
    </a>
    <a class="btn-icon delete" title="Delete this Activity" href="/activity/4/delete">
      <i class="fa fa-times"></i>
      <span class="screen-reader-text">Delete Activity</span>
    </a>
  </div>
  <div class="card-header">
    <h2 class="card-title">
      <a href="/activities/4">Biking, Moderate Intensity</a>
    </h2>
    <h3 class="card-subtitle">
      Distance Exercise (e.g., running, biking)
    </h3>
  </div>
  <div class="card-body">
      <div class="muscle-groups-list">
        <h3 class="screen-reader-text">Muscle Groups</h3>
        <ul class="pill-list">
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Badductors%5D=1" title="View activities that target: adductors">adductors</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bcalves%5D=1" title="View activities that target: calves">calves</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bhamstrings%5D=1" title="View activities that target: hamstrings">hamstrings</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bglutes%5D=1" title="View activities that target: glutes">glutes</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bquads%5D=1" title="View activities that target: quads">quads</a></li>
        </ul>
      </div>
    <a class="btn small" href="/activities/4/activity_entries/20160801">
      <i class="fa fa-bolt" aria-hidden="true"></i>
      Log Activity <span class="screen-reader-text">Biking, Moderate Intensity</span>
    </a>
  </div>
</div>

<div class="activity card">
  <div class="card-top-meta">
    <a class="btn-icon" title="Edit this Activity" href="/activities/4/edit">
      <i class="fa fa-pencil"></i>
      <span class="screen-reader-text">Edit Activity</span>
    </a>
    <a class="btn-icon delete" title="Delete this Activity" href="/activity/4/delete">
      <i class="fa fa-times"></i>
      <span class="screen-reader-text">Delete Activity</span>
    </a>
  </div>
  <div class="card-header">
    <h2 class="card-title">
      <a href="/activities/4">Biking, Moderate Intensity</a>
    </h2>
    <h3 class="card-subtitle">
      Distance Exercise (e.g., running, biking)
    </h3>
  </div>
  <div class="card-body">
      <div class="muscle-groups-list">
        <h3 class="screen-reader-text">Muscle Groups</h3>
        <ul class="pill-list">
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Badductors%5D=1" title="View activities that target: adductors">adductors</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bcalves%5D=1" title="View activities that target: calves">calves</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bhamstrings%5D=1" title="View activities that target: hamstrings">hamstrings</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bglutes%5D=1" title="View activities that target: glutes">glutes</a></li>
          <li><a class="pill" href="?activity%5Bmuscle_groups%5D%5Bquads%5D=1" title="View activities that target: quads">quads</a></li>
        </ul>
      </div>
    <a class="btn small" href="/activities/4/activity_entries/20160801">
      <i class="fa fa-bolt" aria-hidden="true"></i>
      Log Activity <span class="screen-reader-text">Biking, Moderate Intensity</span>
    </a>
  </div>
</div>

Card Grids

For a grid of cards. Aligns them at 50% until the desktop breakpoint is reached. Assumes this grid is filling the full width of the viewport (or near enough to full).

Card Header

Here's the card body

Card Header

Here's the card body

<div class="card-grid">
  <div class="card">
    <div class="card-header">
      <h1>Card Header</h1>
    </div>
    <div class="card-body">
      <p>Here's the card body</p>
    </div>
  </div>
  <div class="card-colorful">
    <div class="card-header">
      <h1>Card Header</h1>
    </div>
    <div class="card-body">
      <p>Here's the card body</p>
    </div>
  </div>
</div>

Card Meta

For options regarding the editing or deletion of a card.

Card Header

Here's the card body

<div class="card-colorful">
  <div class="card-top-meta">
    <a href="#" class="btn-icon">
      <i class="fa fa-pencil" aria-hidden="true"></i>
      <span class="screen-reader-text">Edit This Card</span>
    </a>
    <a href="#" class="btn-icon delete">
      <i class="fa fa-times" aria-hidden="true"></i>
      <span class="screen-reader-text">Delete This Card</span>
    </a>
  </div>
  <div class="card-header">
    <h1>Card Header</h1>
  </div>
  <div class="card-body">
    <p>Here's the card body</p>
  </div>
</div>