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

    <div class="u-cf">
        <img class="Footer-logo" src="//placehold.it/75x80?text=placeholder" alt="">
        <p class="Footer-siteName">
            Nome della pubblica amministrazione
        </p>
    </div>

    <div class="Grid Grid--withGutter">

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Argomento 1</h2>
            <ul>
                <li><a href="">numquam sit veniam</a></li>
                <li><a href="">voluptatem quia cum</a></li>
                <li><a href="">totam et amet</a></li>
                <li><a href="">quo illo molestiae</a></li>
            </ul>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Argomento 2</h2>
            <ul>
                <li><a href="">numquam sit veniam</a></li>
                <li><a href="">voluptatem quia cum</a></li>
                <li><a href="">totam et amet</a></li>
                <li><a href="">quo illo molestiae</a></li>
            </ul>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Argomento 3</h2>
            <ul>
                <li><a href="">numquam sit veniam</a></li>
                <li><a href="">voluptatem quia cum</a></li>
                <li><a href="">totam et amet</a></li>
                <li><a href="">quo illo molestiae</a></li>
            </ul>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Argomento 4</h2>
            <ul>
                <li><a href="">numquam sit veniam</a></li>
                <li><a href="">voluptatem quia cum</a></li>
                <li><a href="">totam et amet</a></li>
                <li><a href="">quo illo molestiae</a></li>
            </ul>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Contatti</h2>
            <div class="Footer-subBlock">
                <h3 class="Footer-subTitle">Recapiti</h3>
                <address>
          Via earum rem culpa<br>
          earum rem culpa<br>
          Tel. (+00) 00.0000.0000
        </address>
            </div>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Contatti</h2>
            <div class="Footer-subBlock">
                <h3 class="Footer-subTitle">Recapiti</h3>
                <address>
          Via numquam sit veniam<br>
          numquam sit veniam<br>
          Tel. (+00) 00.0000.0000
        </address>
            </div>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Contatti</h2>
            <div class="Footer-subBlock">
                <h3 class="Footer-subTitle">Indirizzo PEC</h3>
                <p><a href="">indirizzo.pec@gov.it</a></p>
            </div>
        </div>

        <div class="Footer-block Grid-cell u-md-size1of4 u-lg-size1of4">
            <h2 class="Footer-blockTitle">Seguici su</h2>
            <div class="Footer-subBlock">
                <ul class="Footer-socialIcons">
                    <li><a href=""><span class="Icon Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
                    <li><a href=""><span class="Icon Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
                    <li><a href=""><span class="Icon Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
                </ul>
            </div>
        </div>

    </div>

    <ul class="Footer-links u-cf">
        <li><a href="" title="Privacy policy">Privacy</a></li>
        <li><a href="" title="Note legali">Note legali</a></li>
        <li><a href="" title="Contatti">Contatti</a></li>
        <li><a href="" title="nulla rerum magni">nulla rerum magni</a></li>
        <li>earum rem culpa</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.