FeatureCard

A marketing card for feature grids. Displays an icon in a primary-tinted circle, a title, and a description. Applies a subtle hover border to communicate interactivity.

Anatomy

Built on Card. The CardHeader contains: a rounded icon container with bg-primary/10, a CardTitle, and a CardDescription. The card root adds a hover:border-ring transition.

Lightning Fast
Optimized rendering for instant page loads and smooth interactions.

3-Column Grid

The most common layout — a 3-column grid on desktop, 1-column on mobile.

Lightning Fast
Built for performance with optimized rendering and lazy loading.
Secure by Default
Enterprise-grade security with built-in authentication.
Global Scale
Deploy worldwide with edge computing and CDN delivery.

4-Column Grid

For larger feature sets, a 4-column grid with shorter descriptions.

Auth
SSO, 2FA, and RBAC built in.
Analytics
Real-time metrics and dashboards.
Modular
Compose only what you need.
Notifications
Email, SMS, and push alerts.

Technical Features

Works equally well for developer-focused feature lists.

Type-Safe
Full TypeScript support with auto-generated types and strict mode.
Any Database
Adapters for Postgres, MySQL, SQLite, MongoDB and more.
Edge Ready
Runs on Vercel Edge, Cloudflare Workers, and Deno Deploy.

Design Guidelines

Do

  • Use in groups of 3, 6, or 9. Feature grids look balanced in multiples of 3 — matching the 3-column grid breakpoint.
  • Keep descriptions parallel in length. Consistent description lengths create a uniform grid height without gaps.
  • Use icons that reinforce the title. The icon is a quick visual cue — it should match the feature's meaning, not just look nice.

Don't

  • Don't use for interactive cards with actions. FeatureCard is display-only — for clickable cards, add a button inside CardContent instead.
  • Don't mix very long and very short descriptions. One card at 3 lines and another at 1 line creates a ragged grid.
  • Don't use more than 12 feature cards per section. More than 12 cards dilutes focus and overwhelms the reader.

Developer Reference

Props

  • icon (required) — a LucideIcon displayed in the bg-primary/10 container.
  • title (required) — rendered as CardTitle at text-base size.
  • description (required) — rendered as CardDescription.
  • className — forwarded to the root Card element.

Usage

import { OriginUiFeatureCard } from "@/components/branding/origin-ui-feature-card"
import { Zap, Shield, Globe } from "lucide-react"

<div className="grid gap-4 sm:grid-cols-3">
  <OriginUiFeatureCard
    icon={Zap}
    title="Lightning Fast"
    description="Optimized rendering for instant page loads."
  />
  <OriginUiFeatureCard
    icon={Shield}
    title="Secure by Default"
    description="Enterprise-grade security built in."
  />
  <OriginUiFeatureCard
    icon={Globe}
    title="Global Scale"
    description="Deploy worldwide with edge computing."
  />
</div>