CMS Tag Stack — filterable thumbnail list for Framer

What it is

The index a site puts on an archive page: one collection, a line of tag chips, and a row per entry with its picture on one side and its words on the other.

What you get

• One Framer code component (CMS Tag Stack), delivered as a Component URL.

• Per-item controls: title, caption, a comma list of tags, image with alt text, link, new-tab, and a tint that draws the thumbnail while an image is still on the way.

• A component slot per row, so a CMS collection drives the stack directly.

• The stack set in plain choices: thumbnail side, width and ratio, row gap and padding, dividers, stripes, radius, font, text size, alignment and max width.

• Free updates.

How it behaves

• A row is one CSS grid. The thumbnail column takes the width you set and the text column takes the rest, so the two sides line up down the whole stack without a measurement anywhere. No observer, no timer, no animation library.

• Either side, three shapes. One switch moves the thumbnail column to the right, and one ratio — square, 4:3 or 16:9 — reserves its height before anything paints, so the stack holds still while images arrive.

• Chips stack. Several tags can be on at once, and one switch decides whether a row needs any of them or all of them.

• One class swap. Pressing a chip swaps a class; filtered rows fade out over the time you set, leave the stack and the rest close up. Nothing is measured.

• Rules and banding stay honest. Dividers and stripes are counted from the rows still showing, so a filtered stack never opens with a stray rule or a doubled band.

• Numbers where they help. Each chip carries the count behind it and a polite line reads out the total showing.

• Self-contained. Everything happens inside the component's own frame: your project's images, your CMS, your styles. A slotted row takes its slot's own height.

Requirements

Any Framer project. No plugins, no external libraries.