Kage Design logo kage
eventbrite.com
eventbrite.com tabs & steps component

Design analysis

A location heading and compact tab row establish the browsing context and offer quick time-based filters.

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-3.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-tabs

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

Build a browsing-context control band with a centered max-width content container. Start with a bold 16–18px heading such as a location selector, including a small chevron and accent-colored selected location. Below it, place a compact tab row with 4 options, a dark or accent underline beneath the active tab, and a thin divider spanning the content width. Use 20–24px top padding, 14–18px between heading and tabs, 12px tab labels, and #55535c inactive text. Make location selection and tabs keyboard accessible, with clear hover, focus, and selected states. Stack the heading and tabs naturally on narrow screens.

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

More components