Kage Design logo kage
eventbrite.com
eventbrite.com feature grid component

Design analysis

A horizontal row of eight circular icon shortcuts makes broad event categories scannable before users browse listings.

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/eventbrite-com/7528d4f6-3311-4de9-a3b5-4d616b4b671a-1789146266-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/eventbrite-com/7528d4f6-3311-4de9-a3b5-4d616b4b671a-1789146238794-full.webp
- Component on Kage: https://kage.design/component/eventbrite-feature-grid

## Before you start
Ask what the user's product, audience, taxonomy, and brand are, then apply these principles to that product rather than reproducing the reference.

Create a category shortcut strip below the hero. Render 6–8 evenly distributed items in a horizontal grid, each with a thin pale-gray circular icon container around 76px in diameter, a simple monochrome line icon, and a centered two-line label below. Keep the strip airy with about 28px vertical padding and 24–32px item gaps. Use white background, #eeeeef borders, dark navy text (#17162d), and restrained 11–12px semibold labels. Make the row horizontally scrollable on small screens while keeping each item at a stable minimum width. Add hover elevation or a subtle accent border and visible focus states.

Never: copy logos, product names, exact copy, illustrations, or imagery from the reference.

More components