Components · primitives

Cards. One component. Eleven personalities.

One .lsd-card base — CSS-var driven for size, tone, shape, and layout. Role variants layer on top: author, product, article, vehicle, book, property. Chain .lsd-fx--* for motion. Container queries on the card itself decide image-top vs image-side — no viewport media query in sight.

View 150+ layout variants →

01 · base

.lsd-card

The base is layout + tokens: --card-bg, --card-fg, --card-border, --card-radius, --card-shadow, --card-pad, --card-gap. Modifier classes swap those vars — size, tone, shape, and layout are independent concerns.

tones

surface / outlined / ghost / glass / solid

Five tone mods change --card-bg + --card-border + shadow. Shape stays.

Surface

Default elevation.

Outlined

Transparent + strong border.

Glass

Frosted backdrop blur.

<div class="lsd-card lsd-card--outlined">…</div>
<div class="lsd-card lsd-card--glass">…</div>

sizes

sm / md / lg

Size mods shift --card-pad + --card-gap. Tone untouched.

Small

14px pad.

Medium (default)

18px pad.

<div class="lsd-card lsd-card--sm">…</div>
<div class="lsd-card lsd-card--lg">…</div>

shapes

rounded / pill / cut-corners

Shape mods change --card-radius or clip-path. Layout untouched.

Rounded

16px radius.

Pill

28px radius.

Cut corners

Polygon clip.

<div class="lsd-card lsd-card--cut-corners">…</div>

states

default / hover / focus

Border brightens on hover. Cards inherit :focus-visible styling when wrapped in <a>.

Hover me

Watch the border.

Linked card

Tab to focus.

<a class="lsd-card" href="…">…</a>

02 · generic

Seven generic primitives

Structural variants — each carries its own inner-element contract. They handle the bones: cover image, overlay, quote, stat, icon-led.

.lsd-card

Plain content card

Image · title · body · CTA. The bone marrow of every variant.

Designing with motion

Pace and choreography as a first-class concern in interface design.

<article class="lsd-card">
  <div class="lsd-card__media">…</div>
  <h4 class="lsd-card__title">…</h4>
  <p class="lsd-card__sub">…</p>
</article>

.lsd-card--image-top

Image-top header

Explicit alias for the default vertical layout. 16:9 hero image with bleed-to-edge.

Northern lights, in JavaScript

A six-hour timelapse rendered live in the browser.

<article class="lsd-card lsd-card--image-top">…</article>

.lsd-card--image-side

Image-side split

Image left, body right. Common for blog rows and search results.

Slow design

Why your interface should breathe between user actions.

5 min read

<article class="lsd-card lsd-card--image-side">
  <div class="lsd-card__media">…</div>
  <div class="lsd-card__body">…</div>
</article>

.lsd-card--overlay

Full-bleed overlay

Image fills the card. Text floats over a bottom gradient scrim.

Tokyo, 3am

A photo essay on neon and silence.

<article class="lsd-card lsd-card--overlay">
  <div class="lsd-card__media">…</div>
  <h4 class="lsd-card__title">…</h4>
</article>

.lsd-card--quote

Quote / testimonial

Big opening curly-quote, attribution row with avatar + name + role.

The fastest builder I've used in a decade. It feels like a design system that thinks.

JR

Plover Hexstrom

Design Lead, Aurora Labs

<blockquote class="lsd-card lsd-card--quote">
  <p class="lsd-card__quote-text">…</p>
  <footer class="lsd-card__attribution">…</footer>
</blockquote>

.lsd-card--stat

Big-number stat

Giant gradient number, uppercase label, sparkline placeholder. Plays nice with count-up.

1,278

Active projects

<div class="lsd-card lsd-card--stat">
  <p class="lsd-card__stat-num">1,278</p>
  <p class="lsd-card__stat-label">…</p>
</div>

.lsd-card--icon

Icon feature card

Leading icon chip, title, one-line description. Used in feature grids.

◇

Surfaces panel

Generate the full role stack from one token.

<div class="lsd-card lsd-card--icon">
  <div class="lsd-card__icon-chip">◇</div>
  <h4 class="lsd-card__title">…</h4>
</div>

03 · people

Role variants — people

Author cards, team grids, speaker bios. The avatar is a .lsd-card__avatar primitive — sized via class.

.lsd-card--author

Author bio

Avatar · name · role · bio · social row · CTA.

Aurora Steen

Principal designer · LSD

Writes about motion systems, color, and the strange physics of interfaces.

↗ ✉ ▶

<div class="lsd-card lsd-card--author">
  <div class="lsd-card__avatar">AS</div>
  <h4 class="lsd-card__title">…</h4>
  <p class="lsd-card__bio">…</p>
</div>

.lsd-card--team-member

Team member · hover overlay

Headshot. Hover reveals role + social links in an accent overlay.

Engineering · Aurora Team

↗ ✉

Plover Hexstrom

Senior engineer

<div class="lsd-card lsd-card--team-member">
  <div class="lsd-card__media">
    …image…
    <div class="lsd-card__team-overlay">…</div>
  </div>
</div>

.lsd-card--speaker

Speaker · talk + session time

Author layout + talk title chip + session time chip. Conference card.

Plover Hexstrom

VP Engineering · Northstar

Talk · Architectures of motion

Day 2 · 10:30 Stage A

<div class="lsd-card lsd-card--author
             lsd-card--speaker">
  …avatar + name…
  <span class="lsd-chip lsd-chip--accent">Talk · …</span>
  <span class="lsd-chip">Day 2 · 10:30</span>
</div>

04 · contact

Role variants — contact

Vcards, address blocks, support channels.

.lsd-card--vcard

Digital business card

Name · role · contact rows · save button. Optional QR code corner.

Plover Hexstrom

Solutions Architect · Helix Studio

☎+1 (415) 555-0142

✉theo@helix.studio

<div class="lsd-card lsd-card--vcard">
  <div class="lsd-card__qr"></div>
  <h4>…</h4>
  <div class="lsd-card__row">☎ +1…</div>
</div>

.lsd-card--address

Address + map thumb

Map placeholder header, address lines, directions CTA.

Helix Studio HQ

228 Harrison Street
San Francisco, CA 94105

<div class="lsd-card lsd-card--address">
  <div class="lsd-card__media">…map…</div>
  …address lines…
</div>

.lsd-card--support

Support channel

Channel icon, heading, response-time chip, CTA. One per channel in a grid.

💬

Live chat

Talk to an engineer who's actually shipped this stuff.

~2 min

<div class="lsd-card lsd-card--support
             lsd-card--icon">
  <div class="lsd-card__icon-chip">💬</div>
  …
</div>

05 · product

Role variants — product

E-commerce primitives: catalog tile, cart row, hero feature, variant picker, subscription tier.

.lsd-card--product

Product tile

Image, title, price, rating, add-to-cart. The everyday catalog card.

Nimbus Travel Mug

Insulated · 16oz · matte

$38 ★★★★★(124)

<article class="lsd-card lsd-card--product">
  …media…
  <span class="lsd-card__price">$38</span>
  <span class="lsd-card__rating">★★★★★</span>
</article>

.lsd-card--product-compact

Cart row

Tiny thumbnail · title · price · cart-icon. Drops into cart lists or wishlists.

Field Notes — graph

3-pack · $12.95

<article class="lsd-card lsd-card--product-compact">
  …small media…
  <div class="lsd-card__body">…</div>
  <button class="lsd-btn lsd-btn--icon">+</button>
</article>

.lsd-card--product-hero

Featured product hero

Image left, large title + description + CTA right. Front-of-store anchor.

New release

Vega Desk Lamp

Articulating brass arm, milk-glass shade. 2700K warm. Built to outlive the room it sits in.

$184 ★★★★★(48)

<article class="lsd-card lsd-card--product-hero">
  <div class="lsd-card__media">…</div>
  <div class="lsd-card__body">…</div>
</article>

.lsd-card--product-variants

With swatches + sizes

Click a swatch to swap the image-placeholder tint. Vanilla JS, no library.

Drift Tee

Heavyweight cotton

S M L XL

$48

<article class="lsd-card lsd-card--product
             lsd-card--product-variants"
         data-variants>
  …media + swatches + sizes…
</article>

.lsd-card--subscription

Pricing tier

Tier label, price, feature list with check chips, CTA. Pricing-table primitive.

Studio

Pro

$24/ month

Unlimited projects
Aurora timelines
Surface generator
Priority support

<article class="lsd-card lsd-card--subscription">
  <span class="lsd-card__tier">Studio</span>
  <div class="lsd-card__plan-price">…</div>
  <ul class="lsd-card__features">…</ul>
</article>

06 · content

Role variants — content

Editorial primitives: articles, podcasts, videos, courses.

.lsd-card--article

Article preview

Cover · category chip · title · excerpt · author + date.

Motion

The case for slow interfaces

Why your interface should breathe between user actions, and the math behind making it feel intentional.

Aurora Steen · May 12, 2026

<article class="lsd-card lsd-card--article">
  <div class="lsd-card__media">
    …media…
    <span class="lsd-chip lsd-card__category">Motion</span>
  </div>
</article>

.lsd-card--article-featured

Featured · overlay

Large variant with prominent accent gradient overlay. Hero post.

Featured

Color isn't a value. It's a context.

A long read on OKLCH, semantic axes, and why your design tokens deserve more than hex codes.

<article class="lsd-card lsd-card--overlay
             lsd-card--article-featured">
  …
</article>

.lsd-card--podcast

Podcast episode

Circular cover · title · duration · play button.

Ep 042 · The DAW as design tool

38 min · with Plover Hexstrom

Transcript

<article class="lsd-card lsd-card--podcast">
  …circle cover…
  <button class="lsd-card__play">▶</button>
</article>

.lsd-card--video

Video / lesson

16:9 poster · play overlay · duration chip in corner · title below.

▶

12:48

Building a container-aware card

A live walkthrough · LSD weekly

<article class="lsd-card lsd-card--video">
  <div class="lsd-card__media">
    …poster + play overlay + duration chip…
  </div>
</article>

.lsd-card--course

Course / track

Cover · level chip · title · lesson count · progress bar.

Intermediate 8 lessons

Motion fundamentals

From spring physics to scroll choreography.

<article class="lsd-card lsd-card--course">
  …media + chips + title…
  <div class="lsd-card__progress">
    <i style="width:60%"></i>
  </div>
</article>

07 · specialty

Vertical themes

Same base, domain-specific metadata. Cards for booksellers, photographers, dealerships, boatyards, and listings. The schema is the differentiator — markup stays consistent.

.lsd-card--book

Book

Portrait cover · title · author · rating · pages chip · Buy / Sample CTAs.

Bestseller

The Pace of Light

Plover Hexstrom

★★★★★(312) 328 pp

<article class="lsd-card lsd-card--book">
  …badge + 3:4 cover…
  <span class="lsd-card__rating">★★★★★</span>
  <span class="lsd-chip">328 pp</span>
</article>

.lsd-card--photography

Photography

Magazine-clipped landscape · photographer · EXIF chips · location + date.

Reykjavík harbor, dawn

Photo · Maren Søberg

Leica Q3 28mm f/2.8 1/250 ISO 200

📍 Iceland·March 4, 2026

<article class="lsd-card lsd-card--photography">
  …magazine-clipped photo…
  <div class="lsd-card__exif">
    <span class="lsd-chip">Leica Q3</span>
    <span class="lsd-chip">28mm</span>…
  </div>
</article>

.lsd-card--vehicle

Vehicle

Cover · make/model/year · price · 4 metric chips · save star.

2023 Porsche 911 GT3 Touring

$214,500 Cherry Hill, NJ

4,212 mi 6-spd man Premium Certified

<article class="lsd-card lsd-card--vehicle">
  …cover + save-btn…
  <div class="lsd-card__price-row">…</div>
  <div class="lsd-card__chiprow">…</div>
</article>

.lsd-card--rv

RV / motorhome

Cover · model · price · length / sleeps / slides / generator chips · floorplan thumb.

PLAN

2024 Winnebago Revel 44E

$189,000 Class B · 4×4

19'7" Sleeps 2 0 slides Onan gen

<article class="lsd-card lsd-card--rv">
  …cover + floorplan thumb…
  <div class="lsd-card__chiprow">
    <span>19'7"</span> <span>Sleeps 2</span>…
  </div>
</article>

.lsd-card--marine

Marine · boat

Cover · year/make/model · price · LOA / beam / draft / engine hours · viewing CTA.

2019 Sabre 38 Salon Express

$795,000 Newport, RI

LOA 38' Beam 14'2" Draft 3'1" 412 hrs

<article class="lsd-card lsd-card--marine">
  …cover + price + LOA/Beam/Draft chips…
</article>

.lsd-card--realestate

Property listing

Hero · address · price · bed/bath/sqft · agent footer with avatar + brokerage.

$1,425,000 For sale

428 Linden Ave

Oak Park, IL 60302

4 bd 3.5 ba 3,180 sqft 0.18 acre

Plover Hexstrom

Linden & Co · Realty

<article class="lsd-card lsd-card--realestate">
  …cover + save…
  <h4>428 Linden Ave</h4>
  <div class="lsd-card__agent">…</div>
</article>

08 · domain

Domain-specific cards

Eleven more verticals. Same base, real metadata shapes — events, calendars, jobs, rentals, movies, albums, podcast episodes, recipes, tutorials, workshops, and tickets. Each composes .lsd-card; only the schema and structural arrangement change.

.lsd-card--event

Event listing

Cover · title · date/time chips · location · attendees · RSVP CTA.

Cosmos Conf 2026

Jun 14–16 9:00 AM PT

Yerba Buena Center · San Francisco, CA

2,418 going

<article class="lsd-card lsd-card--event">
  …cover + title + date chips…
  <span class="lsd-card__attendees">2,418 going</span>
</article>

.lsd-card--calendar

Calendar entry

Date block · title · duration · attendees stack — a tile in a schedule grid.

May 13

Quarterly review · design

2:30 PM · 45 min

MR AT PK +4

Room 4A

<article class="lsd-card lsd-card--calendar">
  <div class="lsd-card__date-block">May · 13</div>
  …title + duration + attendee stack…
</article>

.lsd-card--job

Job listing

Company logo · title · location · tag chips · apply CTA.

Senior Design Engineer

Helix · Engineering

Remote · US / EU

Full-time $170–210k Senior

<article class="lsd-card lsd-card--job">
  …logo + title + tags + apply…
</article>

.lsd-card--property

Property · rent / commercial

Rent or lease chip · bed/bath/sqft · per-month price.

For rent Available Jun 1

912 Valencia · #2R

Mission District · San Francisco, CA

$4,250/ month

2 bd 1 ba 1,120 sqft

<article class="lsd-card lsd-card--property">
  …rent chip + price + bed/bath/sqft…
</article>

.lsd-card--movie

Movie poster

3:4 poster · title · year/runtime · IMDb rating · genre tags · trailer CTA.

Dune: Part Three

2027 2h 38m 8.4

Sci-Fi Epic

<article class="lsd-card lsd-card--movie">
  …3:4 poster + rating + genre tags…
</article>

.lsd-card--album

Music album

1:1 cover with hover play · artist + title · track count + duration.

Aurora

Whitelight

14 tracks·47 min

<article class="lsd-card lsd-card--album">
  …1:1 cover + hover play button…
  <p>Whitelight</p> · 14 tracks · 47 min
</article>

.lsd-card--podcast-episode

Podcast episode

Square cover · title · show name + duration · play button — list row by default.

Ep. 88 — The slow web returns

The Quiet Stack

52 min·May 11

<article class="lsd-card lsd-card--podcast-episode">
  …square cover + title + show + play…
</article>

.lsd-card--recipe

Recipe

Image · title · cook time / difficulty / servings · save heart.

Sourdough boule

A patient bread for a slow Sunday.

⏱ 18h total 🍽 4 servings Easy

<article class="lsd-card lsd-card--recipe">
  …image + title + time-row + save…
</article>

.lsd-card--tutorial

Tutorial / lesson

Cover · title · difficulty + duration · progress bar · resume CTA.

CSS container queries from scratch

Intermediate 42 min 8 lessons

Lesson 4 of 842%

<article class="lsd-card lsd-card--tutorial">
  …cover + difficulty + duration…
  <div class="lsd-card__progress">…</div>
</article>

.lsd-card--workshop

Workshop / class

Cover · title · instructor · date · seats remaining · register CTA.

Designing with motion

A 3-day intensive · in-person, NYC

w/ Plover Hexstrom · Helix

Jun 22–24 4 seats left

<article class="lsd-card lsd-card--workshop">
  …cover + instructor + date + seats…
</article>

.lsd-card--ticket

Event ticket

Stub layout · perforated divider · event/date/seat + barcode panel.

Admit one · GA

Cosmos Conf 2026

Yerba Buena Center · SF

Sat · Jun 14·9:00 AM

Seat B · 14

<article class="lsd-card lsd-card--ticket">
  <div class="lsd-card__ticket-main">…</div>
  <div class="lsd-card__ticket-stub">…barcode…</div>
</article>

09 · animation

Chain .lsd-fx--*

Animations are independent modifier classes. Stack .lsd-fx--lift, .lsd-fx--shimmer, .lsd-fx--tilt, .lsd-fx--glow-pulse, .lsd-fx--scale-in, .lsd-fx--ink-drop onto any card. Same universal vocabulary as buttons, inputs, chips.

.lsd-fx--lift .lsd-fx--shimmer

Product · lift + shimmer

Lifts on hover, light stripe sweeps across. Catalog tile polish.

Vega lamp

Brass · 2700K

$184

.lsd-fx--tilt

Author · 3D tilt

JS reads pointer offset, writes --rx/--ry. Card tilts in 3D space.

Aurora Steen

Designer · LSD

Move your cursor across this card.

.lsd-fx--scale-in .lsd-fx--glow-pulse

Stat · scale-in + breathing halo

Scales in on load, continuous shadow pulse afterward. Reduced-motion safe.

99.8%

Uptime · 30 day

.lsd-fx--ink-drop

Overlay · ink drop on click

Click anywhere on the card — accent floods from the click point. JS injects a span.

Click anywhere

Watch the accent flood from your cursor.

10 · container

Container-aware, not viewport-aware

The card responds to its container, not the viewport. Resize the wrapper below — at narrow widths the article stacks image-top; at wider widths it switches to image-side. Zero @media queries; one @container rule.

Container queries

This card decides its own layout

No viewport math, no breakpoints — the card just listens to the size of its parent. Drop it in a sidebar at 280px and it stacks. Drop it in a main column at 720px and it splits.

Aurora Steen · May 13, 2026

Components · Cards · 7 generic · 11 role variants · 6 vertical themes · chain .lsd-fx--*

↩ Framework index