block / marketing

Feature Section

A responsive feature grid with strong editorial hierarchy.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

FEATURE SECTION

Designed as a complete stateful module

Responsive, keyboard-ready, theme-aware, and owned by your project after installation.

INSTALL / SOURCE REGISTRY

Add Feature Section to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/feature-section.json

registry/default/blocks/feature-section.tsx

import * as React from "react"
import "@/components/designos/designos.css"

export type Feature = { title: string; description: string; icon: React.ReactNode }

export function FeatureSection({ eyebrow = "System primitives", title = "Everything works together.", description = "Components, motion, typography, and atmosphere follow the same restrained visual logic.", features }: { eyebrow?: string; title?: string; description?: string; features: Feature[] }) {
  return <section className="dos-section"><header className="dos-section__head"><span className="dos-eyebrow">{eyebrow}</span><h2 className="dos-section__title">{title}</h2><p className="dos-lead">{description}</p></header><div className="dos-feature-grid">{features.map((feature) => <article key={feature.title} className="dos-feature"><span className="dos-feature__icon">{feature.icon}</span><h3>{feature.title}</h3><p>{feature.description}</p></article>)}</div></section>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy