Kage Design logo kage
lu.ma
lu.ma feature grid component

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.

More components