Feature Section With Gradient Product Cards

Pro

Adaptive three card feature section with a left aligned headline, sea glass and lilac gradient panels of coded product UI, and a full bleed photograph in the middle card.

When to use Feature Section With Gradient Product Cards

Use this when the product has to be seen, not listed. Two cards hold a real interface on a soft gradient, and the middle card is a photograph. That mix is the whole argument: the software looks expensive, and the photo keeps the row from reading as three identical dashboards. It belongs under a product hero on a SaaS page for a brand kit, a studio, or any tool that ships files rather than tickets.

Skip it when you do not have a photograph you own, or when the three claims are certificates rather than surfaces. A stock shot that has nothing to do with the product will make the coded panels look like decoration. The shipped copy is a fictional brand studio, with a type specimen on the left and a locale homepage on the right, so replace the headline, the two interfaces, and the image URL before this goes to production. The section follows light and dark. The cards keep their wash either way.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
171 lines, 6 KB in one file
Install
wensity add feature-section-with-gradient-product-cards --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, cards, gradient, photograph, product-ui, saas
Last updated

More feature sections