Github Repo v1.0.1

Cards


The .card element is a container with a shadow, a border, a radius, and padding.

Examples

Lorem ipsum ... nostrud exercit.

<div class="card">
  <p>Lorem ipsum ... nostrud exercit.</p>
</div>

Are you sure?

You are going to delete a fictional item.

<div class="card">
  <header>
    <h4>Are you sure?</h4>
  </header>
  <p>You are going to delete a fictional item.</p>
  <footer class="is-right">
    <a class="button primary">Destroy</a>
    <a class="button">Cancel</a>
  </footer>
</div>

Customize

Copy these styles for new projects to customize styling.

/* Card Component */
.card {
  background: #fff;
  padding: 1rem 2rem;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}