Related Cards

A 3-up row of internal-link cards that keeps readers moving through your site.

Copied 0 times.

→

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a related content card row for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A section with a short h2 heading ("Keep reading", "Related", or my own), then exactly 3 cards in a row on desktop, stacked on mobile.
- Each card shows a title and a one-line description, text only, with a small arrow affordance in the corner.
- The entire card is one link (a single anchor wrapping the card), with the card title as the link's accessible name.

DATA
- Cards live in one config array (title, one-line description, URL, optional image path). Placeholder entries carry a clearly marked TODO to point them at my real internal pages.
- Card titles should describe the DESTINATION page's topic so the link makes sense out of context; add a comment saying generic titles ("Click here", "Read more") are not allowed.
- Fewer than 3 configured cards: render however many exist; zero = the section does not render.

BEHAVIOR
- Hover/focus lifts the card slightly (2-4px translate + shadow, 150ms); the whole card shows a visible focus ring when tabbed to.
- Internal links navigate in the same tab.

QUALITY
- Semantic markup: cards in a ul with li wrappers; card titles are h3s inside the anchor.
- Images (if shown) have a fixed 16:9 aspect ratio box so there is zero layout shift, are lazy-loaded, and get descriptive alt text from the config.
- Equal card heights via grid; description clamps to 2 lines.
- WCAG AA contrast; tap targets are the full card.

QUESTIONS
- Before you build, find or ask for: the real internal pages to link (titles, one-line descriptions, URLs). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

Related cards are the keep-reading row at the end of a page: three tidy cards pointing at your own related pages, each one a single big tap target. Readers who click deeper stick around, and pages that link each other help your whole site in search. It's the difference between a dead end and a next step.

Each card carries a title, a one-line description, and optionally a picture.
Titles must say what the destination page is about; Click here and Read more are banned by name.
The whole card is one big tap target, title, text, picture and all.
Fewer than three filled in shows what you have; none keeps the row invisible.
Descriptions trim neatly at two lines, so the cards always stay the same height.

How it works

1Choose plain text cards or cards with a picture on top of each.
2Copy the prompt, a copy-paste brief your AI can follow, into whichever AI you use.
3Your AI builds the row in your site's look: three equal cards on desktop, a neat stack on phones, every card the same height.
4Point each card at a real page of yours, with its title, one-line description, and address in the marked list.
5Write titles that name the destination's topic, so each card makes sense even to someone who just landed.
6Hover and tab across the finished row: every card should lift slightly, and the whole card, not just the title, should be the link.

What you can customize

What's on each card: text only keeps the row light and quick to load; adding a picture up top makes every card harder to scroll past.
Card shape, colors, and the little arrow adapt to your site automatically, because your AI builds the row right inside your own design, matched to your other cards.

You'll also like

Muted looping video

Your Big Headline

Call to actionposter + reduced-motion safe

Related Cards

Members only

What it does

How it works

What you can customize

You'll also like

Video Hero

Icon Slide Button

Footer Mega Section