There's a new version of UIDS!

UIDS - UI Design System

Footer

Footer

Component Preview 
<footer class="footer">
    <div class="footer__container footer__container--flex">
        <div class="footer__links footer__links--contact">

            <div class="logo logo--footer">
                <a href="https://www.uiowa.edu">
                    <div class="element-invisible">The University of Iowa</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-footer" role="img" viewBox="0 0 311.6 90.2">
                        <path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
                        <path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
                        <path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
                        <path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
                        <image src="../../assets/images/uiowa-primary.png">
                            <title id="logo-footer">University of Iowa</title>
                        </image>
                    </svg>
                </a>
            </div>

            <p>Iowa City, Iowa 52242<br>
                <a href="tel:319-335-3500"><i class="fas fa-phone"></i> 319-335-3500</a><br />
            </p>

            <div class="footer__links footer__links--icon">
                <nav role="navigation">
                    <ul class="menu">

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-facebook-square"></i><span class="link-text">Facebook</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-twitter-square"></i><span class="link-text">Twitter</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-instagram"></i><span class="link-text">Instagram</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-snapchat"></i><span class="link-text">Snapchat</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-youtube"></i><span class="link-text">Youtube</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-linkedin"></i><span class="link-text">LinkedIn</span></a>
                        </li>

                        <li class="menu-item">
                            <a href="https://uiowa.edu/"><i class="fab fa-pinterest"></i><span class="link-text">Pinterest</span></a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="socket">
                <ul class="socket__menu">
                    <li>© 2023 The University of Iowa</li>
                    <li>
                        <a href="https://uiowa.edu/privacy">Privacy Notice</a>
                    </li>
                    <li>
                        <a href="https://opsmanual.uiowa.edu/community-policies/nondiscrimination-statement">UI Nondiscrimination Statement</a>
                    </li>
                    <li>
                        <a href="https://uiowa.edu/accessibility">Accessibility</a>
                    </li>
                    <li>
                        <a href="https://nativeamericancouncil.org.uiowa.edu">UI Indigenous Land Acknowledgement</a>
                    </li>
                </ul>
            </div>

        </div>

    </div>
</footer>
  • Content: 
    .footer__links .menu, .footer__links .menu ul li, .footer__links--icon ul,
.footer__links--icon li, .socket__menu, .footer-cta__container .menu {
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .footer__links .menu > li, .footer__links .menu ul li > li, .footer__links--icon ul > li, .footer__links--icon li > li, .socket__menu > li, .footer-cta__container .menu > li {
    display: inline-block;
    list-style-type: none;
    margin: 0; }

.footer {
  position: relative;
  background: var(--brand-secondary);
  padding-top: 2.5rem;
  padding-right: 0;
  padding-bottom: 2.5rem;
  padding-left: 0; }
  @media (min-width: 980px) {
    .footer {
      padding-top: 2.5rem;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0; } }
  .footer a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 400; }
    .footer a:hover, .footer a:focus {
      text-decoration: underline; }
  .footer p {
    color: #ccc;
    line-height: 1.5;
    font-weight: 100;
    margin-top: 0.9rem; }
    .footer p a {
      color: var(--brand-primary);
      text-decoration: none;
      font-weight: 400; }
      .footer p a:hover, .footer p a:focus {
        text-decoration: underline; }
      .footer p a i, .footer p a svg, .footer p a span {
        margin-right: 0.625rem;
        font-size: 0.8rem;
        color: #999; }
  .footer .site-name {
    color: #fff;
    font-size: 1.7rem;
    margin-top: 1.05rem;
    font-weight: 900;
    margin-bottom: 0.325rem; }
    .footer .site-name a {
      color: #fff;
      text-decoration: none; }
      .footer .site-name a:hover, .footer .site-name a:focus {
        text-decoration: underline; }
  .footer .parent-site-name {
    color: #ccc;
    font-size: 1.4rem;
    margin-top: 0;
    font-weight: 300;
    margin-bottom: .625rem;
    display: block;
    background: var(--brand-secondary);
    padding: 0; }
    .footer .parent-site-name a {
      color: #ccc;
      text-decoration: none; }
      .footer .parent-site-name a:hover, .footer .parent-site-name a:focus {
        text-decoration: underline; }
  .footer__container {
    margin: 0 1.25rem;
    position: relative; }
    @media (min-width: 84.375em) {
      .footer__container {
        max-width: 81.875em;
        margin: 0 auto; } }
    @media (min-width: 84.375em) {
      .footer__container {
        padding: 0; } }
  @media (min-width: 980px) {
    .footer__container--flex {
      display: flex;
      flex-wrap: wrap;
      -moz-column-gap: 1.05rem;
           column-gap: 1.05rem; } }
  .footer__links {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 1.875rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0; }
    .footer__links .menu {
      margin: 0; }
      .footer__links .menu li {
        /*
         * %no-ul-list sets display: inline-block; for li,
         *  which doesn't work for this menu.
         */
        display: block; }
      .footer__links .menu a {
        font-weight: 300;
        text-decoration: none;
        color: white;
        font-size: 1.1rem; }
        .footer__links .menu a:hover, .footer__links .menu a:focus {
          text-decoration: underline; }
      .footer__links .menu ul {
        margin: 0; }
  .footer__links--nav {
    margin-bottom: 2.5rem; }
    @media (min-width: 980px) {
      .footer__links--nav {
        display: flex; } }
  @media (min-width: 980px) {
    .footer__links--contact {
      flex-grow: 2; } }
  .footer__links--icon {
    /*
     * Display icon menu as flex since the icons sit
     *  side-by-side.
     */ }
    .footer__links--icon .menu {
      flex-wrap: wrap;
      display: flex;
      line-height: 2; }
      @media (min-width: 980px) {
        .footer__links--icon .menu {
          line-height: 1; } }
    .footer__links--icon a {
      text-decoration: none;
      color: #fff; }
    .footer__links--icon i {
      color: #fff;
      font-size: 1.6rem;
      margin-right: 1.05rem; }
    .footer__links--icon .link-text {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px); }

.socket__container {
  margin: 0 1.25rem;
  position: relative; }
  @media (min-width: 84.375em) {
    .socket__container {
      max-width: 81.875em;
      margin: 0 auto; } }
  @media (min-width: 84.375em) {
    .socket__container {
      padding: 0; } }

.socket__menu {
  display: flex;
  flex-wrap: wrap; }
  .socket__menu li {
    color: white;
    font-size: 0.8rem;
    border-right: 1px solid #5d5656;
    margin-bottom: 0.325rem;
    padding-top: 0;
    padding-right: 0.625rem;
    padding-left: 0.625rem; }
    .socket__menu li:first-child {
      flex-basis: 100%;
      border-right: none; }
    .socket__menu li:nth-child(2) {
      padding-left: 0; }
    .socket__menu li:last-child {
      border-right: none;
      padding-right: 0; }
    .socket__menu li:first-child {
      padding-left: 0; }
    .socket__menu li a {
      text-decoration: none;
      color: var(--brand-primary); }
      .socket__menu li a:hover, .socket__menu li a:focus {
        text-decoration: underline; }

.footer-cta__wrapper {
  background: var(--brand-primary);
  padding: 1.875rem 0;
  margin: 0; }
  @media (min-width: 768px) {
    .footer-cta__wrapper .menu {
      display: flex; } }
  .footer-cta__wrapper .menu li {
    flex: 1;
    display: block; }
  .footer-cta__wrapper .bttn--outline {
    border: 1px solid var(--brand-secondary);
    display: block; }
    @media (min-width: 768px) {
      .footer-cta__wrapper .bttn--outline {
        flex: 1;
        display: block; } }

.footer-cta__container {
  margin: 0 1.25rem;
  position: relative;
  justify-content: space-between; }
  @media (min-width: 84.375em) {
    .footer-cta__container {
      max-width: 81.875em;
      margin: 0 auto; } }
  .footer-cta__container div:first-of-type,
  .footer-cta__container nav:first-of-type {
    flex-basis: 100%; }
  @media (min-width: 768px) {
    .footer-cta__container {
      display: flex; } }
  @media (min-width: 84.375em) {
    .footer-cta__container {
      padding: 0; } }

@media (min-width: 768px) {
  .footer-cta__container .menu li:first-child a {
    margin: 0 1.05rem 0 0; }
  .footer-cta__container .menu li:last-child a {
    margin: 0 0 0 1.05rem; } }

.footer-cta__container .menu a {
  margin: 1.05rem 0;
  padding-top: 0.325rem; }
  @media (min-width: 768px) {
    .footer-cta__container .menu a {
      margin: 0 1.05rem; } }
  .footer-cta__container .menu a:before {
    content: ' ';
    background-repeat: no-repeat;
    background-size: 90%;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-bottom: -5px;
    margin-right: 5px; }
  .footer-cta__container .menu a.bttn--apply:before {
    background-image: url("../../assets/images/apply-01.svg"); }
  .footer-cta__container .menu a.bttn--visit:before {
    background-image: url("../../assets/images/location-01.svg"); }
  .footer-cta__container .menu a.bttn--request:before {
    background-image: url("../../assets/images/request-01.svg"); }

.footer-cta__container > a:first-child {
  margin-left: 0; }

.footer-cta__container > a:last-child {
  margin-right: 0; }

.logo--footer {
  padding: 0 40px 0 0;
  width: 128px; }
  @media (min-width: 980px) {
    .logo--footer {
      width: 145px; } }
  @media (min-width: 84.375em) {
    .logo--footer {
      width: 176px; } }
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: src/components/footer/footer.css
  • Size: 7.4 KB
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';

.footer {
  position: relative;
  background: $secondary;
  @include padding($top: $xlg, $right: 0, $bottom: $xlg, $left: 0);

  @include breakpoint(md) {
    @include padding($top: $xlg, $right: 0, $bottom: 0, $left: 0);
  }

  a {
    color: $primary;
    text-decoration: none;
    font-weight: $font-weight-normal;
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  p {
    color: #ccc;
    line-height: 1.5;
    font-weight: 100;
    margin-top: $sm-md;

    a {
      color: $primary;
      text-decoration: none;
      font-weight: $font-weight-normal;
      &:hover,
      &:focus {
        text-decoration: underline;
      }

      i, svg, span {
        margin-right: $sm;
        font-size: $small-font-size;
        color: #999;
      }

    }
  }

  // Override site-name when it is displayed in the footer.
  .site-name {
    color: #fff;
    font-size: 1.7rem;
    margin-top: $md;
    font-weight: $font-weight-heavy;
    margin-bottom: $xsm;
     a {
       color: #fff;
       text-decoration: none;
       &:hover,
       &:focus {
         text-decoration: underline;
       }
     }
  }

  // Override parent-site-name when it is displayed in the footer.
  .parent-site-name {
    color: #ccc;
    font-size: 1.4rem;
    margin-top: 0;
    font-weight: 300;
    margin-bottom: .625rem;
    display: block;
    background: $secondary;
    padding: 0;
    a {
      color: #ccc;
      text-decoration: none;
      &:hover, &:focus {
        text-decoration: underline;
      }
    }
  }


  &__container {
    @include container-width;;

    //padding: 0 $gutter;
    @include breakpoint(page-container) {
      padding: 0;
    }
  }

  &__container--flex {
    @include breakpoint(md) {
      @include flexbox;
      flex-wrap: wrap;
      column-gap: $md;
    }
  }

  &__links {
    @include margin($top: 0, $right: 0, $bottom: $lg);
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;

    .menu {
      margin: 0;
      @extend %no-ul-list;

      li {
        /*
         * %no-ul-list sets display: inline-block; for li,
         *  which doesn't work for this menu.
         */
        display: block;
      }

      a {
        font-weight: $font-weight-light;
        text-decoration: none;
        color: white;
        font-size: 1.1rem;
         &:hover,
         &:focus {
           text-decoration: underline;
         }
      }

      ul {
        margin: 0;

        li {
          @extend %no-ul-list;

        }
      }
    }
  }

  &__links--nav {
    margin-bottom: $xlg;

    @include breakpoint(md) {
      display: flex;
    }
  }

  &__links--contact {
    @include breakpoint(md) {
      flex-grow: 2;
    }
  }

  &__links--icon {
    /*
     * Display icon menu as flex since the icons sit
     *  side-by-side.
     */
    .menu {
      flex-wrap: wrap;
      @include flexbox;
      line-height: 2;
      @include breakpoint(md) {
        line-height: 1;
      }
    }

    a {
      text-decoration: none;
      color: #fff;
    }

    i {
      color: #fff;
      font-size: $h4-font-size;
      @include margin($right: $md);
    }

    .link-text {
      @include element-invisible;
    }

    ul,
    li {
      @extend %no-ul-list;
    }
  }
}

.socket {
  &__container {
    @include container-width;;

    @include breakpoint(page-container) {
      padding: 0;
    }
  }

  &__menu {
    @extend %no-ul-list;
    display: flex;
    flex-wrap: wrap;

    li {
      color: white;
      font-size: $small-font-size;
      border-right: 1px solid #5d5656;
      margin-bottom: $xsm;
      @include padding($top: 0, $right: $sm, $left: $sm);

      &:first-child {
        flex-basis: 100%;
        border-right: none;
      }
      &:nth-child(2) {
        padding-left: 0;
      }

      &:last-child {
        border-right: none;
        @include padding($right: 0);
      }

      &:first-child {
        @include padding($left: 0);
      }

      a {
        text-decoration: none;
        color: $primary;
         &:hover,
         &:focus {
           text-decoration: underline;
         }
      }
    }
  }
}

.footer-cta {
  &__wrapper {
    background: $primary;
    padding: $lg 0;
    margin: 0;

      .menu {
         @include breakpoint(sm) {
           display: flex;
         }
        li {
          flex: 1;
          display: block;
        }
      }

    .bttn--outline {
      border: 1px solid $secondary;
      display: block;

      @include breakpoint(sm) {
        flex: 1;
        display: block;
      }
    }
  }

  &__container {
    @include container-width;;
    justify-content: space-between;

      div:first-of-type,
      nav:first-of-type {
        flex-basis: 100%;
      }

    @include breakpoint(sm) {
      display: flex;
    }

    @include breakpoint(page-container) {
      padding: 0;
    }
  }
}

.footer-cta__container .menu {
  @extend %no-ul-list;
  li {
    @include breakpoint(sm) {
      &:first-child a {
        margin: 0 $md 0 0;
      }

      &:last-child a {
        margin: 0 0 0 $md;
      }
    }
  }

  a {
    margin: $md 0;

    @include breakpoint(sm) {
      margin: 0 $md;
    }

    padding-top: $xsm;

    &:before {
      content: ' ';
      background-repeat: no-repeat;
      background-size: 90%;
      width: 35px;
      height: 35px;
      display: inline-block;
      margin-bottom: -5px;
      margin-right: 5px;
    }

    &.bttn--apply:before {
      background-image: url("#{$imgpath}/apply-01.svg");
    }

    &.bttn--visit:before {
      background-image: url("#{$imgpath}/location-01.svg");
    }

    &.bttn--request:before {
      background-image: url("#{$imgpath}/request-01.svg");
    }
  }
}

.footer-cta__container>a:first-child {
  margin-left: 0;
}

.footer-cta__container>a:last-child {
  margin-right: 0;
}

// Logo in footer.
.logo--footer {
  padding: 0 40px 0 0;
  width: 128px;

  @include breakpoint(md) {
    width: 145px
  }

  @include breakpoint(page-container) {
    width: 176px
  }
}
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/footer/footer.scss
  • Size: 6.1 KB