Skip to content
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

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
Etch, ACSS, plain CSS

Options 10

Set on the section, in Etch’s 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
23

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

data-duration
number

ms · filter reflow speed

data-easing
smoothsnappyspring

Component props 2

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Project Tool10 in this pattern · 1 props
PropTypeDefault
label
text

Figma

Project Showcase Card4 in this pattern · 24 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1551650975-87deedd944c3?w=1400

imageAlt
text

Hand holding a phone showing a banking app dashboard

focal
text

center

category
text

Product design

showYear
true / false

True

year
text

2025

showBadge
true / false

False

badge
text

Award winner

title
text

Ledger, a banking app people open on purpose

headingLevel
text

h3

url
text

#ledger

showOverview
true / false

True

overview
text

We rebuilt onboarding, payments and the home screen around the three…

showMetric
true / false

True

metricValue
text

+41%

metricLabel
text

weekly active users

showClient
true / false

True

client
text

Ledger Bank

showRole
true / false

True

role
text

Research, UX, UI

showTimeline
true / false

True

timeline
text

14 weeks

showTools
true / false

True

cueLabel
text

View case study

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan