include ./helpers

h1.example__header Cards

.row
  .column--quarter
    span.header--small Card
    p.content--small.
      Base component for displaying cards in a card list that is extended by profile-card, project-card, table-card. Contains standard formatting for the card's shadow, borders, corners, and padding, as well as for the title/name (interchangeable), a caption, a description, and an extra section that goes to the bottom right (usually for an icon or button).
  .column--three-quarter
    label.label Code Example
    +codeExample("html").
      <div class="card">
        <div class="card__name">New Card</div>
        <div class="card__caption">by Devin Frenze</div>
        <div class="card__description">This is an example of the default card.</div>
        <div class="card__extra">
          <div class="icon">
            <div class="icon-add"/>
          </div>
        </div>
      </div>
    label.label Result
    .card
      .card__name New Card
      .card__caption by Devin Frenze
      .card__description This is an example of the default card.
      .card__extra
        .icon
          .icon-add