Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments

Develop a component with Style System in AEM | AEM Community Blog Seeding




Develop a component with Style System in AEM by Vishang


Creating a heading component with style system

Creating a heading component from title component.

Create a component called heading inside /apps/your-project-flder/components/content/~create component

create heading.html


create heading.js
"use strict";
use(function() {
var titleByAuthor =["titleProperty"];
var jcrtitle = currentPage.title;
var pageName =;
var title = titleByAuthor || jcrtitle || pageName;

return {
Next thing we need is the dialog boxes. So copy cq:dialog and cq:design_dialog from title component.

Now in order to have style tab. Copy styletab node from any core component and paste it inside items node in cq:design_dialog

Add a styles in your clientlib-components folder. Create a clientlib folder for your component. create css.txt and styles.less files inside css folder as per the standard practice for adding styles to the component.

Read Full Blog

Develop a component with Style System in AEM


Please use this thread to ask the related questions.

0 Replies