Skip to content
Get lifetime access
Library

Spotlight card

A card whose glow follows the pointer across it, with a matching light on the border. A grid of them shares one pointer, so the light moves from card to card. A small script sets two custom properties; the rest is CSS. Touch devices get a still card.

ComponentFeatures

Live preview

Variant
Scheme
Width
Motion

  • Fixed price

    The invoice matches the quote to the dollar, or we eat the difference.

  • Dates you can plan around

    A start date and a finish date on the quote, in writing.

  • Same-day reply

    Every message answered the day it arrives, by a person.

  • One number

    The lead who quoted the job answers the phone during it.

Fixed price

The invoice matches the quote to the dollar.

etchpress.com/library/spotlight-card
Spotlight card

What you can build with it

A features grid where a light follows the pointer. A set of promises or benefits on a dark or light page. A pricing inclusions block with more life than plain cards.

Props

title (text); text (text); icon (select: none, check, calendar, clock, phone, mail, pin); href (url, optional); size (select: medium, small)

States shown

Rest, lit (pointer over), focused. Reduced motion: no fade on the light, it still follows.

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 .spotlight-card, .spotlight-grid. Its behaviour is a small script that travels with the component; no plugin and nothing to install.

ACSS tokens used

–primary for the light, –neutral-ultra-light surface in dark scheme, –card-padding.

ACSS requirements

ACSS 4 defaults. Pure CSS; no stylesheet needed.

Version history

Version 1.1.0, September 30, 2026: Family contract: spacing on the shared card variables (–card-padding, –card-gap, –card-gap-tight, –card-radius) with a size prop, nested corners concentric, part names shared across the card family. Version 1.0.0, September 19, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.1.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.