Web Toolkit

image/svg+xml GitHub

Footer: Default 

<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.