Kage Design logo kage
masterclass.com
masterclass.com gallery component

Design analysis

A category chip rail filters a horizontal row of portrait class cards, creating a dense discovery module with clear browsing controls and a final exploration action.

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/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146210-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp
- Component on Kage: https://kage.design/component/masterclass-gallery-2

## Before you start
Ask what the user's product, content taxonomy, and brand are, then build a discovery module around those answers.

Create a black content-discovery section with a centered two-line heading, a horizontally wrapping category-chip navigation, and a horizontal carousel of five portrait cards. Chips should use charcoal backgrounds, compact icons, 12–13px labels, and one highlighted outlined state. Cards should have 12px rounded corners, portrait imagery, a dark bottom gradient, a small status pill, large editorial title, instructor/meta text, and consistent fixed widths so the row can scroll horizontally on smaller screens. Include discreet previous/next controls, pagination dots, and an outlined or gray Explore action beneath. Use white text, #171719 surfaces, #2b2d30 borders, and a single muted olive highlight for the selected chip. Keep overflow clipped and make the carousel keyboard accessible.

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

More components