How to write the condition for a text field when a checkbox whose calss name is hero if it's true then for that text field <p> tag will generate otherwise <h1> tag will generate.

[ssin93]

below is the p tag for which i need to write condition 
<div class="pad-1-t pad-1-b">
<p style="text-align: left;">${item.offerHeader @ context='html'}</p>
</div>

NOTE- that checkbox is in page properties.

[sravs · Accepted solution]

Hi @ssin93 , 

Use data-sly-element to change the tag according to your condition shown as below.

<p style="text-align: left;" data-sly-element=${pageProperties.PROPERTY_NAME? 'p' : 'h1'}>${item.offerHeader @ context='html'}</p>

Please refer https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#224-element

Hope this helps!!