Adobe Experience Manager (AEM) Core Components are a set of standardized components that can be used to speed up development of websites.

Core Components are versioned and installed separately from AEM. Core Components have an independent release cycle with more frequent updates throughout the year.

For more specific information on Core Components,

Including Core Components in your AEM project

Core Components should never be used directly, but rather proxied in by the custom application. The proxy components are simply cq:Component resource definitions with a sling:resourceSuperType that points to the appropriate version of the corresponding Core Component components. 

Proxy of the Title Core Component

/apps/l725/components/content/title
   @jcr:primaryType = cq:Component
   @sling:resourceSuperType = core/wcm/components/title/v2/title

HTML as a Public API

Core Components are standardized on BEM (Block Element Modifier) naming methodology, and use this to define Core Components' stable, public HTML APIs. 

Note:

When writing CSS and JavaScript for Core Components, only target the BEM CSS classes, and avoid selecting bare elements. 

Below is the BEM notation for the Title component,

BLOCK cmp-title
    ELEMENT cmp-title__text

Step by Step

Review the project proxied AEM Core Components. 

  1. Navigate to CRXDE Lite (http://localhost:4502/crx/de/index.jsp) via the Bookmarks. 

  2. Expanding /apps/l725/components/content .

  3. Tap the title node.

  4. Review the property sling:resourceSuperType and its value. The value points to the versioned Core Component implementation to be used.

    step-1
  5. Repeat for image, list components. 

Tutorial Table of Contents

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