Dust.js component usage

template.html

<!-- Expose keys of the `accordion` object to the scope -->
{#accordion}
    <div class="accordion-wrapper">
        <!-- Output a component called `accordion` and pass it `items` + `class` -->
        {@c-accordion items=items class="padding-top-small"}
            <!-- Override the `footer` block -->
            {:footer}
                <!-- Iterate the `links` array and expose keys of each object -->
                {#links}
                    <!-- Output a component called `link` and pass it a `class` -->
                    {@c-link class="padding-all-bottom"}
                        <!-- Use exposed variables `href`, `src` and `alt` -->
                        <a href="{href}">
                            <img src="{src}" alt="{alt}" />
                        </a>
                    {/c-link}
                {/links}
        {/c-accordion}
    </div
{/accordion}

<!-- Check if this scope has a `banners` key -->
{?banners}
    <div class="padding-bottom-small margin-top-small">
        <!-- Iterate the `banners` array and expose each object's keys to the scope -->
        {#banners}
            <!-- Output a component called `banner` passing it the keys exposed to the scope -->
            {@c-banner text=text image=image class="margin-bottom-md" /}
        {/banners}
    </div>
{/banners}