Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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 = granite.resource.properties["titleProperty"];
var jcrtitle = currentPage.title;
var pageName = currentPage.name;
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.

Kautuk Sahni
0 Replies