Adobe Experience Manager'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.

Note:

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

The concepts in the video carry forward to AEM versions greater than AEM 6.3, however, the accompanying AEM package should only be installed on AEM 6.3, due to collisions with We.Retail-provided styles in AEM 6.4 and later. Installing this package on AEM 6.4 may result in broken List component behavior on the We.Retail sample site.

For AEM 6.4 and later, please review this video that has been updated to use the updated We.Retail List component.


This video demonstrates with ONLY the customization of CSS (using LESS for convenience) and JavaScript, and unaltered AEM Core List Component can take on a variety visual representations. AEM's Style System not only facilitates this variance in visual presentation but provides simple controls in the page editor to preview and apply the various styles.

Supporting materials

The following AEM Package provides the style implementation and configurations shown in the video.

Please note this package

  • Isolates the Styled Experience pages in the video to a Style System page under the We.Retail / US / English page. 
  • Updates the We.Retail Hero Page Template to use a new We.Retail Page - Style System policy. 
  • Updates the sling:resourceSuperType for the We.Retail Page and List components to use the v2 Core Component equivalent.

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