GDL - Global Design Language

Tile: Default 

<div class="u-p-medium u-flex u-column u-items-center u-justify-center u-size-full u-radius-base   o-bg-primary  ">
    <div class="u-text-center">
        <h2 class="u-title-03 u-m-none   u-color-inverse ">6.3 Milioni</h2>
        <p class="u-nav-03 u-my-none   u-color-inverse ">pagine viste</p>
    </div>
    <svg class="o-icon o-icon--md u-mt-xsmall u-mr-xxsmall   u-color-inverse ">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-file-text"></use>
    </svg>
</div>
 
<div class="u-p-medium u-flex u-column u-items-center u-justify-center u-size-full u-radius-base {% if default %}  o-bg-primary {% endif %} {% if inverse %} o-bg-base u-border-2 u-border-solid u-color-theme {% endif %}">
  <div class="u-text-center">
    <h2 class="u-title-03 u-m-none {% if inverse %} u-color-theme {% endif %} {% if default %} u-color-inverse {% endif %}">{{title}}</h2> 
    <p class="u-nav-03 u-my-none {% if inverse %} u-color-theme {% endif %} {% if default %} u-color-inverse {% endif %}">{{subtitle}}</p>        
  </div>
  <svg class="o-icon o-icon--md u-mt-xsmall u-mr-xxsmall {% if inverse %} u-color-theme {% endif %} {% if default %} u-color-inverse {% endif %}">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-file-text"></use>
  </svg>
</div>
 
{
  "title": "6.3 Milioni",
  "subtitle": "pagine viste",
  "default": true
}

No notes defined.