UI PATTERNS
4-card feature variations
Eight layouts for presenting four feature blocks. Same design tokens, different structure and rhythm.
FEATURES
Four clean cells
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.
04
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.
Feature Title
A short description that gives context. Replace the icon with an SVG or image in production.
SHOWCASE
Two-by-two image cards
Wider cards in a 2×2 grid. More room for images, works well for portfolio or product features.
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.
CATEGORY
Card title goes here
Enough description to give context without overwhelming the layout.
PLATFORM
One hero card, three supporting
PRIMARY
The main feature gets the most space
This card is bigger for a reason. Use it to highlight your strongest selling point, then let the three smaller cards handle the rest.
Supporting feature
A compact explanation that fits one or two lines comfortably.
Supporting feature
Same structure repeated. Consistency in height keeps the stack aligned with the large card.
Supporting feature
Third card finishing the stack. The three together match the height of the hero card.
PROCESS
Numbered row list
Four horizontal rows on a dark background. Each row is a step or a feature. Minimal and clear.
01
Feature or step title
One-liner that explains what this is. The number anchors the row visually.
02
Feature or step title
Same structure repeated. Hover shifts the row slightly to signal interactivity.
03
Feature or step title
Third row. The divider lines create enough separation without needing cards.
04
Feature or step title
Final row. Four is a natural fit for this layout without it feeling too long.
RESULTS
Number-led cards
99%
UPTIME
Feature title
The stat hooks attention, the text gives context.
10x
FASTER
Feature title
Vary stat types for visual interest across the row.
50K
USERS
Feature title
Real numbers are always more compelling than vague claims.
24h
SUPPORT
Feature title
Four stats in a row feels like a dashboard. Use it wisely.
APPROACH
Open columns with lines
No cards, no backgrounds. Just vertical dividers creating four equal columns. Editorial and clean.
●
Column title
Open layout without any card containers. The vertical lines provide enough structure on their own.
●
Column title
Serif headings paired with sans body text create a nice typographic contrast within each column.
●
Column title
Four columns works well on desktop but needs to collapse to two or one on smaller screens.
●
Column title
The small dot marker adds a subtle visual anchor without the weight of a full icon.
TOOLS
Large icon anchors
Center-aligned with oversized icons that invert on hover. Clean, playful, and easy to scan.
Feature title
Short centered description under each icon block.
Feature title
Short centered description under each icon block.
Feature title
Short centered description under each icon block.
Feature title
Short centered description under each icon block.