Skip to content
E-215Element

Sliding Pill Pagination

Pagination with a gradient pill that glides to the selected page, Prev / Next arrows that disable at the ends and an optional "Page X of Y" live status. Page numbers are a loop, so the count is one data array. Fires a b…

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.

Sliding Pill Pagination 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
Element
Category
Pagination
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 7

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

data-theme
lightdark

surface of the showcase section

data-align
startcenterend

position of the pager

data-style
pillunderlineoutlinesolid

look of the active page marker

data-size
sml

button size

data-labels
truefalse

show Prev / Next text beside the arrows

data-status
truefalse

show the "Page X of Y" line under the pager

data-anim
risefadenone

entrance

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