<div class="c-banner-adv c-banner-adv--superbanner">
    <div class="c-banner-adv__inner c-banner-adv__inner--desktop">
        <a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
            <img src="../../images/banner-adv/970x250.jpg" alt="">
        </a>
    </div>
    <div class="c-banner-adv__inner c-banner-adv__inner--mobile">
        <a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
            <img src="../../images/banner-adv/banner-assaeroporti-340x150.jpg" alt="">
        </a>
    </div>
</div>
<div class="c-banner-adv {{ modifier }}">
  <div class="c-banner-adv__inner c-banner-adv__inner--desktop">
    <a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
      <img src="{{ path img-path }}" alt="">
    </a>
  </div>
  <div class="c-banner-adv__inner c-banner-adv__inner--mobile">
    <a href="http://www.mit.gov.it/conferenza-nazionale" target="_blank">
      <img src="{{ path '/images/banner-adv/banner-assaeroporti-340x150.jpg' }}" alt="">
    </a>
  </div>
</div>
{
  "modifier": "c-banner-adv--superbanner",
  "img-path": "/images/banner-adv/970x250.jpg"
}
  • Content:
    $leaderboard-width: remify(728px);
    $box-width: remify(300px);
    $superbanner-width: remify(970px);
    
    .c-banner-adv {
      text-align: center;
      margin: remify(32px) 0;
      grid-column: main;
    }
    
    /*------------------------------------*\
      Display rules for Leaderboard, Superbanner, Box
    \*------------------------------------*/
    .c-banner-adv--leaderboard,
    .c-banner-adv--superbanner,
    .c-banner-adv--box {
    
      .c-banner-adv__inner--mobile {
        @include min-screen($leaderboard-width) {
          display: none;
        }
      }
    
      .c-banner-adv__inner--desktop {
        display: none;
    
        @include min-screen($leaderboard-width) {
          display: block;
        }
      }
    
    }
    
    /*------------------------------------*\
      Box
    \*------------------------------------*/
    .c-banner-adv--box {
      margin: 0;
    }
    
    /*------------------------------------*\
      Leaderboard colored
    \*------------------------------------*/
    .c-banner-adv--leaderboard-colored {
      margin: 0;
      background-color: primary(night, 120);
    
      iframe {
          margin: remify(8px) 0;
      }
    }
  • URL: /components/raw/banner-adv/_banner-adv.scss
  • Filesystem Path: src/views/01-atoms/banner-adv/_banner-adv.scss
  • Size: 1 KB

Specifiche

I banner leaderboard, leaderboard-colored e superbanner mostrano nella versione mobile un banner 300x100.

La versione box invece non ha un versione mobile.

Banner Desktop Mobile
leaderboard 728x90 300x100
leaderboard-colored 728x90 300x100
box 300x250 n.d.
superbanner 970x250 300x100