Skip to content
C-155Component

Centered Focus Carousel

Image-led editorial carousel: the centred portrait card opens up its story (tag, title, text and button) while the neighbours fall back, shrink and desaturate. Plain editable section > container > header (eyebrow, h2, in…

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.

Centered Focus Carousel 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
Sliders and carousels
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 14

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

data-theme
lightdark

data-accent
primarysecondaryaccentneutral

tag and progress colour

data-ratio
portraittallsquare

card ratio 3:4, 2:3 or 1:1

data-radius
nonesmlxl

data-depth
subtlestrongflat

how far side cards recede

data-mono
truefalse

desaturate the side cards

data-autoplay
truefalse

data-delay
number

ms

data-pause-on-hover
truefalse

data-loop
truefalse

data-arrows
truefalse

data-arrows-mobile
truefalse

data-pagination
fractionprogressdotsnone

data-align-head
centerstart

header alignment

Component props 3

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

Focus Story Tag0 in this pattern · 2 props
PropTypeDefault
label
text

Coastline

showDot
true / false

True

Focus Story Button0 in this pattern · 4 props
PropTypeDefault
label
text

Read the story

url
text

#story

style
text

solid

showIcon
true / false

True

Focus Story6 in this pattern · 16 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1500534623283-312aade485b7?w=900

imageAlt
text

A winding road through green hills under a wide sky

focus
text

center

scrim
text

medium

showTag
true / false

True

tag
text

Highlands

showIndex
true / false

True

index
text

01

title
text

The long way round is the point

headingLevel
text

h3

showText
true / false

True

text
text

Four days on single-track roads, with a paper map and no fixed plan f…

showButton
true / false

True

buttonLabel
text

Read the route

buttonUrl
text

#story

buttonStyle
text

solid

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