C-016Component

CMS Project Showcase Card

Case-study grid whose card is shaped around the fields a CMS collection supplies, so each prop maps one-to-one to a dynamic binding: section > container > header (eyebrow, h2, intro, filter bar) > grid of "Project Showca…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

All photos and visual assets used in this preview are sourced from Unsplash.

The system behind it

One pattern, your whole brand.

CMS Project Showcase Card reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type: Component
Category: Cards
Responsive: Desktop to phone
Works with: Bricks, ACSS, plain CSS

Options 10

Set on the section, in Bricks’ attributes panel. No code needed.

data-theme

lightpaperdark

data-layout

featuredgrid

featured = the first visible project becomes a full-width horizontal lead card on wide screens

data-columns

cards per row on wide containers

data-reveal

overlaypushalways

overlay = the spec sheet wipes up over the cover on hover or focus, push = it expands under the text, always = always shown (touch devices always get it in flow)

data-aspect

classicsquarewideportrait

cover ratio

data-image-hover

zoomnone

cover zoom on hover

data-radius

nonesmlxl

cover and panel corners

data-filter

truefalse

category filter bar built from the cards (with counts) that reflows the grid with a FLIP animation