UI PATTERNS
Eight different layouts for six feature blocks. Tailwind CSS, same design tokens, different compositions.
FEATURES
01
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
02
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
03
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
04
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
05
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
06
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
CAPABILITIES
Each card gets an icon, a title, and a short description. Compact enough for six.
Short supporting text about this feature and why it matters.
Short supporting text about this feature and why it matters.
Short supporting text about this feature and why it matters.
Short supporting text about this feature and why it matters.
Short supporting text about this feature and why it matters.
Short supporting text about this feature and why it matters.
PLATFORM
Top row gets more space for primary features. Bottom row is compact for secondary ones.
The wider card gives space for a longer description. Use this row for your strongest two features that need more explanation.
The wider card gives space for a longer description. Use this row for your strongest two features that need more explanation.
Compact description for supporting features.
Compact description for supporting features.
Compact description for supporting features.
Compact description for supporting features.
SHOWCASE
Each card has its own image. Six cards in a 3x2 grid for visual-heavy sections.
CATEGORY
Short description giving enough context to click through.
CATEGORY
Short description giving enough context to click through.
CATEGORY
Short description giving enough context to click through.
CATEGORY
Short description giving enough context to click through.
CATEGORY
Short description giving enough context to click through.
CATEGORY
Short description giving enough context to click through.
PLATFORM
Icon sits above a thin line, text below. The line creates a pause between the visual and the content.
Short supporting text. The separator line gives each card its own rhythm.
Short supporting text. The separator line gives each card its own rhythm.
Short supporting text. The separator line gives each card its own rhythm.
Short supporting text. The separator line gives each card its own rhythm.
Short supporting text. The separator line gives each card its own rhythm.
Short supporting text. The separator line gives each card its own rhythm.
SERVICES
A concise description of this service or feature.
A concise description of this service or feature.
A concise description of this service or feature.
A concise description of this service or feature.
A concise description of this service or feature.
A concise description of this service or feature.
HOW IT WORKS
01
The big number is a visual anchor. Text below gives it meaning and context.
02
The big number is a visual anchor. Text below gives it meaning and context.
03
The big number is a visual anchor. Text below gives it meaning and context.
04
The big number is a visual anchor. Text below gives it meaning and context.
05
The big number is a visual anchor. Text below gives it meaning and context.
06
The big number is a visual anchor. Text below gives it meaning and context.
TOOLS
Center-aligned, oversized icons. Playful without being childish.
Short centered description sitting below the icon block.
Short centered description sitting below the icon block.
Short centered description sitting below the icon block.
Short centered description sitting below the icon block.
Short centered description sitting below the icon block.
Short centered description sitting below the icon block.
© 2026 Brandname. All rights reserved.
