masterclass.com
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.
kage