Block Collection

The AEM Block Collection is a set of reusable blocks that ship as part of the Edge Delivery Services product itself, rather than living in any one project's repo.

What it is

A block earns a place in the collection by being common enough — roughly, used across more than half of AEM projects — and generic enough to be abstracted without changing the underlying content model. Adobe treats these as blueprints: recommended starting points for the equivalent block in your own project rather than a dependency you install as-is.

Design principles

• Content structure that reads naturally to an author, not just to code
• No external dependencies; works against plain boilerplate
• Responsive at every breakpoint
• Inherits styling and context from the surrounding page instead of fighting it
• No hard-coded copy, so it stays localization-friendly
• Minimal performance cost
• Accessible and SEO-friendly by default

Using a block from the collection

The fastest path is the Sidekick library: open it, find the block, and use its copy button, then paste that into a document. That gives you the exact content structure the block expects, so authors start from the right shape immediately.

To actually implement it, pull the block's CSS and JS from the collection repository into blocks/{blockname}/ in your own project and adapt as needed — it follows the same blockname.css / blockname.js convention as any other block.

What's included

Current blocks in the collection: Embed, Fragment, Table, Video, Accordion, Breadcrumbs, Carousel, Modal, Quote, Search, and Tabs (an earlier Form block still exists but is deprecated).

Source

Browse or pull the code directly from github.com/adobe/aem-block-collection.