GDL - Global Design Language

Animation 

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-1">u-a-cloned-1</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-2">u-a-cloned-2</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-3">u-a-cloned-3</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-4">u-a-cloned-4</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-5">u-a-cloned-5</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-6">u-a-cloned-6</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-7">u-a-cloned-7</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-cloned-8">u-a-cloned-8</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline">u-a-underline</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--thick">u-a-underline u-a-underline--thick</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--theme">u-a-underline u-a-underline--theme</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--center">u-a-underline u-a-underline--center</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--reverse">u-a-underline u-a-underline--reverse</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--mirror">u-a-underline u-a-underline--mirror</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline u-a-underline--updown">u-a-underline u-a-underline--updown</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline-6">u-a-underline-6</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-underline-8">u-a-underline-8</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-1">u-a-sides-1</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-2">u-a-sides-2</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-3">u-a-sides-3</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-4">u-a-sides-4</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-5">u-a-sides-5</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-sides-7">u-a-sides-7</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-transformed-3">u-a-transformed-3</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-transformed-4">u-a-transformed-4</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-transformed-5">u-a-transformed-5</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-transformed-6">u-a-transformed-6</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-1">u-a-thick-1</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-2">u-a-thick-2</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-3">u-a-thick-3</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-4">u-a-thick-4</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-5">u-a-thick-5</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-6">u-a-thick-6</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-7">u-a-thick-7</span>

<span class="u-capitalize u-m-xlarge u-relative u-a-thick-8">u-a-thick-8</span>
 
{% for typo in animation %}
<span class="u-capitalize u-m-xlarge u-relative {{typo.name}}">{{typo.name}}</span>
{% endfor %}
 
{
  "animation": [
    {
      "typo": null,
      "name": "u-a-cloned-1"
    },
    {
      "typo": null,
      "name": "u-a-cloned-2"
    },
    {
      "typo": null,
      "name": "u-a-cloned-3"
    },
    {
      "typo": null,
      "name": "u-a-cloned-4"
    },
    {
      "typo": null,
      "name": "u-a-cloned-5"
    },
    {
      "typo": null,
      "name": "u-a-cloned-6"
    },
    {
      "typo": null,
      "name": "u-a-cloned-7"
    },
    {
      "typo": null,
      "name": "u-a-cloned-8"
    },
    {
      "typo": null,
      "name": "u-a-underline"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--thick"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--theme"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--center"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--reverse"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--mirror"
    },
    {
      "typo": null,
      "name": "u-a-underline u-a-underline--updown"
    },
    {
      "typo": null,
      "name": "u-a-underline-6"
    },
    {
      "typo": null,
      "name": "u-a-underline-8"
    },
    {
      "typo": null,
      "name": "u-a-sides-1"
    },
    {
      "typo": null,
      "name": "u-a-sides-2"
    },
    {
      "typo": null,
      "name": "u-a-sides-3"
    },
    {
      "typo": null,
      "name": "u-a-sides-4"
    },
    {
      "typo": null,
      "name": "u-a-sides-5"
    },
    {
      "typo": null,
      "name": "u-a-sides-7"
    },
    {
      "typo": null,
      "name": "u-a-transformed-3"
    },
    {
      "typo": null,
      "name": "u-a-transformed-4"
    },
    {
      "typo": null,
      "name": "u-a-transformed-5"
    },
    {
      "typo": null,
      "name": "u-a-transformed-6"
    },
    {
      "typo": null,
      "name": "u-a-thick-1"
    },
    {
      "typo": null,
      "name": "u-a-thick-2"
    },
    {
      "typo": null,
      "name": "u-a-thick-3"
    },
    {
      "typo": null,
      "name": "u-a-thick-4"
    },
    {
      "typo": null,
      "name": "u-a-thick-5"
    },
    {
      "typo": null,
      "name": "u-a-thick-6"
    },
    {
      "typo": null,
      "name": "u-a-thick-7"
    },
    {
      "typo": null,
      "name": "u-a-thick-8"
    }
  ]
}

No notes defined.