Feature Card

An icon + heading + one line of copy, as the repeating tile in the features or benefits section of a landing or marketing page — a “why us” grid, “what’s included”, value props, product highlights, services, capabilities, or a perks row on a pricing page. Common asks it answers: "feature card", "feature cards react", "features section react", "feature grid component", "feature tile component", "benefits section component", "why us section", "value props grid", "product highlights grid", "capabilities grid", "services grid component", "what is included section", "perks row pricing page", "landing page features section", "saas landing page features", "homepage features grid", "marketing feature grid", "3 column feature grid", "icon heading description card", "card with icon and title react", "shadcn feature card", "shadcn features section", "shadcn card with icon", "shadcn marketing section", "shadcn landing page components", "tailwind feature card", "feature card with lucide icon", "clickable feature card", "make the whole card a link react", "card as link accessibility", "entire card clickable react", "one tab stop per card", "nested link inside card keyboard", "feature card hover state", "feature card heading level", "features grid document outline", "heading levels in a card grid", "decorative icon announced by screen reader", "aria-hidden icon in card", "機能カード", "特徴セクション", "ランディングページ 機能一覧", "選ばれる理由 セクション", "アイコン付きカード", "カード全体をリンクにする", "サービス紹介 グリッド". Drop several into a responsive grid (grid-cols-2 / grid-cols-3) and that is the whole section; each card takes icon, title, description and optionally href. Set href and the entire card becomes the click target: it renders as an <a> rather than a <div>, with hover and a focus-visible ring, so keyboard users get one tab stop per card instead of hunting for a small link nested inside it. shadcn/ui ships no feature card. Its card is a generic container (~1.8KB of source, no dependencies) with no icon slot and no href — the icon square, the heading and the link are all yours to assemble. Its newer item is the closest thing in shape and does have an icon slot, but it is a ten-part compound kit (ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator) that also pulls in separator, and it is built for list rows rather than a marketing grid. Two concrete differences past the assembly work: official’s ItemTitle renders a <div>, so a features grid built from it contributes nothing to the document outline, whereas this renders a real heading you choose with headingLevel (h2/h3/h4, default h3) so screen-reader users can jump feature to feature; and official’s ItemMedia sets no aria-hidden, so a purely decorative icon can still be announced, whereas this marks the icon square aria-hidden and lets the title carry the meaning. Neither official component accepts an href, so “make the whole tile a link” is hand-wired in both. Zero dependencies — bring your own icon element (a lucide-react icon, an emoji, an <img>); it sits in a tinted primary/10 square, and everything else follows your shadcn tokens including dark mode.