Skip to content

Cards

Cards are just <article> elements. Add <header> and <footer> for structured content.

Card with header & footer

Card with header & footer

Article content goes here. The card adapts to its container width automatically.

<article>
  <header><strong>Card title</strong></header>
  <p>Article content goes here.</p>
  <footer>Last updated: today · <a href="#">Read more →</a></footer>
</article>

Minimal card

Minimal card — just an article element with no header or footer.

<article>
  <p>Minimal card — just an article element.</p>
  <div class="fap-cluster">
    <button>Action</button>
    <button data-outline>Cancel</button>
  </div>
</article>

Card grid

Card One

Cards inside a .fap-grid auto-wrap responsively.

Card Two

No media queries needed — the grid handles it.

Card Three

Each card fills equal space in the row.

<div class="fap-grid">
  <article>
    <header><strong>Card One</strong></header>
    <p>Content here.</p>
  </article>
  <article>
    <header><strong>Card Two</strong></header>
    <p>Content here.</p>
  </article>
</div>

Bare cards (data-bare)

Strip card chrome for media-forward grids — no border, padding, or background.

Thumbnail

How to build a CSS framework

12K views · 3 days ago
Thumbnail

Classless CSS explained

8.5K views · 1 week ago 
<article data-bare>
  <img src="thumbnail.jpg" alt="Thumbnail">
  <p><strong>Video title</strong></p>
  <small>12K views · 3 days ago</small>
</article>