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:tagName – The tag that will be used to represent our component in the DOM (div, span, p, etc.)
For example, with the following settings:
class = myClass
id = myId
cq:tagName = span
we will get an html wrapper like this:
<span id="myId" class="myClass">
.... my component html ....