UI PATTERNS
Feature block variations
Eight different ways to present a 50/50 image and text section. Same design system, different layouts.
FEATURE
The simplest version of this pattern
Image on one side, text on the other. No frills, no tricks. Works for almost everything and stays clean at any screen size.
HOW IT WORKS
Walk through a process
Same grid, text on the left this time. Adding a checklist breaks up the text and makes key points scannable.
First benefit or key point goes here- Second benefit with a bit more detail
- Third point to reinforce the message
HIGHLIGHT
Text card overlapping the image
Breaks the rigid grid feel. Good for hero-like feature sections where the image is the star and text is secondary context.
HOW IT WORKS
Walk through a process
1
First step title
Brief description of what happens in this step and why it matters to the user.
2
Second step title
What happens next. Keep each description short, two lines max.
3
Third step title
The result or final action. End with something concrete.
CAPABILITIES
Image paired with a feature grid
When you need to communicate more than a paragraph can handle. Four small features replace the body text.
Sub-feature A
One line about this specific capability.
Sub-feature A
One line about this specific capability.
Sub-feature A
One line about this specific capability.
Sub-feature A
One line about this specific capability.
STORY
Text directly over the image
Full-bleed image with a gradient overlay. Strong visual impact. Best used once per page, not repeated.
DETAIL
Everything contained in a card
The border creates a clear boundary. Feels more contained and modular, good for feature sections that should feel separate from the rest.