<button class="bx--btn {{classPrimaryButton}}" type="button" data-modal-target="#modal-{{idSuffix}}">Show modal</button>

<div data-modal id="modal-{{idSuffix}}" class="bx--modal {{classModalSupplemental}}" tabindex="-1">
  <div class="bx--modal-container">
    <div class="bx--modal-header">
      <p class="bx--modal-header__label bx--type-delta">Optional label</p>
      <p class="bx--modal-header__heading bx--type-beta">Modal heading</p>
      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" {{#unless hasFooter}} data-modal-primary-focus{{/unless}}>
        <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
          <title>Close Modal</title>
          <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
          />
        </svg>
      </button>
    </div>

    <div class="bx--modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae
        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
    </div>

    {{#if hasFooter}}
    <div class="bx--modal-footer">
      <button class="bx--btn {{classCloseButton}}" type="button" data-modal-close>Secondary button</button>
      <button class="bx--btn {{classPrimaryButton}}" type="button" {{#if labelPrimaryButton}}aria-label="{{labelPrimaryButton}}"
        {{/if}} data-modal-primary-focus>Primary button</button>
    </div>
    {{/if}}
  </div>
</div>
