Seamless alternating feature rows with gradient UI cards

Seamless alternating feature rows with gradient UI cards, light-mode, gradient-heavy, light

Preview image. Unlock full-res

Light feature section that alternates a soft gradient product-snippet card against a two-color headline and supporting copy in each row.

Summary

A light features section of stacked two-column rows, each pairing a soft gradient card holding a small product UI snippet with a large two-tone headline and a short benefit paragraph.

Visual description

White background, generous spacing. The first row places a rounded blue-to-lavender gradient card on the left containing a mock contact record (an avatar with "Mark Roberts / VP of Sales at Dealsforce", an expanded EMAIL group listing two addresses with green 97% and red 15% confidence badges and copy icons, and a collapsed PHONE NUMBER row); to the right, a headline "Find anyone's email address in seconds" with "email address" in blue, then three lines of grey copy. The second row mirrors the structure with a peach-to-cream gradient card holding a small floating "MOBILE PHONE" record (avatar, number, green 92% badge, copy icon) and a handwritten-style annotation with a curved arrow ("Connect with ready-to-buy decision makers at any company"); its headline "Get mobile phones for all your B2B prospects" highlights "mobile phones" in orange, followed by two lines of copy.

Key takeaway

The confidence-percentage badges and copy icons inside the gradient cards, which make an abstract data product feel tangible and credible. Alternating the highlight color per row (blue, then orange) keeps a repetitive two-column rhythm from feeling monotonous, and the handwritten arrow annotation adds a human aside.

Reuse notes

Good for a data or sales tool that needs to show what a record actually looks like rather than describe it. Each card needs a believable, legible UI snippet to work. The soft pastel gradients keep it light and approachable; rotate the accent color row to row so a long stack stays lively.

More features sections

See all

More like this