Pass markup to a template

example.html

<sly data-sly-template.card="${@ img, title, content}">
    <div class="card">
        <img src="${img}" alt/>
        <h2>${title}</h2>
        <div class="content" data-sly-test="${content}" data-sly-call="${content}"></div>
    </div>
</sly>

<sly data-sly-template.example>
    <p>This example shows how to pass markup to a template</p>
</sly>

<sly data-sly-call="${card @ img='hello.jpg', title='Hello World', content=example}"></sly>

output.html

<div class="card">
    <img src="hello.jpg" alt/>
    <h2>Hello World</h2>
    <div class="content">
        <p>This example shows how to pass markup to a template</p>
    </div>
</div>

Hey Gabriel

thank you so much for your example 👍

We got handlebars templates with 10 to 40 nested components.

How would it look like if I placed a Card inside a Card?
Does the following work?

<sly data-sly-template.example>
    <sly data-sly-template.example>
      Demo
    </sly>
    <sly data-sly-call="${card @ img='hello.jpg', title='Inner Card', content=example}"></sly>
</sly>
<sly data-sly-call="${card @ img='hello.jpg', title='Outer Card', content=example}"></sly>

@jantimon, You can do that, but just need to move your inner data-sly-template outside as they cannot be nested. When doing that however, you'll notice that your example will infinitely recourse.

I guess that what you rather wanted to do is something like that:

<sly data-sly-template.innerContent>Demo</sly>

<sly data-sly-template.innerCard>
    <sly data-sly-call="${card @ img='hello.jpg', title='Inner Card', content=innerContent}"></sly>
</sly>

<sly data-sly-call="${card @ img='hello.jpg', title='Outer Card', content=innerCard}"></sly>

And if needed, the parameters could also be passed along from the card to the content template, because in that example the inner card is mostly hardcoded.