<footer class="Footer u-background-95">

    <div class="Grid Grid--withGutter u-padding-top-xl">

        <div class="Grid-cell u-layout-centerLeft u-padding-r-bottom">
            <img class="Footer-logo u-xs-padding-right-none" src="//placehold.it/75x80?text=placeholder" alt="" style="height: 80px">
            <p class="Footer-siteName">

            </p>
        </div>

        <div class="Grid-cell u-layout-centerRight u-padding-r-bottom u-flexAlignSelfEnd">
            <h3 class="u-md-flexInline u-lg-flexInline u-text-p u-color-white u-textWeight-400
        u-hidden u-margin-r-right u-flexAlignSelfCenter">Seguici su</h3>
            <ul class="Footer-socialIcons">
                <li><a href=""><span class="Icon Icon-facebook u-background-white"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                <li><a href=""><span class="Icon Icon-twitter u-background-white"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                <li><a href=""><span class="Icon Icon-youtube u-background-white"></span><span class="u-hiddenVisually">Youtube</span></a></li>
            </ul>
        </div>

    </div>

    <ul class="Footer-links u-cf u-color-80">
        <li><a href="" title="Privacy policy">Privacy</a></li>
        <li><a href="" title="Note legali">Note legali</a></li>
        <li><a href="" title="Dati monitoraggio sito">Contatti</a></li>
    </ul>

</footer>
  • Content:
    /** @define Footer; weak */
    
    :root {
      --Footer-color-link: var(--Color-teal-50);
      --Footer-background-color: var(--Color-95);
    }
    
    .Footer {
      @extend .u-color-white;
      @extend .u-padding-bottom-xxl;
      @extend .u-padding-top-xxl;
    }
    
    .Footer a {
      color: var(--Footer-color-link);
    }
    
    .Footer-logo {
      @extend .u-floatLeft;
      @extend .u-padding-right-xl;
    }
    
    .Footer-link {
      @extend .u-text-r-s;
    }
    
    .Footer-siteName {
      @extend .u-text-r-l;
    }
    
    .Footer-blockTitle {
      @extend .u-text-r-m;
      @extend .u-padding-bottom-xl;
      @extend .u-color-white;
    }
    
    .Footer-subBlock {
      @extend .u-color-grey-50;
      @extend .u-border-top-xxs;
      @extend .u-padding-all-s;
    }
    
    .Footer-subTitle {
      @extend .u-text-r-m;
      @extend .u-color-white;
      @extend .u-textWeight-400;
      @extend .u-padding-bottom-l;
    }
    
    .Footer-block {
      @extend .u-text-xxl;
      @extend .u-margin-r-top;
      @extend .u-margin-r-bottom;
    }
    
    .Footer-block address {
      @extend .u-text-r-xxs;
      @extend .u-textNormal;
      @extend .u-color-grey-10;
    }
    
    .Footer-block ul {
      @extend .u-sizeFull;
    }
    
    .Footer-block li {
      @extend .u-color-grey-50;
      @extend .u-border-top-xxs;
      @extend .u-padding-top-s;
      @extend .u-padding-bottom-s;
    }
    
    .Footer-block a {
      @extend .u-text-r-xxs;
      @extend .u-textWeight-700;
    }
    
    .Footer-links {
      @extend .u-border-top-xxs;
      @extend .u-margin-top-l;
      @extend .u-padding-r-top;
      @extend .u-sizeFull;
    }
    
    .Footer-links li {
      @extend .u-inlineBlock;
      @extend .u-margin-right-xl;
    }
    
    .Footer-links a {
      @extend .u-text-r-xxs;
      @extend .u-textClean;
      @extend .u-textWeight-600;
    }
    
    .Footer-socialIcons > li {
      @extend .u-inlineBlock;
      @extend .u-margin-right-s;
      @extend .u-border-none;
    }
    
    .Footer-socialIcons [class^="Icon-"],
    .Footer-socialIcons [class*=" Icon-"] {
      @extend .u-inlineBlock;
      @extend .u-padding-all-xs;
      @extend .u-borderRadius-circle;
      @extend .u-text-r-s;
    
      background-color: var(--Footer-color-link);
      color: var(--Footer-background-color);
    }
    
  • URL: /components/raw/footer/index.css
  • Filesystem Path: src/modules/footer/index.css
  • Size: 1.9 KB

There are no notes for this item.