Section: Features

Showcase your product's key features in a grid layout. Each feature card has a title, description, and optional icon.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`features`	array	Yes	Array of feature objects	—
`features[].title`	string	Yes	Feature title	—
`features[].description`	string	Yes	Feature description	—
`features[].icon`	string	No	Lucide icon name	—
`columns`	number	No	Grid columns (2, 3, or 4)	`3`
`className`	string	No	Custom CSS class	—

Minimal Example

{
  "type": "features",
  "features": [
    { "title": "Fast", "description": "Pages load in under 100ms globally." },
    { "title": "Secure", "description": "AES-256-GCM encryption for all content." },
    { "title": "Scalable", "description": "CDN-backed pages handle any traffic." }
  ]
}

Full Example

{
  "type": "features",
  "label": "Features",
  "heading": "Everything You Need to Ship Fast",
  "description": "Built for developers who value simplicity and power.",
  "columns": 3,
  "features": [
    {
      "title": "REST API",
      "description": "Full CRUD API for pages, projects, and settings. Create entire sites programmatically.",
      "icon": "Code"
    },
    {
      "title": "4 Page Types",
      "description": "Landing pages, articles, docs, and directory items — each optimized for its use case.",
      "icon": "Layout"
    },
    {
      "title": "14+ Sections",
      "description": "Pre-built section components: hero, features, pricing, FAQ, testimonials, and more.",
      "icon": "Layers"
    },
    {
      "title": "Data Mode",
      "description": "Encrypted headless CMS. Content stored on CDN, decrypted in your app.",
      "icon": "Shield"
    },
    {
      "title": "Custom Domains",
      "description": "Connect your own domain with automatic SSL. Full Host or Rewrite mode.",
      "icon": "Globe"
    },
    {
      "title": "AI-Native",
      "description": "The only CMS designed for AI agents to manage content autonomously.",
      "icon": "Bot"
    }
  ]
}

Writing Tips

Lead with benefits, not features: "Ship 10x faster" > "REST API"
Keep titles to 2-4 words: They're scanned, not read
Descriptions: 1-2 sentences. Expand on the title, don't repeat it
Icons: Use concrete Lucide icons. Browse at lucide.dev/icons
6-9 features is ideal for a 3-column grid. 3-4 for 2-column.

Common Patterns

Developer Tool

{
  "type": "features",
  "heading": "Built for Developers",
  "columns": 3,
  "features": [
    { "title": "TypeScript SDK", "description": "Fully typed client with autocomplete.", "icon": "FileCode" },
    { "title": "Webhooks", "description": "Real-time event notifications.", "icon": "Webhook" },
    { "title": "Rate Limiting", "description": "100 req/min with clear error messages.", "icon": "Gauge" },
    { "title": "Idempotency", "description": "Safe retries with idempotency keys.", "icon": "RefreshCw" },
    { "title": "Pagination", "description": "Cursor-based pagination for large datasets.", "icon": "List" },
    { "title": "Error Codes", "description": "Descriptive errors with doc links.", "icon": "AlertCircle" }
  ]
}

Placement

Features typically appear after the Problem and Solution sections. The narrative: Problem → Solution → Features (proof) → How It Works → CTA.