# Cards

> Content, product and profile cards.

- [Listing Card](https://www.assembli.design/components/listing-card.md): Stay or property listing card: swipeable scroll-snap photo carousel with arrows and dots, save-to-wishlist heart, guest favourite badge, rating, dates and nightly plus total price.
- [Integration Card](https://www.assembli.design/components/integration-card.md): App integration card for settings pages: connect switch with a pending state, inline confirm before disconnecting, sync status, and a permissions disclosure.
- [Event Card](https://www.assembli.design/components/event-card.md): Event card with a calendar date tile, time zone aware times, location with directions, a capacity bar, Going/Maybe/Can't RSVP that updates the count, and a real Add to calendar (.ics) download.
- [Metric Card](https://www.assembli.design/components/metric-card.md): Dashboard KPI card: big value with a delta badge, a 7D/30D/90D range switch and an area sparkline you can scrub with pointer or arrow keys to read any day.
- [Article Card](https://www.assembli.design/components/article-card.md): Blog post card: inset cover with category chip, whole-card link, clamped excerpt, author byline with date and read time, copy-link share and a bookmark toggle.
- [Profile Card](https://www.assembli.design/components/profile-card.md): Person card with a cover band, presence dot and verified mark, follow button that updates the follower count in place, message action, stat row and mutual followers.
- [Card Fan](https://www.assembli.design/components/card-fan.md): A hand of cards fanned in an arc. Hover lifts and straightens one card while neighbours part, click flips it forward.
- [Comment Thread](https://www.assembli.design/components/comment-thread.md): Threaded comments with inline replies, live-reacting emoji chips, relative timestamps and an expandable composer.
- [Diorama Card](https://www.assembli.design/components/diorama-card.md): Shadow-box card: paper cut-outs stand at different depths inside a box with real inner walls behind a mat-board window. Tilting toward the cursor reveals the walls, slides the layers past each other with drop shadows, and moves a soft glare across the frame. Bring any backdrop and layers.
- [Disintegrate Card](https://www.assembli.design/components/disintegrate-card.md): Wrap any card and flip a prop to make it crumble into a grid of shards and dust that drift away on the wind, sweeping left to right. Siblings slide up when it is gone. Falls back to a fade for reduced motion.
- [Glass Folder Cards](https://www.assembli.design/components/glass-folder-cards.md): A folder drawn as an object: generated liquid-marble artwork on the back panel, real file cards inside, and a frosted-glass front that leans on hover, falls open on click to fan the files, and takes new files with a drop-and-bump. Keyboard menu, light and smoked-glass tones, zero dependencies.
- [Holo Card](https://www.assembli.design/components/holo-card.md): Collectible foil card: tilts toward the pointer on springs while a rainbow foil layer and a specular glare slide across the surface in sync. Light-source realism without WebGL.
- [Kanban Board](https://www.assembli.design/components/kanban-board.md): Drag cards between columns with pointer or keyboard. Columns highlight as drop targets, cards reflow with layout animation, and counts update live.
- [Lanyard Card](https://www.assembli.design/components/lanyard-card.md): A conference badge hanging from a real rope simulation. Verlet physics swings it in, you can grab and fling it, and a holographic sheen slides across the card as it tilts. Arrow keys give it a nudge; reduced motion shows it still.
- [Peel Card](https://www.assembli.design/components/peel-card.md): A card with a curling paper corner: hover teases the fold, click peels it back on a spring to reveal what is underneath. The flap is real geometry with a back face, fold gradient and drop shadow that follows the cut.
- [Scratch Card](https://www.assembli.design/components/scratch-card.md): A canvas scratch-off: holographic foil with a coin cursor that you rub away with mouse or finger. Tracks how much is cleared, auto-reveals past a threshold with a sparkle burst, and gives keyboard users a Reveal button.
- [Sticky Note Board](https://www.assembli.design/components/sticky-note-board.md): A tactile whiteboard of sticky notes: drag from anywhere except the text, notes lift and straighten under your hand, the last one touched stays on top, edit in place, add in five colours, and drop a note on the bin to crumple it away.
- [Weather Card](https://www.assembli.design/components/weather-card.md): Glanceable weather card with an animated scene per condition: a spinning sun, drifting clouds or falling rain, a sky gradient that crossfades between them, big temperature and an hourly strip.
- [Credit Card](https://www.assembli.design/components/credit-card.md): Payment card that tilts toward the pointer with a holographic sheen tracking the light, and flips in 3D on click to reveal the signature strip and CVC. Number masked except the last four.
- [Flip Card](https://www.assembli.design/components/flip-card.md): Two-sided card that flips in 3D on a spring via a corner button; the hidden face is made inert so focus and screen readers only reach the visible side, with a crossfade for reduced motion.
- [Music Player Card](https://www.assembli.design/components/music-player-card.md): Now-playing card with a cover that spins like a record, a scrubbable progress bar (pointer and arrow keys), skip controls, a live equalizer and a card tint taken from the artwork.
- [Product Card](https://www.assembli.design/components/product-card.md): Commerce card: colorway swatches cross-fade and spin the product shot while washing the stage in the variant color, size chips with a sliding selection, and an add-to-bag button that confirms in place.
- [Tilt Card](https://www.assembli.design/components/tilt-card.md): Spring-damped 3D tilt container that follows the pointer with a soft-light glare, plus a TiltLayer helper that lifts children toward the viewer for real parallax depth.
- [Wallet Stack](https://www.assembli.design/components/wallet-stack.md): Apple-Wallet style card stack: cards overlap with only their top strip showing; tap one and it springs to the front while the rest tuck away below. Generous card art with chip, sheen and masked number. Keyboard accessible.
- [Boarding Pass](https://www.assembli.design/components/boarding-pass.md): Airline boarding-pass card with real punched notches (CSS mask), a perforated stub, a deterministic barcode and a plane that flies the route arc along a live Bézier path.
- [Spotlight Card](https://www.assembli.design/components/spotlight-card.md): Card grid lit by the cursor: one pointer handler on the group feeds each card local coordinates, so the border light spills across neighbouring cards while the hovered one glows. CSS variables only, no re-renders.
- [Swipe Deck](https://www.assembli.design/components/swipe-deck.md): Tinder-style stack of draggable cards with rotation, like/nope stamps, velocity-based fling, undo and arrow-key control. Bring your own card art as any CSS background.

Back to [all components](https://www.assembli.design/components.md).