Design Lounge
Install

Components

Cards

031 pieces
Sort
Nº 527Component · Web

Confidence and one other option

The short headline sits on a 72% bar. The long headline is the other option. Using either says which is in the edition.

Nº 524Component · Web

Agent approval card

A notice stays a draft until Yes. No keeps it. The card says which, and nothing sends itself.

Nº 434Component · Web

Swipe deck with undo

A stacked deck of trip cards: drag right to save, left to pass, arrow keys for both, undo flies the card back from the side it left.

Nº 425Component · Web

Stamped document

An official permit on a desk blotter: a paperclipped receipt, a signature that draws itself, and an APPROVED rubber stamp that thumps down wherever you click.

Nº 424Component · Web

Spring deck

Three notes in a pile. Drag the front one, Gate 4. Release and it springs back.

Nº 368Component · Web

Product cards with quick add

Four square-cornered shop cards with CSS-drawn art, a second angle on hover, colour swatches, sale tags, and a quick-add bar that bumps the bag count.

Nº 363Component · Web

Postcard with stamp and postmark

A travel postcard that turns over by drag or key: an illustrated harbour on the front, a handwritten note, perforated stamp, and an inked postmark on the back.

Nº 361Component · Web

Polaroid frames, three ways

One 300px instant-photo frame in three treatments: a hard shadow lit by the cursor, tape with a peelable sticky note, and a print you shake to develop.

Nº 360Animation · Web

Polaroid fan

Five prints start fanned. Click stacks them. Click again opens the arc.

Nº 314Section · Web

Mixed article cards

A magazine grid that mixes one lead card with a CSS cover, two numbered text cards, and three small thumbnail cards. Each whole card is one link.

Nº 306Component · Web

Manila folder with tabs

A manila project folder with four cut tabs; each tab drops the current sheet into the pocket and slides the next one up. A stacked drawer variant sits beside it.

Nº 304Component · Web

Magazine cover card

A 3:4 magazine cover card with masthead, cover lines, an SVG illustration and barcode. Hover lifts it and curls the corner; three issues swap from a stack.

Nº 294Animation · Web

Letter sleeve

A letter starts out of a charcoal sleeve. Tuck slides it in. Pull brings Gate 4 back out.

Nº 292Animation · Web

Lens bento

A board of yard chips. A 180px lens follows the pointer and chips under it scale to 1.35.

Nº 273Component · Web

Holographic foil pass

A conference pass that tilts up to 12° toward the pointer or arrow keys, with a narrow three-stop foil band and a glare spot driven by CSS variables.

Nº 256Component · Web

Goals card with rings and confetti

Three quarterly goals as progress rings with log buttons, inline-editable targets, and a confetti burst at 100% that respects reduced motion.

Nº 254Component · Web

Glass credit card with flip

A frosted-glass payment card that tilts to the pointer with a moving holographic edge, flips to a back with a hold-to-reveal CVV, and switches between three cards.

Nº 250Animation · Web

Folder reveal

A manila folder starts open, three notes fanned above it. The folder button closes and opens the fan.

Nº 249Component · Web

Focus dim

Four yard cards. Press one and the others drop to opacity .35. Press it again and the board evens out.

Nº 239Component · Web

Event countdown ticket card

A gig ticket card with split-flap digits counting down to a real date, a venue block, an add-to-calendar menu, tier and quantity pickers, and a seat-hold CTA.

Nº 221Section · Web

Diamond badge rail

A dark horizontal rail of badge cards, each crowned by a diamond icon that fills lime on hover. A thick scrubber bar drags the rail; a card click filters.

Nº 211Component · Web

Daily quote card

A quote-of-the-day card whose sky gradient follows the time of day. Swipe for the next quote, save it, or open a share sheet that previews it as an image.

Nº 210Component · Web

Cut-shape image frames

Four portfolio image frames cut by CSS masks: circle bites, an arch, a notched corner and a blob. Hover morphs each cut; Enter holds it.

Nº 202Component · Web

Content card

One load as a card: Gate 4, Rice, 2,400 kg, Mira Shrestha on 17 October. Opening it marks the card and says load 1842 is open.

Nº 198Component · Web

Concert ticket stack with foil strip

Three riso-printed gig tickets in a loose pile. A holographic security strip shifts with the pointer, the pile fans out like a hand of cards, and each stub has a seat map.

Nº 192Component · Web

Cinema ticket with tear-off stub

A 1930s picture-house ticket in cream and oxblood. Pull the perforated stub away and it tears along a ragged edge, keeps itself, and stamps the ticket Admitted.

Nº 191Component · Web

Chip bucket

Three chips sit beside a night bucket. Drag one in and it stays. Miss, and it returns.

Nº 183Component · Web

Café chalkboard and letterboard menu

A framed café menu that switches between a chalkboard with grainy chalk lettering and a felt letterboard with plastic letters. Today's special writes itself in.

Nº 176Component · Web

Boarding pass with fold-out details

A horizontal airline boarding pass with notch cutouts, a plane gliding along the route arc, a QR stub, a details sheet that folds down, and an Add to Wallet button.

Nº 079Animation · Web

3D card flip trio

Three wallet cards (debit card, ticket, advisor profile) that flip on click or Enter with 1200px perspective, a 600ms rotate and a 14px mid-flip lift; every back face carries real content.

Nº 021Animation · Web

Hover tilt cards

Three pricing cards tilt up to 8° toward the pointer with a cursor-following specular highlight and a lifted shadow, then spring back with an overshoot curve on leave.