Features
Feature section layouts and patterns.
Grid Layout
<section class="py-24">
<div class="container">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold">Features</h2>
<p class="mt-4 text-muted-foreground">
Everything you need to build modern applications.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature card -->
<div class="p-6 rounded-lg border">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
<!-- Icon -->
</div>
<h3 class="mt-4 font-semibold">Feature Title</h3>
<p class="mt-2 text-sm text-muted-foreground">
Brief description of the feature and its benefits.
</p>
</div>
</div>
</div>
</section>Patterns
Bento Grid
Asymmetric grid with varying card sizes.
Alternating
Feature + image alternating left/right.
Icon Grid
Simple icons with titles and descriptions.
Best Practices
- Lead with benefits - What users gain, not what you do
- Concise copy - 1-2 sentences per feature
- Visual icons - Help users scan quickly
- Group related - Organize features logically
- Limit count - 3-6 features is ideal