C-012ComponentFree

Bookmark Tab Card

Editorial story cards with a working bookmark: section > container > header (eyebrow, h2, intro, live "saved" counter chip) > a grid of "Bookmark Card" component instances. Each card is a full-bleed photo with a gradient…

Get it free

Included in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Bookmark Tab Card 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: Cards
Responsive: Desktop to phone
Works with: Etch, ACSS, plain CSS

Options 9

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

data-theme

paperlightdark

data-layout

grideditorialrow

grid = even columns, editorial = first card tall beside a stack of the others (two columns), row = swipeable scroll-snap strip

data-columns

auto234

columns for grid layout on wide containers

data-radius

nonesmlxl

card corners

data-scrim

softstrong

strength of the photo gradient behind the text

data-spring

bouncysoftnone

hover lift easing

data-lift

sml

how far a card rises on hover

data-counter

truefalse

show the saved-count chip in the header

data-persist

truefalse

remember saved cards in this browser (localStorage)

Component props 1

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

Bookmark Card3 in this pattern · 21 props

PropTypeDefault

image

text

https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=900

imageAlt

text

Dirt footpath winding through a tall pine forest

focal

text

center

size

text

showTab

true / false

True

tabColor

text

accent

tabLabel

text

saved

true / false

False

showEyebrow

true / false

True

eyebrow

text

Field notes

title

text

Walking the old forest road before the first frost

headingLevel

text

url

text

#story

showExcerpt

true / false

True

excerpt

text

Two days, one map and a notebook along a track that foresters have ke…

showAuthor

true / false

True

authorName

text

Ines Okafor

authorImage

text

https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96

showAvatar

true / false

True

showMeta

true / false

True

readTime

text

8 min read

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

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

Get Pro

More patterns

Keep browsing.

All patterns

Free