GDL - Global Design Language

Boxcta 

<div class="c-boxcta u-flex u-column u-row@sm u-justify-between u-my-large u-p-small">
    <div class="u-flex u-items-center">
        <img class="c-boxcta__img u-size-64 u-m-none" src="https://dni-cdn.goalshouter.com/static-dni-production/uploads/team_logo/e17d647a-af6e-4359-aff6-7fb2c8bacd79" alt="">

        <div class="u-ml-base">
            <h2 class="u-title-05 u-m-none">Us Livorno</h2>
            <span class="u-label-07 u-block">Scarica l&#39;app per aggiornamenti e classifiche</span>
        </div>
    </div>

    <div class="u-my-small">

        <button class="c-btn c-btn--primary 
   
  
    u-flex
  
   
    c-btn--small 
    u-label-05
   
   
  u-cursor-pointer  u-items-center">
            APP GRATIS

        </button>
    </div>
</div>
 
<div class="c-boxcta u-flex u-column u-row@sm u-justify-between u-my-large u-p-small">
  <div class="u-flex u-items-center">
    <img class="c-boxcta__img u-size-64 u-m-none" src="{{logo}}" alt="">
  
    <div class="u-ml-base">
      <h2 class="u-title-05 u-m-none">{{name}}</h2>
      <span class="u-label-07 u-block">{{claim}}</span>
    </div>
  </div>

  <div class="u-my-small">
    {% render "@button--primary", {label:'APP GRATIS', size: 'small'}, true %}
  </div>
</div>
 
{
  "logo": "https://dni-cdn.goalshouter.com/static-dni-production/uploads/team_logo/e17d647a-af6e-4359-aff6-7fb2c8bacd79",
  "name": "Us Livorno",
  "claim": "Scarica l'app per aggiornamenti e classifiche"
}
  • Content: 
    .c-boxcta {
  border: 1px solid $ui-04;
  img {
    .c-entry & {
      margin: 0;
    }
  }
}
  • URL: /components/raw/boxcta/boxcta.scss
  • Filesystem Path: src/lib/components/boxcta/boxcta.scss
  • Size: 93 Bytes

No notes defined.