Skip to content
Get Etchedy

3 new patterns this weekSee them

100 of 100 founding seats left

Sign inGet Etchedy

My accountContactPrivacy

L-153Layout

Panel Accordion Hero

Editorial studio hero built as a plain, fully editable Etch tree: section > container > layout holding the head (eyebrow, h1 with an italic accent word, lede, two "Accordion Hero Button" instances with variant solid|outl…

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.

Panel Accordion Hero 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
Layout
Category
Hero
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 6

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

data-theme
paperlightdark

data-accent
primarysecondaryaccentneutral

accent word, button chip, category pills and progress bar

data-layout
stackedsplitcentered

head in two columns above the accordion, head beside the accordion, or a centred head

data-anim
risefadenone

how the head enters

data-eyebrow
truefalse

data-metrics
truefalse

metric row

Component props 4

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

Accordion Hero Button2 in this pattern · 5 props
PropTypeDefault
label
text

Start a project

url
text

#contact

variant
text

solid

showIcon
true / false

True

target
text

_self

Accordion Hero Metric3 in this pattern · 3 props
PropTypeDefault
value
text

140+

showLabel
true / false

True

label
text

projects delivered

Accordion Panel5 in this pattern · 15 props
PropTypeDefault
image
text

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

imageAlt
text

Timber house with a lit glass facade at dusk under tall trees

focal
text

center

loading
text

lazy

showCategory
true / false

True

category
text

Residential

showMeta
true / false

True

meta
text

Klampenborg, 2025

title
text

Linden House

headingLevel
text

h2

showText
true / false

True

text
text

A timber and glass family home set low under old lindens, opening ful…

showCta
true / false

True

ctaLabel
text

View project

ctaUrl
text

#linden-house

Panel Accordion1 in this pattern · 24 props
PropTypeDefault
trigger
text

hover

start
number

1

autoplay
true / false

True

interval
number

6000

loop
true / false

True

pauseOnHover
true / false

True

grow
number

5

duration
number

800

easing
text

smooth

entrance
text

unfold

stagger
number

90

height
text

m

gap
text

s

radius
text

l

collapsed
text

dim

imageMotion
text

settle

caption
text

scrim

showIndex
true / false

True

showSpine
true / false

True

showProgress
true / false

True

controls
text

full

showToggle
true / false

True

mobile
text

stack

label
text

Selected projects

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

Get Pro
Or start with the free packs

More patterns

Keep browsing.

All patterns
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