Building an Expanding Article Stack
Framer Academy tutorial that builds a collapsible article stack in a hero section, pulling live content from a CMS collection.
Why we picked it
A concrete design pattern for CMS list content that goes beyond a flat grid. It shows how to animate content from a collection into a compact, expandable hero layout.
What you’ll learn
- Pull live CMS items into a hero-level pattern
- Design a collapsible stack with Framer interactions
- Keep the layout maintainable as the collection grows
- Apply the pattern to blogs, press, or feature indexes
Who it’s for
Intermediate designers who want a memorable, content-driven pattern for homepages and hero sections.
Open this video at the source
framer.com/academy
Related tutorials
More from design patterns and other intermediate resources3 picks
Utilizing collection lists in Framer
Official lesson on repeating indexes: insert a collection list, bind card fields, then sort, filter, limit, and paginate.
How to add dynamic filters to CMS lists
Help Center guide to interactive filters — search, tabs, toggles, dropdowns, and checkboxes on published collection lists.
Framer CMS Tutorial: Build a Blog or Portfolio
Step-by-step 2026 article for shipping a blog or portfolio: collections, fields, detail pages, lists, filters, and CMS SEO basics.