AFW Pattern Lab

Typography 

<!-- Default -->
<div class="sg sg-typography">
    <div class="sg-typography__type">
        <div class="sg-typography__name">Cabin</div>
        <p class="h1-style mb-0 fw-900" style="font-family:'Cabin', Arial, sans-serif;">Cabin</p>
        <p class="h2-style mb-0" style="font-family:'Cabin', Arial, sans-serif;fontWeight:400">&#39;Cabin&#39;, Arial, sans-serif</p>
        <p style="font-family:'Cabin', Arial, sans-serif;font-weight:400">abcdefghijklmnopqrstuvwxyz<br />ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />1234567890</p>
    </div>
</div>


<!-- Source Sans Pro -->
<div class="sg sg-typography">
    <div class="sg-typography__type">
        <div class="sg-typography__name">Source Sans Pro</div>
        <p class="h1-style mb-0 fw-900" style="font-family:'Source Sans Pro', Helvetica, Helvetica Neue, sans-serif;">Source Sans Pro</p>
        <p class="h2-style mb-0" style="font-family:'Source Sans Pro', Helvetica, Helvetica Neue, sans-serif;fontWeight:400">&#39;Source Sans Pro&#39;, Helvetica, Helvetica Neue, sans-serif</p>
        <p style="font-family:'Source Sans Pro', Helvetica, Helvetica Neue, sans-serif;font-weight:400">abcdefghijklmnopqrstuvwxyz<br />ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />1234567890</p>
    </div>
</div>


<!-- Caveat -->
<div class="sg sg-typography">
    <div class="sg-typography__type">
        <div class="sg-typography__name">Caveat</div>
        <p class="h1-style mb-0 fw-900" style="font-family:'Caveat', cursive;">Caveat</p>
        <p class="h2-style mb-0" style="font-family:'Caveat', cursive;fontWeight:400">&#39;Caveat&#39;, cursive</p>
        <p style="font-family:'Caveat', cursive;font-weight:400">abcdefghijklmnopqrstuvwxyz<br />ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />1234567890</p>
    </div>
</div>


<div class="sg sg-typography">
    <div class="sg-typography__type">
        <div class="sg-typography__name">{{name}}</div>
        <p class="h1-style mb-0 fw-900" style="font-family:{{fontFamily|safe}};">{{name}}</p>
        <p class="h2-style mb-0" style="font-family:{{fontFamily|safe}};fontWeight:{{fontWeight|safe}}">{{fontFamily}}</p>
        <p style="font-family:{{fontFamily|safe}};font-weight:{{fontWeight|safe}}">abcdefghijklmnopqrstuvwxyz<br/>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/>1234567890</p>
    </div>
</div>
 
/* Default */
{
  "name": "Cabin",
  "fontFamily": "'Cabin', Arial, sans-serif",
  "fontWeight": 400
}


/* Source Sans Pro */
{
  "name": "Source Sans Pro",
  "fontFamily": "'Source Sans Pro', Helvetica, Helvetica Neue, sans-serif",
  "fontWeight": 400
}


/* Caveat */
{
  "name": "Caveat",
  "fontFamily": "'Caveat', cursive",
  "fontWeight": 400
}

No notes defined.