Skip to content
C-116Component

Searchable Filter Gallery

CMS-style gallery built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > toolbar (a row of "Filter Pill" component instances, a live search input, a grid/list view switch) > a gri…

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.

Searchable Filter Gallery 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
Galleries
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 11

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

data-theme
lightdark

re-themes the section

data-filter
truefalse

shows the category pill row ·

data-search
truefalse

shows the search field ·

data-view-toggle
truefalse

shows the grid/list switch

data-view
gridlist

starting layout

data-columns-desktop
number

1-4 · grid columns per breakpoint (tablet from 36em, desktop from 60em)

data-gap
number

px

data-radius
nonesmlxl

data-lightbox
truefalse

click opens a full-screen viewer over the currently filtered set

data-duration
number

ms

data-easing
easesmoothsnappylinear

or cubic-bezier · for the show/hide and load-more transitions

Component props 2

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

Filter Pill5 in this pattern · 3 props
PropTypeDefault
label
text

All

value
text

all

active
true / false

False

Filter Item12 in this pattern · 4 props
PropTypeDefault
image
text

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

imageAlt
text

Gallery photograph

title
text

Untitled

category
text

abstract

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