UI PATTERNS
Eight different ways to present a 50/50 image and text section. Same design system, different layouts.
FEATURE
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
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 hereSecond benefit with a bit more detailThird point to reinforce the message
HIGHLIGHT
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
1
Brief description of what happens in this step and why it matters to the user.
2
What happens next. Keep each description short, two lines max.
3
The result or final action. End with something concrete.
CAPABILITIES
When you need to communicate more than a paragraph can handle. Four small features replace the body text.
One line about this specific capability.
One line about this specific capability.
One line about this specific capability.
One line about this specific capability.
STORY
Full-bleed image with a gradient overlay. Strong visual impact. Best used once per page, not repeated.
DETAIL
The border creates a clear boundary. Feels more contained and modular, good for feature sections that should feel separate from the rest.
© 2026 Brandname. All rights reserved.
