Core Components in AEM

Core Components in AEM

Interview Answer:

Core Components are Adobe-provided reusable, production-ready AEM components that follow best practices and can be extended for custom requirements. They reduce development effort and are fully compatible with AEM as a Cloud Service.

⸻

Why Use Core Components?

• Adobe-maintained
• • Responsive and accessible
• • HTL-based implementation
• • Editable Template support
• • Style System support
• • Cloud Service compatible

⸻

Core Components Location

/libs/core/wcm/components

Project dependency:

<dependency>

. <groupId>com.adobe.cq</groupId>

. <artifactId>core.wcm.components.core</artifactId>

</dependency>

⸻

Commonly Used Core Components

Title Component

core/wcm/components/title/v3/title

Displays page or custom titles.

⸻

Text Component

core/wcm/components/text/v2/text

Rich text editor component.

⸻

Image Component

core/wcm/components/image/v3/image

Supports:

• Dynamic Media
• • Lazy Loading
• • Responsive Images

⸻

Teaser Component

core/wcm/components/teaser/v2/teaser

Combines:

• Image
• • Title
• • Description
• • CTA

⸻

Carousel Component

core/wcm/components/carousel/v1/carousel

Displays multiple slides.

⸻

Accordion Component

core/wcm/components/accordion/v1/accordion

Expandable/collapsible sections.

⸻

Tabs Component

core/wcm/components/tabs/v1/tabs

Tabbed content display.

⸻

Experience Fragment Component

core/wcm/components/experiencefragment/v2/experiencefragment

Embeds Experience Fragments.

⸻

Extending Core Components

Instead of copying code, extend using:

sling:resourceSuperType

Example:

/apps/mysite/components/customtitle

Property:

sling:resourceSuperType=core/wcm/components/title/v3/title

This inherits all functionality from the Core Title component.

⸻

Accessing Core Component Models

@Self

private Title title;

Core Components expose Sling Models that can be reused.

⸻

Style System

Policies can define styles:

Examples:

• Blue Title
• • Large Text
• • Dark Theme

Authors select styles without code changes.

⸻

Real-Time Use Cases

• Website pages
• • Landing pages
• • Marketing sites
• • News portals
• • Commerce integrations

⸻

Interview Questions

Q: What are Core Components?

Answer:

Adobe-provided reusable AEM components built using Sling Models and HTL following best practices.

Q: How do you extend a Core Component?

Answer:

Using:

sling:resourceSuperType

Q: Why are Core Components preferred over custom components?

Answer:

They are maintained by Adobe, support upgrades, accessibility, responsive design, and Cloud Service compatibility.

Q: Where are Core Components located?

Answer:

/libs/core/wcm/components

⸻

One-Line Interview Answer

“Core Components are Adobe’s reusable, production-ready AEM components that can be extended using sling:resourceSuperType and are recommended for all modern AEM projects.”

Next Recommended Topic

Content Fragments in AEM (very frequently asked in AEM Sites and Headless interviews).