UI PATTERNS
6-card feature variations
Eight different layouts for six feature blocks. Tailwind CSS, same design tokens, different compositions.
FEATURES
Clean numbered grid
01
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
02
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
03
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
04
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
05
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
06
Feature title
Brief explanation of this feature. Two lines keeps the grid balanced across all six cells.
CAPABILITIES
Bordered icon cards
Each card gets an icon, a title, and a short description. Compact enough for six.
Feature title
Short supporting text about this feature and why it matters.
Feature title
Short supporting text about this feature and why it matters.
Feature title
Short supporting text about this feature and why it matters.
Feature title
Short supporting text about this feature and why it matters.
Feature title
Short supporting text about this feature and why it matters.
Feature title
Short supporting text about this feature and why it matters.
PLATFORM
Two heroes, four supporting
Top row gets more space for primary features. Bottom row is compact for secondary ones.
Primary feature with more room
The wider card gives space for a longer description. Use this row for your strongest two features that need more explanation.
Primary feature with more room
The wider card gives space for a longer description. Use this row for your strongest two features that need more explanation.
Sub-feature
Compact description for supporting features.
Sub-feature
Compact description for supporting features.
Sub-feature
Compact description for supporting features.
Sub-feature
Compact description for supporting features.
SHOWCASE
Cards with image headers
Each card has its own image. Six cards in a 3x2 grid for visual-heavy sections.
CATEGORY
Card title goes here
Short description giving enough context to click through.
CATEGORY
Card title goes here
Short description giving enough context to click through.
CATEGORY
Card title goes here
Short description giving enough context to click through.
CATEGORY
Card title goes here
Short description giving enough context to click through.
CATEGORY
Card title goes here
Short description giving enough context to click through.
CATEGORY
Card title goes here
Short description giving enough context to click through.
PLATFORM
Dark cards with divider
Icon sits above a thin line, text below. The line creates a pause between the visual and the content.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
Feature title
Short supporting text. The separator line gives each card its own rhythm.
SERVICES
Side-by-side row stacks
Feature title
A concise description of this service or feature.
Feature title
A concise description of this service or feature.
Feature title
A concise description of this service or feature.
Feature title
A concise description of this service or feature.
Feature title
A concise description of this service or feature.
Feature title
A concise description of this service or feature.
HOW IT WORKS
Six steps, big numbers
01
Step title
The big number is a visual anchor. Text below gives it meaning and context.
02
Step title
The big number is a visual anchor. Text below gives it meaning and context.
03
Step title
The big number is a visual anchor. Text below gives it meaning and context.
04
Step title
The big number is a visual anchor. Text below gives it meaning and context.
05
Step title
The big number is a visual anchor. Text below gives it meaning and context.
06
Step title
The big number is a visual anchor. Text below gives it meaning and context.
TOOLS
Large icons with hover invert
Center-aligned, oversized icons. Playful without being childish.
Feature title
Short centered description sitting below the icon block.
Feature title
Short centered description sitting below the icon block.
Feature title
Short centered description sitting below the icon block.
Feature title
Short centered description sitting below the icon block.
Feature title
Short centered description sitting below the icon block.
Feature title
Short centered description sitting below the icon block.