Article card

One article in a Card: a picture, a category and date, a linked title, its opening lines and the author at the foot.

Use to preview one article with its date, author and reading destination. Choose Article carousel when readers need to browse a collection horizontally.

Build with the LoamUI skill

Already added the LoamUI skill? Copy the prompt below. Your agent will check your project and help complete any missing setup before building.

Prompt

Use the LoamUI skill to build the “Article card” recipe for my application.

Add your content or describe what you want to change. New to the skill? Add it to your project.

Guide1 September 2026

Overwintering onions from sets

Sets planted in the last week of September root before the frosts and bulb up six weeks ahead of a spring planting. Which varieties hold through a wet winter, how far apart to set them, and what to do about the ones that bolt.

Rhiannon Vaughan

TSX

import { useId } from "react";import { Avatar, Badge, Card, Time } from "@loamui/core";import "./recipe.css";
export default function Recipe() {  const title = useId();  return (    <Card render={<article className="article-card" aria-labelledby={title} />}>      <div className="body">        <img          className="media"          src="https://picsum.photos/id/292/800/450"          alt=""          width="800"          height="450"          loading="lazy"          sizes="auto, 100vw"          srcSet="https://picsum.photos/id/292/400/225 400w, https://picsum.photos/id/292/800/450 800w"        />        <p className="meta">          <Badge.Root>            <Badge.Text>Guide</Badge.Text>          </Badge.Root>          <Time value="2026-09-01" locale="en-GB" dateStyle="long" />        </p>        <h3 id={title}>          <a href="/guides/overwintering-onions">Overwintering onions from sets</a>        </h3>        <p className="description">          Sets planted in the last week of September root before the frosts and bulb up six weeks          ahead of a spring planting. Which varieties hold through a wet winter, how far apart to          set them, and what to do about the ones that bolt.        </p>        <div className="foot">          <Avatar.Root aria-hidden>            <Avatar.Fallback>RV</Avatar.Fallback>          </Avatar.Root>          <address>            <a href="/growers/rhiannon-vaughan" rel="author">              Rhiannon Vaughan            </a>          </address>        </div>      </div>    </Card>  );}

CSS

@scope (.article-card) to ([class*="loam-"]) {  @layer loamui.components {    :scope {      container-type: inline-size;      display: block grid;      grid-template-columns: minmax(0, 1fr);      max-inline-size: 36rem;    }
    div.body {      display: block flex;      flex-direction: column;      font-size: var(--loam-text-md);      gap: var(--loam-space-2xs);      overflow-wrap: anywhere;    }
    img.media {      aspect-ratio: 16 / 9;      block-size: auto;      border-radius: var(--loam-radius-md);      inline-size: 100%;      object-fit: cover;    }
    p.meta {      align-items: center;      color: var(--loam-color-fg-muted);      display: block flex;      flex-wrap: wrap;      font-size: var(--loam-text-sm);      gap: var(--loam-space-2xs);      margin-block: 0;    }
    h3 {      margin-block: 0;    }
    p.description {      color: var(--loam-color-fg-muted);      margin-block: 0;    }
    div.foot {      --loam-avatar-size: 2rem;
      align-items: center;      display: block flex;      gap: var(--loam-space-2xs);      margin-block-start: auto;      padding-block-start: var(--loam-space-2xs);    }
    address {      font-size: var(--loam-text-sm);      font-style: normal;      font-weight: 600;    }  }}

Use this recipe

Copy Recipe.tsx and recipe.css side by side into a React 19 project. Install @loamui/core and load the core stylesheet at your application root, as shown in the installation guide. The component imports its own stylesheet.

Replace the sample article and author destinations with real routes. Keep heading levels appropriate to the surrounding page. Replace the decorative illustration and its responsive sources together; supply alt text if the image adds information beyond the title.

Uses

Design decisions

How this recipe answers the two pillars, and how it composes the primitives. These notes explain the design. The included tests cover structure and selected interactions; check contrast, keyboard behaviour and assistive technology support in your application.

Modern: The Card is rendered as an article named by its own heading, the author sits in an address element with rel="author", and the date is a time with a machine-readable dateTime. Layered, donut-scoped CSS preserves the Card surface while a measured inner column resolves fluid type and spacing locally; an auto margin aligns bylines in equal-height cards without truncating the description, and responsive, lazy images reserve their aspect ratio.
Accessible: The title is the link and the card is not, so the link's name is the title alone; the picture illustrates the title, so its alt is empty; the avatar is hidden because the name is printed beside it.
Composition: Card, Badge, Time and Avatar are used as they come; the example's rule stops at each root and only arranges the column between them.