UI PATTERNS
Eight ways to lay out three feature blocks. Same system, different compositions and energy levels.
FEATURES
01
Brief explanation of this feature. Two lines is the sweet spot for keeping things scannable.
02
Brief explanation of this feature. Two lines is the sweet spot for keeping things scannable.
03
Brief explanation of this feature. Two lines is the sweet spot for keeping things scannable.
CAPABILITIES
A secondary line of text aligned right for balance. Good for wider viewports.
A short description that gives context. Replace the icon with an SVG or image in production.
A short description that gives context. Replace the icon with an SVG or image in production.
A short description that gives context. Replace the icon with an SVG or image in production.
SHOWCASE
Each card gets its own image. Works well for case studies, blog posts, or products.
CATEGORY
Enough description to give context without overwhelming the layout.
CATEGORY
Enough description to give context without overwhelming the layout.
CATEGORY
Enough description to give context without overwhelming the layout.
HOW IT WORKS
Center-aligned text with a large number creates a visual anchor point for the eye.
The numbers are decorative first, informational second. They create rhythm across the row.
Works especially well for process explanations or sequential features.
PLATFORM
Same card concept, different atmosphere. The divider line separates icon from content.
Short supporting text about this feature. Keep it to two lines for consistency across cards.
Short supporting text about this feature. Keep it to two lines for consistency across cards.
Short supporting text about this feature. Keep it to two lines for consistency across cards.
SERVICES
A one-liner that explains what this feature does. Arrow on the right suggests it's clickable.
A one-liner that explains what this feature does. Arrow on the right suggests it's clickable.
A one-liner that explains what this feature does. Arrow on the right suggests it's clickable.
No cards, no borders around each item. Just vertical lines separating open columns. Feels editorial and lightweight.
No cards, no borders around each item. Just vertical lines separating open columns. Feels editorial and lightweight.
No cards, no borders around each item. Just vertical lines separating open columns. Feels editorial and lightweight.
UPTIME
The stat grabs attention, the text below gives it meaning. Replace numbers with real data.
FASTER
Mixing stat types keeps the row from feeling like a dashboard. Percentages, multipliers, absolutes.
RESPONSE
This pattern works best when the stats are genuinely impressive. If they're not, use a different layout.
© 2026 Brandname. All rights reserved.
