AEM's Style System allows visual variations of components without back-end development, allowing better re-use of AEM components, and more versatile and efficient content authoring. The Style System, when used in conjunction with AEM's Core Components, template editor, and responsive layout, offers powerful capabilities to quickly compose rich experiences.


The AEM Style System was introduced with AEM 6.3 SP1 + Feature Pack 20593.

This video demonstrates how the Style System can be leveraged to create dramatically different visual appearances for a single Component, using only CSS.

The styles we'll be reviewing are provided by the We.Retail application for the List component. These styles are defined as CSS and do not require changes to the component's backend logic, the HTL script or Sling Model, in order to manifest.

Supporting materials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy