Collapsible Content Section

Expandable rows that can hold images, text, or a mix of both.

Stack of green matcha bars on a dark surface

Mix media and copy

An open panel can pair a column of media with a column of copy. This image column uses the new Adjust to image ratio, so it keeps its own natural shape instead of being cropped to a fixed frame.

Per-row layouts

Yes. Every dropdown sets its own column count, and each column is independently an image or a block of text, so rows can alternate the media side or go text-only.

Two hands holding small amounts of matcha against a brown background

Yep! Set a dropdown to a single text column and it behaves like a classic accordion FAQ. Only one item stays open at a time, and the panel animates open with no JavaScript height measuring.

Copy on the left

With three columns you can wrap copy around a central image, which suits a spec sheet or a quick before-and-after note.

Glass of iced matcha with ice cubes on a dark background

Copy on the right

Each column is set on its own, so the two text columns can say completely different things.

Cocktail in a glass with a logo on a dark surface
Person holding a metal cup with green powder against a dark background

Styled to stand out

Give any column its own card background and text color. This one uses a dark card so it pops beside the two images, all on native CSS grid with no JavaScript.