Blog post card

A blog post card with gradient image area, meta line, title, excerpt, and read-more link — pure CSS.

Mar 18, 2026 CSS

Modern CSS patterns you should know in 2026

Container queries, cascade layers, and oklch() colours have changed how we write CSS. Here's what to adopt today.

Widely Supported

uino-jslayout

Quick implementation

.post-card {
  background: var(--card);
  border: 1px solid oklch(0.3 0.02 260);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.post-card__image {
  height: 10rem;
  background: linear-gradient(
    135deg,
    oklch(0.45 0.18 290),
    oklch(0.55 0.22 260)
  );
}

.post-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-card__meta {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  gap: 0.75rem;
}

.post-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.post-card__excerpt {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.post-card__link {
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.25rem;
}

.post-card__link:hover {
  text-decoration: underline;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS component library.

Goal: A blog post card component with image area, meta line, title, excerpt, and read-more link — no JavaScript.

Technical constraints:
- Card uses var(--card) background, a subtle oklch() border, border-radius, and overflow: hidden.
- Image area is a fixed-height div with a CSS gradient (oklch() values) as placeholder.
- Use flexbox (flex-direction: column) inside the card body for vertical rhythm.
- Meta line (date + category) uses a flex row with gap.
- Use oklch() for all color values, not hex or rgba().

Framework variant (pick one):
A) Vanilla CSS with BEM class names (.post-card, .post-card__image, .post-card__body, etc.).
B) React component — accept title, date, category, excerpt, href, and optional imageSrc as props.

Edge cases to handle:
- Long titles must not overflow — use a line-clamp or overflow-wrap: break-word.
- The read-more link must be the final focusable element in the card for logical tab order.
- If no image is provided, the gradient placeholder should still render at full height.

Return HTML and CSS.

Why this matters in 2026

Blog post cards are ubiquitous — every content site, portfolio, and news feed uses them. Getting the structure right matters: semantic HTML with an <article> wrapper, a clear heading hierarchy, and a real <a> for the read-more action all affect SEO and accessibility. A gradient placeholder replaces broken-image states with something intentional and on-brand.

The logic

The outer card is a flex column with overflow: hidden so the image area fills the top edge without needing negative margins. The image placeholder uses a diagonal linear-gradient between two oklch() values — easy to change per category by overriding the gradient inline. Inside .post-card__body, a flex column with gap handles all vertical spacing without any margins on individual children. The var(--accent) colour on the link provides a clear visual call-to-action without needing extra markup.

Accessibility & performance

Use <article> as the card wrapper — screen readers announce it as a discrete piece of content. The image placeholder should have role="img" and an aria-label describing the article thumbnail. Avoid making the entire card a link; instead, keep the <a> on the "Read more" text so users can distinguish individual interactive targets. The gradient is rendered purely by the GPU, adding zero network cost compared to a real image.