Cards

Atoms

Card Description

Sub Title

Title

Sub Title

Title

See code

<div class="card__description">
  <small>Sub Title</small>
  <h5>Title</h5>
</div>

<div class="card__description">
  <small>Sub Title</small>
  <h5>Title</h5>
  <div class="card__actions">
    <button class="primary small pill">Button 1</button>
    <button class="blue small pill">Button 2</button>
  </div>
</div>

Molecules

Cards

Sub Title

Title

Sub Title

Title

See code

<div class="card"> <!-- <img> goes here --> </div>

<div class="card">
  <!-- <img> goes here -->
  <div class="card__description">
    <small>Sub Title</small>
    <h5>Title</h5>
  </div>
</div>

<div class="card">
  <!-- <img> goes here -->
  <div class="card__description">
    <small>Sub Title</small>
    <h5>Title</h5>
    <div class="card__actions">
      <button class="primary small pill">Button 1</button>
      <button class="blue small pill">Button 2</button>
    </div>
  </div>
</div>

Sub Title

Title

Sub Title

Title

See code

<div class="card large"> <!-- <img> goes here --> </div>

<div class="card large">
  <!-- <img> goes here -->
  <div class="card__description">
    <small>Sub Title</small>
    <h5>Title</h5>
  </div>
</div>

<div class="card large">
  <!-- <img> goes here -->
  <div class="card__description">
    <small>Sub Title</small>
    <h5>Title</h5>
    <div class="card__actions">
      <button class="primary small pill">Button 1</button>
      <button class="blue small pill">Button 2</button>
    </div>
  </div>
</div>

Templates

Main Course

Big Burger

Main Course

Big Burger

Main Course