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

Design analysis

A compact split section turns the membership promise into a scannable checklist while retaining two conversion buttons and a strong question-led heading.

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-2.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-feature-grid

## Before you start
Ask what the user's product, audience, and brand are, then adapt this structure to their offer.

Build a dark benefits band with a two-column layout. On the left, place a bold two-line heading and two side-by-side actions; on the right, show six concise benefits in a vertical checklist with small line icons. Use black (#050505), white #f5f5f5 headings, #c7c7c7 supporting text, thin #454545 outlines for the secondary action, and a hot-pink primary button. Align both columns to a shared top baseline, use 24–32px gaps, 14–16px row spacing, and 8px button radii. Ensure the checklist wraps cleanly and becomes a single-column stack on mobile.

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

More components