Skip to content
E-005ElementFree

Live Status Pill

Status pills for availability, presence and live states: a coloured dot with a soft ring that breathes outward (Web Animations API, paused off-screen), a label and an optional muted meta text. Pill component props: statu…

Almost yours

Where should we send the pack?

Etchedy · Free pack request

One email a month with new patterns. Unsubscribe anytime.

Included 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.

Live Status Pill 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
Badges
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 5

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

data-theme
lightdark

surface of the showcase section

data-align
centerstartend

row alignment

data-speed
numberdefault 1800

ms · one pulse of the status ring

data-intensity
softnormalstrong

how far the pulse ring spreads

data-anim
risefadenone

entrance of the row

Component props 1

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

Status Pill5 in this pattern · 8 props
PropTypeDefault
status
text

online

label
text

Available for work

showDot
true / false

True

pulse
true / false

True

showMeta
true / false

False

meta
text

Replies in 2h

style
text

soft

size
text

m

Free pattern. Yours to use on any site, no plan needed.

Included in Pro From €39 a year, with all 753 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