GDL - Global Design Language

Typography 

<div class="l-list-border">

    <span class="u-capitalize u-block u-pl-base u-heading-01">heading-01</span>

    <span class="u-capitalize u-block u-pl-base u-heading-02">heading-02</span>

    <span class="u-capitalize u-block u-pl-base u-heading-03">heading-03</span>

    <span class="u-capitalize u-block u-pl-base u-heading-04">heading-04</span>

    <span class="u-capitalize u-block u-pl-base u-heading-05">heading-05</span>

    <span class="u-capitalize u-block u-pl-base u-heading-06">heading-06</span>

    <span class="u-capitalize u-block u-pl-base u-heading-07">heading-07</span>

    <span class="u-capitalize u-block u-pl-base u-heading-08">heading-08</span>

    <span class="u-capitalize u-block u-pl-base u-heading-09">heading-09</span>

    <span class="u-capitalize u-block u-pl-base u-nav-01">nav-01</span>

    <span class="u-capitalize u-block u-pl-base u-nav-02">nav-02</span>

    <span class="u-capitalize u-block u-pl-base u-nav-03">nav-03</span>

    <span class="u-capitalize u-block u-pl-base u-nav-04">nav-04</span>

    <span class="u-capitalize u-block u-pl-base u-nav-05">nav-05</span>

    <span class="u-capitalize u-block u-pl-base u-nav-06">nav-06</span>

    <span class="u-capitalize u-block u-pl-base u-title-01">title-01</span>

    <span class="u-capitalize u-block u-pl-base u-title-02">title-02</span>

    <span class="u-capitalize u-block u-pl-base u-title-03">title-03</span>

    <span class="u-capitalize u-block u-pl-base u-title-04">title-04</span>

    <span class="u-capitalize u-block u-pl-base u-title-05">title-05</span>

    <span class="u-capitalize u-block u-pl-base u-title-06">title-06</span>

    <span class="u-capitalize u-block u-pl-base u-title-07">title-07</span>

    <span class="u-capitalize u-block u-pl-base u-title-08">title-08</span>

    <span class="u-capitalize u-block u-pl-base u-label-01">label-01</span>

    <span class="u-capitalize u-block u-pl-base u-label-02">label-02</span>

    <span class="u-capitalize u-block u-pl-base u-label-03">label-03</span>

    <span class="u-capitalize u-block u-pl-base u-label-04">label-04</span>

    <span class="u-capitalize u-block u-pl-base u-label-05">label-05</span>

    <span class="u-capitalize u-block u-pl-base u-label-06">label-06</span>

    <span class="u-capitalize u-block u-pl-base u-label-07">label-07</span>

    <span class="u-capitalize u-block u-pl-base u-label-08">label-08</span>

    <span class="u-capitalize u-block u-pl-base u-label-09">label-09</span>

    <span class="u-capitalize u-block u-pl-base u-label-11">label-11</span>

    <span class="u-capitalize u-block u-pl-base u-body-01">body-01</span>

    <span class="u-capitalize u-block u-pl-base u-body-02">body-02</span>

    <span class="u-capitalize u-block u-pl-base u-body-03">body-03</span>

    <span class="u-capitalize u-block u-pl-base u-body-04">body-04</span>

    <span class="u-capitalize u-block u-pl-base u-body-05">body-05</span>

    <span class="u-capitalize u-block u-pl-base u-caption-01">caption-01</span>

    <span class="u-capitalize u-block u-pl-base u-caption-02">caption-02</span>

</div>
 
<div class="l-list-border">
{% for typo in typography %}
<span class="u-capitalize u-block u-pl-base u-{{typo.name}}">{{typo.name}}</span>
{% endfor %}
</div>
 
{
  "typography": [
    {
      "typo": null,
      "name": "heading-01"
    },
    {
      "typo": null,
      "name": "heading-02"
    },
    {
      "typo": null,
      "name": "heading-03"
    },
    {
      "typo": null,
      "name": "heading-04"
    },
    {
      "typo": null,
      "name": "heading-05"
    },
    {
      "typo": null,
      "name": "heading-06"
    },
    {
      "typo": null,
      "name": "heading-07"
    },
    {
      "typo": null,
      "name": "heading-08"
    },
    {
      "typo": null,
      "name": "heading-09"
    },
    {
      "typo": null,
      "name": "nav-01"
    },
    {
      "typo": null,
      "name": "nav-02"
    },
    {
      "typo": null,
      "name": "nav-03"
    },
    {
      "typo": null,
      "name": "nav-04"
    },
    {
      "typo": null,
      "name": "nav-05"
    },
    {
      "typo": null,
      "name": "nav-06"
    },
    {
      "typo": null,
      "name": "title-01"
    },
    {
      "typo": null,
      "name": "title-02"
    },
    {
      "typo": null,
      "name": "title-03"
    },
    {
      "typo": null,
      "name": "title-04"
    },
    {
      "typo": null,
      "name": "title-05"
    },
    {
      "typo": null,
      "name": "title-06"
    },
    {
      "typo": null,
      "name": "title-07"
    },
    {
      "typo": null,
      "name": "title-08"
    },
    {
      "typo": null,
      "name": "label-01"
    },
    {
      "typo": null,
      "name": "label-02"
    },
    {
      "typo": null,
      "name": "label-03"
    },
    {
      "typo": null,
      "name": "label-04"
    },
    {
      "typo": null,
      "name": "label-05"
    },
    {
      "typo": null,
      "name": "label-06"
    },
    {
      "typo": null,
      "name": "label-07"
    },
    {
      "typo": null,
      "name": "label-08"
    },
    {
      "typo": null,
      "name": "label-09"
    },
    {
      "typo": null,
      "name": "label-11"
    },
    {
      "typo": null,
      "name": "body-01"
    },
    {
      "typo": null,
      "name": "body-02"
    },
    {
      "typo": null,
      "name": "body-03"
    },
    {
      "typo": null,
      "name": "body-04"
    },
    {
      "typo": null,
      "name": "body-05"
    },
    {
      "typo": null,
      "name": "caption-01"
    },
    {
      "typo": null,
      "name": "caption-02"
    }
  ]
}

No notes defined.