<!--  Used to test the conditions of given expression -->
<sly data-sly-test="${properties.jcr:title">
  <h1>${properties.jcr:title}</h1>
</sly>

<!--
  Used to set the variable and used within the scope of the block
  In below code it sets the size to the variable length
-->
<div
  data-sly-set.length="${objectVariable.size}"
  Hello World
</div>

<!--
  Used to replace the <a> tag with <button> element, for security reasons this
  tag restricts the replace tags to predefined list and can be enabled by
  disabling XSS security.
-->
<a class="button" href="${href}"
data-sly-element="${!href && 'button' @ context='unsafe'}">
Hello World !!!
</a>

<!-- Used to add the attribute on the tag based on some conditions -->
<div
  title="Hello World"
  data-sly-attribute.title="${properties.jcr:title}">
  HelloWorld !!!
</div>

<!-- Used to unwrap the tag it surrounds with -->
<div data-sly-unwrap>HelloWorld!!!</div>

<!--
  Used to join the string of arrays into one string
  // Outputs - Hello World
-->
<sly data-sly-test.joinString="${['Hello', 'World'] @ join=' '}" />
<div>${joinString}</div>

<!--
  Used to print the values on the position of the string array
// Outputs - Hello World!!!
-->
<sly data-sly-test.formatString="${'{0} {1}' @ format=['Hello', 'World!!!']}" />
<div>${formatString}</div>

<!-- Used to print the list of child elements wrapped around the parent
     // <span> is displayed based on the size of the children
-->
<div data-sly-list="${page.listChildren}">
  <span>Index Value: ${itemList.index}</span>
</dl>

<!-- Used to print the parent and children elements
     // <div> and <span> is displayed based on the size of the children

item: The current item in the iteration.
itemList: Object holding the following properties:
- index: zero-based counter ( 0..length-1 ).
- count: one-based counter ( 1..length ).
- first: true if the current item is the first item.
- middle: true if the current item is neither the first nor the last item.
- last: true if the current item is the last item.
- odd: true if index is odd.
- even: true if index is even.
-->
<div data-sly-repeat="${page.listChildren}">
  <span>Index Name: ${item.name}</span>
</div>

<!-- Used to replace the content with included .html or .jsp
-->
<div data-sly-include="path/to/any.html">
  Element to be replaced
</div>

<!-- Used to include the component resource in other component and
     resolves the component using sling resolution
-->
<sly data-sly-resource="${'path' @
resourceType='project/components/examplecomponent'
cssClassName='ANY_ADDITIONAL_CLASSS' decoration=true}" />

<!-- Variation of resource include with selector selection
-->
<sly data-sly-resource="project/components/examplecomponent
@ selectors=['selectortype']" />

<!-- Used to declare the template structure for the HTML to be reused
-->
<sly data-sly-template.templateExample="${ @ heading}"><h1>${heading}</h1></sly>

<!-- Used to call the template declared using above template tag
-->
<div data-sly-call="${templateExample @ heading=properties.jcr:title}">
  Div that gets replaced
</div>

<!-- Used to initial the java model object and ready to access the public
     getter methods from that model
-->
<div
 data-sly-use.javaSlingModelObject="${'com.project.sightly.JAVACLASS'}">
  ${javaSlingModelObject.title}
</div>

<!-- Used to access the clientlib markup template -->
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />