{{#with button}}
<button class="btn btn--primary" data-js="modal-toggle" data-modal-target="#{{modalId}}">{{value}}</button>
{{/with}}
{{#with modal}}
<div id="{{id}}" class="modal {{#if hasOverlay}}has-overlay{{/if}} {{#if isInline}}is-static{{/if}}" {{#unless isInline}}data-js="modal"{{/unless}}{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
  <div class="modal__box {{classesAndModifiers this ""}}">
  {{#if hasCloseIcon}}
    <a href="#" class="icon icon--16x16 icon--x-grey modal__close{{#if modalHead}} in-head{{/if}}" data-js="modal-close">close</a>
  {{/if}}
  {{#with modalHead}}
    <div class="modal__head">
    {{{content}}}
    </div>
  {{/with}}
  {{#with modalContent}}
    <div class="modal__content {{classesAndModifiers this ""}}">
    {{{content}}}
    </div>
  {{/with}}
  {{#with modalFoot}}
    <div class="modal__foot {{classesAndModifiers this ""}}">
    {{{content}}}
    </div>
  {{/with}}
  </div>
</div>
{{/with}}