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="../../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>© 2021 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">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__container, .socket__container, .footer-cta__container {
      margin: 0 1.25rem;
      position: relative; }
      @media (min-width: 84.375em) {
        .footer__container, .socket__container, .footer-cta__container {
          max-width: 81.875em;
          margin: 0 auto; } }
    
    .footer {
      position: relative;
      background: #151515;
      padding-top: 2.5rem;
      padding-right: 0;
      padding-bottom: 2.5rem;
      padding-left: 0; }
      @media (min-width: 855px) {
        .footer {
          padding-top: 2.5rem;
          padding-right: 0;
          padding-bottom: 0;
          padding-left: 0; } }
      .footer p {
        color: #ccc;
        line-height: 1.5;
        font-weight: 100;
        margin-top: 0.9rem; }
        .footer p a {
          color: #FFCD00;
          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: #151515;
        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; }
      @media (min-width: 84.375em) {
        .footer__container {
          padding: 0; } }
      @media (min-width: 855px) {
        .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: 855px) {
          .footer__links--nav {
            display: flex; } }
      @media (min-width: 855px) {
        .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: 855px) {
            .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); }
    
    @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: #FFCD00; }
          .socket__menu li a:hover, .socket__menu li a:focus {
            text-decoration: underline; }
    
    .footer-cta__wrapper {
      background: #FFCD00;
      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 #151515;
        display: block; }
        @media (min-width: 768px) {
          .footer-cta__wrapper .bttn--outline {
            flex: 1;
            display: block; } }
    
    .footer-cta__container {
      justify-content: space-between; }
      .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: 855px) {
        .logo--footer {
          width: 145px; } }
      @media (min-width: 84.375em) {
        .logo--footer {
          width: 176px; } }
    
  • URL: /components/raw/footer/footer.css
  • Filesystem Path: src/components/branding/footer/footer.css
  • Size: 6.9 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(menu) {
        @include padding($top: $xlg, $right: 0, $bottom: 0, $left: 0);
      }
    
      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 {
        @extend %container;
    
        //padding: 0 $gutter;
        @include breakpoint(container) {
          padding: 0;
        }
      }
    
      &__container--flex {
        @include breakpoint(menu) {
          @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(menu) {
          display: flex;
        }
      }
    
      &__links--contact {
        @include breakpoint(menu) {
          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(menu) {
            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 {
        @extend %container;
    
        @include breakpoint(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 {
        @extend %container;
        justify-content: space-between;
    
          div:first-of-type,
          nav:first-of-type {
            flex-basis: 100%;
          }
    
        @include breakpoint(sm) {
          display: flex;
        }
    
        @include breakpoint(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(menu) {
        width: 145px
      }
    
      @include breakpoint(container) {
        width: 176px
      }
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/branding/footer/footer.scss
  • Size: 5.9 KB