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