C-013ComponentFree

Cinematic Expand Gallery Cards

Film-strip gallery where one photo panel opens wide and the others fold into slim vertical title strips: section > container > header (eyebrow, h2, intro, counter with previous/next and play/pause) > a row of "Cinematic…

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.

Cinematic Expand Gallery Cards 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 12

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

data-theme

darklight

data-trigger

hoverclick

hover opens a panel on pointer hover, click opens only on click or tap (keyboard always works)

data-expand

346

how many times wider the open panel is than a folded one

data-height

sml

row height on wide screens

data-radius

nonesmlxl

panel corners

data-gap

nonesm

space between panels

data-autoplay

truefalse

cycle panels, pauses on hover and focus, with a play/pause button

data-delay

number

ms · time per panel

data-duration

number

ms · open/fold speed

data-easing

smoothsnappyspring

data-counter

truefalse

show the 01 / 05 counter and controls in the header

data-labels

verticalhidden

folded panel titles

Component props 2

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

Cinematic Kicker5 in this pattern · 2 props

PropTypeDefault

text

text

Dolomites, Italy

icon

text

Cinematic Panel5 in this pattern · 13 props

PropTypeDefault

image

text

https://images.unsplash.com/photo-1470770903676-69b98201ea1c?w=1400

imageAlt

text

Wooden boathouse and moored rowing boats on a green alpine lake

focal

text

center

index

text

label

text

Lago di Braies

title

text

Still water at the foot of the Seekofel

headingLevel

text

showDescription

true / false

True

description

text

We rowed out before the first bus arrived, when the lake was a mirror…

showLink

true / false

True

linkLabel

text

Read the field notes

linkUrl

text

#braies

open

true / false

False

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