Cards: the article tag

A card is a block with a border or shadow that groups related content: a post teaser, a portfolio project, a pricing plan. In Pico a card is a plain <article> — the tag for a self-contained piece of a page from the tutorial. No classes needed.

A simple card

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<article>
  The gap property works in both flexbox and grid — you no longer need margin for the space between items.
</article>

The preview shows the text on a light block with a shadow and rounded corners. Pico gives <article> inner padding and a bottom margin, so several cards in a row do not stick together.

Header and footer

A <header> and <footer> inside <article> become strips at the top and bottom of the card with a different background and a dividing line:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<article>
  <header>
    <hgroup>
      <h3>A grid without media queries</h3>
      <p>March 12</p>
    </hgroup>
  </header>
  <p>How auto-fit and minmax choose the number of columns for the screen width.</p>
  <footer>
    <a href="#">Read more</a>
  </footer>
</article>

The heading with the date and the link at the bottom are separated from the text by slightly different strips. This is a ready post teaser for the blog home page.

A grid of cards

Cards fit nicely into the grid from the layout lesson. Give the image inside a card a width of 100% so it fills the card width:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 
<div class="grid">
  <article>
    <img src="/media/photo-400x250.jpg" alt="A coffee shop website on a laptop screen" style="width: 100%">
    <h4>Coffee shop website</h4>
    <p>A menu, a map and a table booking form.</p>
  </article>
  <article>
    <img src="/media/photo-400x250.jpg" alt="A photographer's gallery" style="width: 100%">
    <h4>Photographer portfolio</h4>
    <p>A gallery with genre filters.</p>
  </article>
</div>

Two project cards with an image, a heading and a description sit side by side on a wide screen and stack on a narrow one. In a real project, move an article img rule with 100% width into your own CSS file.

Common mistake

Replacing <article> with <div class="card"> out of Bootstrap habit. Pico has no card class, so the block stays without background and shadow. Even when you only want the card look, use <article> — or write your own class with styles.