Accordion Feature Card

Expandable feature card with media panel, vertical title, and collapsible body.

Components / Accordion Feature Card

Surfacescardaccordionfeaturemedia

Expandable feature card with media panel, vertical title, and collapsible body.

Preview

Loading preview…

Usage

Expandable feature card with media panel, vertical title, and collapsible body.

<AccordionFeatureCard
  title="Signal mesh"
  eyebrow="01 / Surfaces"
  subtitle="Collapsible feature strip"
  description="Expand to reveal body copy and footer actions."
  imageSrc="/window.svg"
  imageAlt=""
  defaultExpanded
/>

Files

components/steez/AccordionFeatureCard.tsxcomponent

components/steez/AccordionFeatureCard.module.cssstyle

components/hooks/useStableId.tsfile

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { AccordionFeatureCard } from "@steez-ui/ui/blocks";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/accordion-feature-card.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { AccordionFeatureCard } from "<project-root>/components/steez/AccordionFeatureCard";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/accordion-feature-card.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Corner Bracket Card

Bracketed feature surface with accent corners for standout content.

Themed Card

Base content container with optional title and featured emphasis.

Cyberpunk Tile

Cut-corner tile with dual-layer border (top-right + bottom-left clips).