Cards On Images
A masonry grid of cards layered over images, each with a heading and short text. Showcases a gallery, portfolio, or product collection on a landing page.
A masonry grid of cards layered over images, each with a heading and short text. Showcases a gallery, portfolio, or product collection on a landing page.
Search blocks by description or jump to a page.
Cards On Images is a five-card image grid. The cards are arranged in two rows: a wider pair of offset columns on top, followed by three equal columns below. Each card is a full-bleed photo with a rounded label pinned to the bottom edge. Hovering or focusing a card gently scales the photo up while the label stays fixed, giving each item a clear interactive cue.
All five cards are independent, so you can swap any photo, rewrite any label, and point each link to a different destination without affecting the others. You can also add or remove cards by adjusting the grid columns, and the two-row structure can collapse to a single row if you only need a smaller set.
Reach for this block when you want to surface a small, browsable collection where the visual is the hook and a short label is all the context needed. For a healthcare scheduling product it works well as a resource hub, showing care categories like specialist visits, telehealth, mental health, and preventive care as distinct, tappable destinations. It handles this better than a plain list or a text-heavy feature grid because the image carries the emotional weight and the label focuses the click.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each card is a photo paired with a short label, so the block suits any content where a single image tells most of the story. A few concrete fits:
Tip: keep every label to two or three words so it reads cleanly at small sizes and does not compete with the photo.