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

Design analysis

A centered heading introduces three equal feature cards, each with an image header, title, description, and low-emphasis Try it 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/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146244-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146205210-full.webp
- Component on Kage: https://kage.design/component/partiful-feature-grid-3

## Before you start
Ask what the user's product and brand are, then apply the principles below to their context rather than reproducing this reference.

Build a three-card feature grid:
- Center a strong section heading above the cards with ample whitespace.
- Use equal-width cards with 10–14px radius, subtle shadow, and a media area occupying roughly half the card height.
- Beneath each image, include a bold 16–18px title, two-line description, and a full-width light secondary action.
- Keep cards aligned to the same height and use consistent internal padding around 20px.
- Add hover elevation and a clear focus state; stack cards vertically or use horizontal scrolling on mobile.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reuse the reference's feature names or screenshots.

More components