lu.ma
Design analysis
A compact section heading introduces a horizontal row of event cards, each combining a strong thumbnail, truncated title, and lightweight time metadata for quick scanning.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Component: https://kage-design-assets.t3.tigrisfiles.io/components/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146184-2.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146157883-full.webp - Component on Kage: https://kage.design/component/lu-ma-feature-grid ## Before you start Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Adapt this event-browsing pattern to the user's content model. Build a centered content section with a short bold heading and optional location/filter affordance. Under it, show a single horizontal row of 5–6 compact cards. Each card should have a 16:10 or near-square rounded thumbnail, a two-line title, and a small muted date/time line. Keep cards equal width, align them to a shared grid, and use 12–16px gaps. Use white cards on a white page with no heavy borders; thumbnails carry most of the visual weight and use an 8–12px radius. Heading text is 15–16px semibold, title text 13–14px near-black, metadata 11–12px #a0a0a0. If the row can scroll, hide or subtly style the scrollbar and provide snap behavior on touch. Add a small location selector or chevron only when useful. Never: use the reference's logo, product name, copy, event names, thumbnails, illustrations, imagery, or exact card content.
kage