<!--
/**
 *
 * @title Partial for Typography component
 *
 */
-->
<section id="{{toID title}}" class="sugar-section sugar-section-type">
  <div class="sugar-section-wrapper">
    <h2 class="sugar-h2"><a href="#{{toID title}}">{{ title }}</a></h2>
    {{#each files}}
      <div class="sugar-component">
        <div id="{{ toID path @index }}">
          {{#each data}}
            {{> block-title data=this}}
            <div class="sugar-type-file">
              {{#each serializedCode}}
                <div class="sugar-type-container">
                  <div class="sugar-type-example">
                    <p class="sugar-p" style="font-family: {{ value }}">The quick brown fox jumps over the lazy dog.</p>
                  </div>
                  <pre class="sugar-var sugar-pre">{{ variable }}</pre>
                  <pre class="sugar-val sugar-pre">{{ value }}</pre>
                  {{#if comment }}
                    <p class="sugar-type-desc sugar-p">{{ comment }}</p>
                  {{/if }}
                </div>
              {{/each}}
            </div>
          {{/each}}
        </div>

        <p class="sugar-file sugar-p">File: <span class="sugar-path">{{ path }}</span></p>

      </div>
    {{/each }}
  </div>
</section>