Block Collection

Last update: February 26, 2025

This is a collection of blocks considered a part of the AEM product and are recommended as blueprints for blocks in your project.

These blocks come from real production AEM projects. To be a part of this collection, a block needs to have a high use across a number of projects and provide enough abstract functionality and be general enough so it can be reused without having to change the underlying content model.

As the needs and designs of websites change, the block collection will change as well. Additions will be made to reflect emerging needs of projects, but blocks that are not used frequently enough will also be removed (deprecated).

There are few technical principles for the blocks in the collection:

  • Intuitive: Content structure that’s intuitive and easy to author
  • Useable: No dependencies, compatible with boilerplate
  • Responsive: Works across all breakpoints
  • Context Aware: Inherits CSS context such text and background colors
  • Localizable: No hard-coded content
  • Fast: No negative performance impact
  • SEO and A11y: SEO friendly and accessible

All of the blocks can be considered as a basis for your own block development. It is very likely that you will change all the .css and .js code to meet your own project needs. The primary value of these blocks is the content structure they provide.

Considering that the code of your block will be fully adapted to your project, there is no intent for the blocks in the collection to be backwards compatible to their respective older versions or to make them upgradable.

Boilerplate

The most commonly used blocks (as well as default content types) are curated in the AEM Boilerplate and are a part of every AEM project. For a block to become a part of boilerplate it has to be used by the vast majority of all AEM projects.

The code base for all the blocks in AEM Boilerplate is open-source and can be found on GitHub adobe/aem-boilerplate

Blocks in AEM Boilerplate can be discovered using the sidekick library below, use the copy button to copy the corresponding content structure into your clipboard and paste into a document to see the content structure.

Headings

Default Content

Different levels of headings provide the semantic backbone of your document

Text

Default Content

Body text or copy with rich semantic formatting options

Images

Default Content

Pictures bring your content alive

Lists

Default Content

Ordered and unordered lists wherever they are needed

Default Content

Reference other websites or your own content

Buttons

Default Content

Call-to-action buttons and more

Code

Default Content

Highlight preformatted code snippets in your content

Sections

Default Content

Group content on your page into sections

Icons

Default Content

Make your content more interesting with icons

Hero

Block

Hero treatment at the top of a page

Columns

Block

Flexible way to handle multi-column layouts in a responsive way

Cards

Block

List of cards with or without images and links

Block

Flexible header and navigation example

Block

Simple extensible footer block

Metadata

Add metadata to your page where needed

Section Metadata

Highlight or structure all the content in a section

Block Collection

The block collection contains blocks that are commonly-used, but are not so common to be considered boilerplate. As a rule-of-thumb, to be included in the block collection a block must be used on more than half of all AEM projects.

The block collection can be the entry path into boilerplate code. Likewise if a block in the boilerplate is no longer used as much, it can be moved to this collection.

The code base for all the blocks in AEM Block Collection is open-source and can be found on GitHub adobe/aem-block-collection

Blocks in AEM Block Collection can be discovered using the sidekick library below, use the copy button to copy the corresponding content structure into your clipboard and paste into a document to see the content structure.

Embed

Block

A simple way to embed social media content into AEM pages

Fragment

Block

Share pieces of content across multiple pages

Table

Block

A way to organize tabular data into rows and columns

Video

Block

Display and playback videos directly from AEM

Accordion

Block

A stack of descriptive labels that can be toggled to display related full content

Block Add-on

A list of page titles and relevant links showing the location of the current page in the navigational hierarchy

Block

A dynamic display tool that smoothly transitions through a series of images with optional text content

Autoblock

A popup that appears over other site content

Quote

Block

A display of a quotation or a highlight of specific passage (or “pull quotes”) within a document

Block

Allows users to find site content by entering a search term

Tabs

Block

Segment information into multiple labeled (or “tabbed”) panels

Form

Block (Deprecated)

A set of input controls grouped together that enables users to submit information

The block collection is continually evolving based on the feedback from the AEM community. If you think that there is a block that should be included in the block collection please speak to your AEM contact. Current candidates for inclusion in the block collection include:

  • Consent Banner

If you have immediate need of a block that is not yet part of the collection, it is relatively easy to find AEM projects on GitHub that have example implementations for all of the above candidates.