Skip to content
C-027Component

Expandable CMS Detail Card

Editorial story grid whose cards map one-to-one to CMS fields; opening a card morphs its photo into a full reading view in a native (cover, category, date, read time, title, lede, author, body with pull quote, two action…

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.

Expandable CMS Detail 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 2

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

data-theme
lightwhitedark

section and reading view surface

data-archive
truefalse

header archive link

Component props 3

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

Story Grid1 in this pattern · 10 props
PropTypeDefault
columns
text

3

layout
text

center

animation
text

morph

duration
number

560

easing
text

smooth

aspect
text

portrait

cardStyle
text

minimal

backdrop
text

blur

nav
true / false

True

radius
text

l

Story Author5 in this pattern · 3 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=160

name
text

Hana Ilves

role
text

Contributing editor

Story Card5 in this pattern · 26 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1493106641515-6b5631de4bb9?w=1400

imageAlt
text

Clay-covered hands shaping a pot on a spinning wheel

focal
text

center

showCategory
true / false

True

category
text

Craft

showMeta
true / false

True

date
text

18 Sep 2026

readTime
text

8 min read

title
text

The potter who fires her kiln twice a year

headingLevel
text

h3

showExcerpt
true / false

True

excerpt
text

Months of throwing, one long weekend of fire, and a waiting list that…

url
text

#potter

body
text

Mira Okonkwo works alone in a converted dairy at the end of a farm tr…

showQuote
true / false

True

quote
text

If I knew exactly how a pot would turn out, I would have stopped maki…

showBody2
true / false

True

body2
text

What comes out is never quite what went in.

showAuthor
true / false

True

showPrimary
true / false

True

primaryLabel
text

Read the full story

primaryUrl
text

#potter

showSecondary
true / false

True

secondaryLabel
text

Visit the studio

secondaryUrl
text

#studio

featured
true / false

False

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