Stats preview card

A marketing-style stats card with a two-column layout at desktop — image on one side, content on the other — that collapses to a single column on mobile.

The Challenge

Build a card component where the image and text sit side-by-side on desktop, with the image taking roughly half the width. On mobile, the image moves above the text. The image should fill its column completely without distortion.

Requirements:

• Two-column layout at desktop, one-column at mobile
• Image fills its container (no white space, no distortion)
• Colored overlay on the image (purple tint)
• Stats row with three figures spaced evenly

What I Learned

The image overlay was the interesting part. Instead of a CSS filter (which affects the whole element including text), you can use a pseudo-element positioned over the image:

.image-wrapper {
  position: relative;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(277, 64%, 61%);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

mix-blend-mode: multiply gives a more natural tint than a flat overlay.

Two-Column Layout

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 680px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Why It Matters

Side-by-side image + content layouts appear constantly in marketing and editorial design. Understanding how to handle image overflow and aspect ratios in a grid context is foundational.