Web Toolkit

image/svg+xml GitHub

Footer: Simple 

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