Collapsible Content

An accordion that opens into a real layout, not just a paragraph of text. Each dropdown can reveal up to three columns of images and text cards in any combination, so a single FAQ row can hold a product shot next to an answer, or three side-by-side detail cards. Perfect for brands with a lot to explain who want their FAQ, ingredient breakdown, or care guide to look as considered as the rest of the page. Key Features: Each dropdown holds 1–3 columns, and every column independently switches between image and text — so one row can be image + text, the next three text cards, the next a single wide column, all inside the same section Text columns can take their own card background and text color, with the card stretching to match the tallest column in the row so an image and a text card always line up cleanly Smooth open/close animation done with CSS grid rather than JavaScript height measuring, so panels expand accurately no matter how much content is inside and never jump on resize — plus single-open behavior so opening one row closes the last Swap the open and closed icons for any inline SVG (Lucide icons paste straight in) and set their color, or leave blank for the default caret Per-column typography with separate heading and body styles, size overrides, max-widths, and colors on all three columns, plus section-level control over the heading, intro, and dropdown labels and accent text styling on the main heading Works with Dawn color schemes or custom colors, with the dividers and icons following whichever you choose Layout tuned to the pixel: optional dividers with adjustable thickness, row padding, content padding, card padding, column gap, image ratios per column (including "adjust to image"), corner radius, vertical alignment, and an optional full-width container Perfect for: FAQs, ingredient and sourcing details, care and sizing guides, service breakdowns, shipping and returns info, or any long-form content you'd rather not stack down the page.