Build a responsive CSS card grid with design tokens

Let the content determine the structure

Start with a section heading that explains the collection, then use an article for each service. The cards have short headings and distinct descriptions so readers can compare them without opening another control. This structure also gives assistive technology useful landmarks and headings; a generic clickable rectangle would communicate less.

Compose layout utilities

The sl-container class limits the overall measure. A stack creates vertical rhythm around the section heading and grid. The base sl-grid uses one column, while sl-md:cols-3 requests three columns at the core medium breakpoint. The gap utility controls the space between items without individual margins on every card. Keep the DOM order meaningful rather than using visual reordering to compensate for confusing source markup.

Try the working example

Edit the HTML or change preview width to explore the behavior.

Live preview

A small service collection

Plan

Decide what the page needs to communicate.

Design

Choose a readable structure and consistent tokens.

Build

Ship the CSS required by the actual content.

View HTML / PlaygroundHTML source

example.htmlHTML

<section class="sl-container sl-py-6 sl-stack sl-gap-6">
  <h2 class="sl-text-xl">A small service collection</h2>
  <div class="sl-grid sl-md:cols-3 sl-gap-6">
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-lg">Plan</h3>
      <p>Decide what the page needs to communicate.</p>
    </article>
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-lg">Design</h3>
      <p>Choose a readable structure and consistent tokens.</p>
    </article>
    <article class="sl-card sl-stack sl-gap-4">
      <h3 class="sl-text-lg">Build</h3>
      <p>Ship the CSS required by the actual content.</p>
    </article>
  </div>
</section>

HTML source · enable JavaScript for the playground17 lines · UTF-8

Customize semantic tokens

Cards inherit surface, text, border and radius tokens from their theme. Override those variables in your application stylesheet after loading StyloftCSS, and keep related foreground/background values together. For example, changing an accent may also require a different on-accent text color. Use the theme gallery to inspect pairs instead of assuming that a favorite color will have sufficient contrast.

Choose a loading strategy and verify reflow

The full core supplies this example. If you choose a standalone card pack instead, inspect its included helpers before adding further components inside the cards. A nested form or special animation may need its own CSS. Test a narrow viewport, long words and enlarged body text; the card grid should adapt while keeping the reading order. No component JavaScript is needed, but fetching records or filtering a live collection remains application behavior.

Check your result

Use the 375-pixel preview to verify a single readable column.
Add a fourth article and inspect the next row on desktop.
Try the light theme and check text and border contrast.

Browser reference: MDN documentation. See the project browser-support notes before depending on newer enhancements.