Card

A container with header, content, and footer sections. Uses BEM classes.

Basic card

Card content goes here. You can put forms, text, images, or any other content inside.

<article class="nano-card">
  <div class="nano-card__header">
    <h3 class="nano-card__title">Card title</h3>
    <p class="nano-card__description">A short description of this card.</p>
  </div>
  <div class="nano-card__content">
    <p>Card content goes here.</p>
  </div>
  <div class="nano-card__footer">
    <button class="nano-btn nano-btn--primary">Save</button>
    <button class="nano-btn nano-btn--outline">Cancel</button>
  </div>
</article>

Elevated

Elevated card with shadow, no border.

<article class="nano-card nano-card--elevated">
  <div class="nano-card__content">
    <p>Elevated card with shadow, no border.</p>
  </div>
</article>

Bordered

Bordered card with thicker border, no shadow.

<article class="nano-card nano-card--bordered">
  <div class="nano-card__content">
    <p>Bordered card with thicker border, no shadow.</p>
  </div>
</article>