{% set active_page = 'Typography' -%}

{% extends "layouts/" + layout + ".html" %}

{% block content %}
<div class="portal-pages__header">
  <svg class="portal-pages__header-icon" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="64" height="64" viewBox="0 0 64 64">
    <g class="nc-icon-wrapper">
      <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M28 43L43 1h1l15 42"></path>
      <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M33 29h21"></path>
      <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M5 43l8-23h1l8 23"></path>
      <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M7 36h13"></path>
      <path fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M56 63l7-7-7-7"></path>
      <path fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M8 49l-7 7 7 7"></path>
      <g>
        <path fill="none" stroke-width="2" stroke-miterlimit="10" d="M63 56H1"></path>
      </g>
    </g>
  </svg>
</div>
<section class="portal-pages__content">
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-1-desktop"></div>
      <div class="mdc-layout-grid__cell--span-10-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone portal-pages__content-inner">
        <h3 class="portal-pages__heading">Typography</h3>
        <p>Portal comes with a wide range of options to setup a unique typography sensation.</p>

        <p>Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.</p>

        <p>MDC Typography is a foundational module that applies these styles to MDC Web components.</p>

        <p>Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.</p>
        <p>The typographic styles in this module are derived from ten styles:</p>
        <h1 class="mdc-typography--display4">Display 4</h1>
        <h1 class="mdc-typography--display3">Display 3</h1>
        <h1 class="mdc-typography--display2">Display 2</h1>
        <h1 class="mdc-typography--display1">Display 1</h1>
        <h1 class="mdc-typography--headline">Headline</h1>
        <h2 class="mdc-typography--title">
          Title <span class="mdc-typography--caption">Caption.</span>
        </h2>
        <h3 class="mdc-typography--subheading2">Subheading 2</h3>
        <h4 class="mdc-typography--subheading1">Subheading 1</h4>
        <p class="mdc-typography--body1">Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
          in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <aside class="mdc-typography--body2">Body 2 text, calling something out.</aside>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}{% endblock %}