Cards

Composable cards for Copy, Newsletter, and Blank layouts. Styles live in scss/components/_card.scss with _slot.scss, _copy.scss, and form primitives. For overlay dialogs, see Modals; for inline feedback, see Alerts.

Card variants

Each variant sets a max width: card--copy (26rem), card--newsletter (32rem), card--blank (11.6875rem). Stack blocks in .card__slots (media, copy, fields, slots).

Blank card is an empty shell: dashed .slot placeholders show where you compose custom regions (header, body, actions) with Slots & layouts. It is not a fourth content pattern like Copy or Newsletter.

Copy card

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

Newsletter signup

Email

We will not share your address.

Subscribe

Blank card

Header

Content

Action

<article class="card card--copy">
  <div class="card__slots">
    <div class="copy-block">
      <h2 class="heading-h5">Title</h2>
      <p class="copy-block__text">Supporting copy.</p>
    </div>
    <button type="button" class="btn btn--primary">Action</button>
  </div>
</article>

Media ratios in cards

Pair .card__media with the same .media--* modifiers as on the Placeholder page. Placeholder SVGs use matching intrinsic dimensions (/media-placeholder/{w}/{h}/{variant}.svg) so the crop aligns with aspect-ratio. Vertical cards use $card-copy-gap (12px) between media and copy, then $slot-gap (24px) before the action; summary text uses body-small via .copy-block__text inside .card.

• Vertical (default), media stacks above copy in .card__slots.
• Horizontal, add card--horizontal and wrap copy + actions in .card__content; portrait media--3-4 or square media--1-1 work well beside text.

media--1-1 · 1:1

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

media--8-5 · 8:5

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

media--3-4 · 3:4

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

media--3-2 · 3:2

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

<article class="card card--copy">
  <div class="card__slots">
    <div class="card__media media media--8-5">
      <img src="/media-placeholder/480/300/1.svg" alt="" width="480" height="300" />
    </div>
    <div class="copy-block">…</div>
  </div>
</article>

Vertical and horizontal layouts

card--horizontal lays out .card__slots as a row: fixed-width media, flexible .card__content for copy and buttons. Wide ratios (media--8-5, media--3-2) suit vertical cards; tall or square ratios suit horizontal rows.

Vertical · media--8-5

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

Vertical · media--3-4

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

Horizontal · card--horizontal + media--3-4

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

Horizontal · media--1-1

Headline medium length

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus arcu sed ante consectetur porttitor. Aenean malesuada augue id pulvinar molestie.

Learn more

<article class="card card--copy card--horizontal">
  <div class="card__slots">
    <div class="card__media media media--3-4">
      <img src="/media-placeholder/360/480/2.svg" alt="" width="360" height="480" />
    </div>
    <div class="card__content">
      <div class="copy-block">…</div>
      <button type="button" class="btn btn--primary">Learn more</button>
    </div>
  </div>
</article>

Elevated card (header / body / footer)

.card--elevated removes outer padding and splits header, body, and footer with borders. Footer uses surface-muted. Pair with semantic regions and a visible title in the header.

<article class="card card--elevated">
  <header class="card__header">Card title</header>
  <div class="card__body">
    <p class="body-medium">Content</p>
  </div>
  <footer class="card__footer"><button type="button" class="btn btn--primary">Action</button></footer>
</article>

Related patterns

• Placeholder, copy blocks and .media ratios used in the Copy card.
• Slots & layouts, .slot and .slots-layout in the Blank card.
• Input fields, labels and fields in the Newsletter card.
• Modals, overlay dialogs when a card pattern is not enough.

Class reference

Customize (Sass)

1. 01

   Card widths and padding

   Override layout tokens before importing components.
   variables

   @use "pimentcss-design-system" with (
     $card-width-copy: 36rem,
     $card-width-horizontal: 42rem,
     $card-horizontal-media-width: 12rem,
     $card-padding: 1.25rem,
     $slot-gap: 1rem
   );

2. 02

   Rebuild CSS

   Run after editing _card.scss or related partials.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps