Skip to content
Get lifetime access
Library

Reveal card

Numbered facts on a rule with a dot at each one. Hovering a card raises it on a white surface with a soft glow and lights its number; a kicker line slides in above. In a row of four the first card can hold the raised state until the pointer arrives. Pure CSS.

ComponentFeatures

Live preview

Variant
Scheme
Width
Motion

  • Step one

    01

    First visit

    A 30-minute visit to listen, ask questions and talk budget.

  • What we check

    B+

    First check

    Everything checked before we start, so nothing surprises anyone later.

  • Our promise

    100%

    Fixed price

    The invoice matches the quote to the dollar.

  • Step one

    01

    First visit

    A 30-minute visit to listen, ask questions and talk budget.

  • What we check

    B+

    First check

    Everything checked before we start, so nothing surprises anyone later.

  • Our promise

    100%

    Fixed price

    The invoice matches the quote to the dollar.

  • By the numbers

    +455

    Projects this year

    Small jobs, large jobs and everything between.

etchpress.com/library/reveal-card
Reveal card

What you can build with it

A row of facts that light up on hover. Process steps or promises set on a rule. Figures with a line of explanation each.

Props

figure (text, the big number); title (text); text (text); kicker (text, optional line that appears on hover); href (url, optional)

States shown

Rest, raised (hover or focus within), first-card-active when the row is idle. Reduced motion: no slide, the raise still happens.

How to change it

Content and options are 5 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .reveal-card, .reveal-grid.

ACSS tokens used

–primary-dark for the lit number, –primary-light for the glow, –white surface, –box-shadow-2.

ACSS requirements

ACSS 4 defaults. Pure CSS; no stylesheet needed.

Version history

Version 1.0.0, September 19, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.

Lifetime members

Members copy this straight into Etch, ready to paste.

Used an earlier version? How to update it

Get lifetime access
Back to the library
Other builders

Want EtchPress for Bricks or the block editor?

Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.

This field is required.