C-010ComponentFree

Adaptive Content Card System

One card that adapts to the space it gets: section > container > header (eyebrow, h2, intro, Mosaic/List switch) > a list of "Adaptive Story Card" component instances > browse-all link. Each card reads its own width with…

Get it free

Included in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Adaptive Content Card System 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 17

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

data-theme

paperlightdark

data-view

gridlist

starting layout: grid = mosaic, list = reading list rows

data-switcher

truefalse

show the Mosaic/List switch in the header

data-columns

most columns the mosaic uses on wide containers

data-surface

elevatedoutlineflat

card surface

data-radius

nonesmlxl

card corners

data-hover

liftzoomnone

lift = card rises and the photo zooms, zoom = photo only

data-density

compactcomfortableairy

gaps and card padding

data-anim

risefadescaleblurnone

entrance effect

data-trigger

loadin-view

play the entrance on page load or as each card scrolls into view

data-duration

numberdefault 700

data-stagger

numberdefault 80

ms between cards

data-delay

numberdefault 0

ms before the first card

data-easing

smoothspringsnappylinear

or any cubic-bezier( · )

data-distance

sml

how far cards travel for rise

data-once

truefalse

in-view only: false replays the entrance every time a card re-enters

data-footer

truefalse

show the "browse all" link under the grid

Component props 1

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

Adaptive Story Card5 in this pattern · 23 props

PropTypeDefault

kind

text

article

span

text

auto

tone

text

surface

showImage

true / false

True

image

text

https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1400

imageAlt

text

Timber-clad house glowing at dusk beneath a large old tree

focal

text

center

duration

text

6:40

showCategory

true / false

True

category

text

Project

statValue

text

62%

title

text

Hollow Tree House: a timber home planned around one old eucalyptus

headingLevel

text

url

text

#hollow-tree-house

showExcerpt

true / false

True

excerpt

text

We bent the plan around the roots instead of the other way round: thr…

showByline

true / false

True

authorName

text

Anouk Verbeek

authorMeta

text

Principal architect, 9 min read

showAvatar

true / false

True

authorImage

text

https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96

showCta

true / false

True

ctaLabel

text

Read the project

Free pattern. Yours to use on any site, no plan needed.

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

Get Pro

More patterns

Keep browsing.

All patterns

Free