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

Design analysis

A horizontal recommendation rail presents four image-led business cards with badges, ratings, metadata, favorite controls, and a next arrow.

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/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146192-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146166919-full.webp
- Component on Kage: https://kage.design/component/fresha-feature-grid

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

Build a horizontally scrollable recommendation section on white. Start with a left-aligned section heading, then a four-column card rail on desktop. Each card should contain a 16:10 rounded image, a small floating status badge, a favorite button, title, star rating, location, category, and review count. Use 16px gaps, 10–14px image radii, compact 12–14px metadata, and a circular next-arrow control at the rail edge. On smaller screens, show one or two cards with horizontal overflow and scroll snapping.

Never: use the reference's logo, product name, exact copy, illustrations, imagery, or branding.

More components