SIA Web Design Library

Assets: Typography

No notes defined.

<section class='c-banner u-background-dark-blue'>
    <div class='c-banner__content-wrapper'>

        <header class='c-section-header u-background-dark-blue'>

            <p class='c-section-header__supra'><span>Brand</span></p>

            <h1 class='c-heading u-background-dark-blue'>
                Assets
            </h1>

            <p class='c-section-header__sub'><span>Typography</span></p>
        </header>

    </div>
</section>
<section class='container-fluid'>

    <ul class='l-grid u-list--unstyled l-grid--items-2'>

        <li class='l-grid__item'>
            <header class='c-section-header'>

                <h1 class='c-heading u-font-family-body-text'>
                    PT Sans
                </h1>

                <p class='c-section-header__sub'><span>ParaType</span></p>
            </header>
            <div class='c-lead'>
                <p>Use for body text</p>
            </div>
            <p><a class='c-link ' href="https://fonts.google.com/specimen/PT+Sans" itemprop="item" itemid="https://fonts.google.com/specimen/PT+Sans" target="_blank" rel="nofollow"><span itemprop="name">Download from Google Fonts</span></a></p>
        </li>

        <li class='l-grid__item'>
            <header class='c-section-header'>

                <h1 class='c-heading u-font-family-headlines'>
                    PT Serif
                </h1>

                <p class='c-section-header__sub'><span>ParaType</span></p>
            </header>
            <div class='c-lead'>
                <p>Exclusively used for headlines</p>
            </div>
            <p><a class='c-link ' href="https://fonts.google.com/specimen/PT+Serif" itemprop="item" itemid="https://fonts.google.com/specimen/PT+Serif" target="_blank" rel="nofollow"><span itemprop="name">Download from Google Fonts</span></a></p>
        </li>
    </ul>
</section>
 
{% include get_template( 'banner', 'unit' ) with {
    display: {
        backgroundColor: 'dark-blue',
    },
    header: {
        supraheading: 'Brand',
        heading: { 
            text: 'Assets'
        },
        subheading: type,
        lead: NULL,
    },
} %}

<section class='container-fluid'>
    {% include get_template( 'type', 'brand' ) %}
</section>
 
{
  "theme": "education",
  "type": "Typography",
  "items": [
    {
      "typeface": "PT Sans",
      "class": "body-text",
      "source": "https://fonts.google.com/specimen/PT+Sans",
      "description": "Use for body text",
      "creator": "ParaType"
    },
    {
      "typeface": "PT Serif",
      "class": "headlines",
      "source": "https://fonts.google.com/specimen/PT+Serif",
      "description": "Exclusively used for headlines",
      "creator": "ParaType"
    }
  ]
}