<div class="example">
  <div class="card card-default">
    {{#if (content "title")}}
      <div class="card-header example-title"><h2>{{#block "title"}}{{/block}}</h2></div>
    {{/if}}
    <div class="card-body">
      {{#if (content "description")}}
        <div class="example-description">
          {{#block "description"}}{{/block}}
        </div>
      {{/if}}
      <div class="example-demo">
        {{#block "code"}}{{/block}}
      </div>
    </div>
    <div class="card-footer">
      <button class="btn btn-outline-secondary btn-sm example-code-trigger">Show code</button>
      <div class="example-code-container">
        <div class="card-footer--legend">Code</div>
        <pre class="example-code prettyprint lang-html">
          {{~#code}}{{~#block "code"}}{{~/block}}{{~/code}}</pre>
      </div>
    </div>
  </div>
</div>