Blog Card CSS

How the Blog Card Builder works

Blog card CSS: the parts of a card

A post card is a summary that persuades someone to click. The generated markup puts the parts in reading order — image, metadata, title, excerpt, author — and wraps everything in one <a> so the entire card is clickable without any JavaScript or nested-link hacks.

One link, not several. The temptation is to link the image, the title and a "read more" button separately. That creates three tab stops per card for keyboard users and three identical announcements for screen readers. Wrapping the card in a single anchor gives one stop and one clear label — the heading text — while keeping the whole surface clickable. The link's default underline is removed on the card and color: inherit keeps text in the card colour.

Vertical or horizontal. Vertical cards stack image over text and belong in a grid of two or three columns; the width slider sets their maximum width. Horizontal cards put the image in a fixed-width left column and suit single-column lists, sidebars and "related posts" rows. The horizontal version includes a breakpoint that stacks it below 600px, because a 220px image next to 150px of text is not a layout anyone wants on a phone.

The image. The <img> has aspect-ratio: 16 / 9 and object-fit: cover, so covers of any proportion fill the slot without stretching and the card height is stable before the image loads. The preview paints a gradient where the photo would be. The alt is empty because the image is decorative here — the heading already says what the post is — and an empty alt stops screen readers reading a filename.

Metadata row. Category tag, date and read time sit on one line at reduced opacity. The tag is a pill in the accent colour so it reads as a label. Read time is optional but consistently increases click-through on long-form content because it sets expectations.

Clamped excerpt. The excerpt is limited to a set number of lines with -webkit-line-clamp, which every current browser supports despite the prefix. This keeps cards in a row the same height regardless of excerpt length. Three lines is the usual sweet spot; one line works for dense lists.

Author line pinned to the bottom. margin-top: auto on the author row pushes it to the bottom of the card body, so in a grid where cards stretch to equal height the author sits on the same baseline across the row. The avatar is initials on the accent colour; swap the span for an <img> with the same size if you have author photos.

Dates. Wrap the date in <time datetime="2026-09-14"> in production so it is machine readable. The generator keeps it as plain text so you can type any format.

Related tools