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
.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.
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.
Different levels of headings provide the semantic backbone of your document
Body text or copy with rich semantic formatting options
Pictures bring your content alive
Ordered and unordered lists wherever they are needed
Reference other websites or your own content
Call-to-action buttons and more
Highlight preformatted code snippets in your content
Group content on your page into sections
Make your content more interesting with icons
Hero treatment at the top of a page
Flexible way to handle multi-column layouts in a responsive way
List of cards with or without images and links
The block collection contains blocks that are used 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 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:
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.
With Block Party, we would like to give our passionate developer community a place to showcase what they have built on AEM sites. It also allows others to avoid reinventing the wheel and reuse these blocks / code snippets / integrations built by the community and tweak the code as necessary to fit their own projects.
Note: While we love and support our AEM developer community, Adobe is not responsible for maintaining or updating the code that is showcased in Block Party. Please use the code at your own discretion.
If you are a AEM Developer and would like to submit your cool block / code snippet or integration, please enter your submission in the form here.