UI PATTERNS
Eight layouts for presenting four feature blocks. Same design tokens, different structure and rhythm.
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.
04
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.
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.
CATEGORY
Enough description to give context without overwhelming the layout.
PLATFORM
PRIMARY
This card is bigger for a reason. Use it to highlight your strongest selling point, then let the three smaller cards handle the rest.
A compact explanation that fits one or two lines comfortably.
Same structure repeated. Consistency in height keeps the stack aligned with the large card.
Third card finishing the stack. The three together match the height of the hero card.
PROCESS
Four horizontal rows on a dark background. Each row is a step or a feature. Minimal and clear.
01
One-liner that explains what this is. The number anchors the row visually.
Learn more →
02
Same structure repeated. Hover shifts the row slightly to signal interactivity.
Learn more →
03
Third row. The divider lines create enough separation without needing cards.
Learn more →
04
Final row. Four is a natural fit for this layout without it feeling too long.
Learn more →
RESULTS
UPTIME
The stat hooks attention, the text gives context.
FASTER
Vary stat types for visual interest across the row.
USERS
Real numbers are always more compelling than vague claims.
SUPPORT
Four stats in a row feels like a dashboard. Use it wisely.
APPROACH
No cards, no backgrounds. Just vertical dividers creating four equal columns. Editorial and clean.
●
Open layout without any card containers. The vertical lines provide enough structure on their own.
●
Serif headings paired with sans body text create a nice typographic contrast within each column.
●
Four columns works well on desktop but needs to collapse to two or one on smaller screens.
●
The small dot marker adds a subtle visual anchor without the weight of a full icon.
TOOLS
Center-aligned with oversized icons that invert on hover. Clean, playful, and easy to scan.
Short centered description under each icon block.
Short centered description under each icon block.
Short centered description under each icon block.
Short centered description under each icon block.
© 2026 Brandname. All rights reserved.
