Card

An <article> is a card. A <header> or <footer> as a direct child becomes a full-width band with its own background and a border toward the body. Nothing else is needed.

<article>
  <header>Header</header>
  Body of the card.
  <footer>Footer</footer>
</article>

Header and footer are optional, and you can use either one alone.

<article>A card with only a body.</article>
<article>
  <header>Header only</header>
  Body text.
</article>

Cards in a grid#

Put cards in a .grid to place them side by side. The grid is part of the class build.

<div class="grid">
  <article>
    <header>One</header>
    First card.
  </article>
  <article>
    <header>Two</header>
    Second card.
  </article>
</div>

Cards in other places#

The same surface is used inside a modal, where the <article> is the dialog box, and inside a bare popover, where an <article> child turns the popover into a card (see Popover patterns). A card with aria-busy="true" shows a spinner, see Loading.

Customization#

--pico-card-background-color

var(--pico-background-color)

Card surface. Light and dark values come from light-dark().

--pico-card-border-color

var(--pico-muted-border-color)

Line between the body and the header or footer.

--pico-card-box-shadow

var(--pico-box-shadow)

Shadow around the card.

--pico-card-sectioning-background-color

light-dark(#f9fafb, #1d1f23)

Background of the header and footer bands.

--pico-block-spacing-vertical

calc(var(--pico-spacing) * 1.25)

Vertical padding and bottom margin.

--pico-block-spacing-horizontal

calc(var(--pico-spacing) * 1.25)

Horizontal padding.

--pico-card-border-radius

calc(var(--pico-border-radius) * 1.5)

Corner radius of the card, also applied to the header and footer ends. 1.5 times --pico-border-radius by default.