Features Accordian

Smooth showcase pills

FeatureAccordionShowcase is an interactive two-panel product feature display, inspired by expanding feature-pill patterns. It’s built for showcasing a product (currently set up with camera lens features as example content) alongside supporting imagery. Layout & behavior: Splits into a features column and an image panel, arranged side-by-side (features left, image right) or stacked (image on top, features below) — switchable manually or automatically on narrow/mobile widths. Features are listed as collapsible pills, all closed by default, each showing just a title with a “+” indicator. Clicking a pill smoothly expands it to reveal its description, automatically collapsing whichever pill was previously open — only one stays open at a time. While a pill is open, the image panel instantly swaps to that feature’s dedicated image (falling back to a shared default image otherwise). A close icon appears in the top-right corner of the image only while a pill is open, letting users collapse everything back to the closed state. On mobile/vertical layouts, the features list becomes scrollable if there are more pills than fit in the available space. Customization controls include: Editable feature list (title, description, optional icon, optional per-feature image) and default image Manual horizontal/vertical layout switch Title and description typography (font, size, weight, color) Pill background, closed/open corner radius, and separate border colors for the card and pills Adjustable padding (pill padding, outer stack padding), spacing (between pills, title-to-description, title-to-“+”), and icon size A single built-in Framer Transition control driving all open/close animations for consistent, adjustable motion It’s fully static-render safe, responsive, and accessible (proper ARIA states on the expandable pills).

Smooth showcase pills