Codebay Innovation
CodeBay Coding

How to customize div wrapper from component

In a previous post we saw how it is possible to remove the default DIV wrapper automatically generated by AEM for each component. In this article we will see instead how to customize DIV wrapper from component.

Just a quick recap on AEM DIV wrapper

AEM wrap by default each component html placed in a page with a DIV tag with an associated class named matching the component name:

How to customize div wrapper

We can use cq:htmlTag node to manipulate wrapper div using following properties:

  • class – The CSS class names that may be used for styling.
  • id – The id of the element in the rendered HTML.
  • cq:tagNameThe tag that will be used to represent our component in the DOM (div, span, p, etc.)

For example, with the following settings:

we will get an html wrapper like this:

Do you need help for you AEM projects?

You Might Also Like

No Comments

    Leave a Reply