Component Library

Site Footer: Ecosystem 

<footer class="site-footer site-footer--ecosystem">
    <div class="site-footer__flex-wrap">
        <div class="site-footer__logo-social-links-wrap">
            <a href="https://www.iastate.edu" class="site-footer__logo">
        <img src="https://cdn.theme.iastate.edu/img/iastate22/iowa-state-university-logo-with-tagline-sci-tech.svg" alt="Iowa State University of Science and Technology" loading="lazy" width="516" height="69">
      </a>

            <ul class="site-footer__social">
                <li>
                    <a href="#" target="_blank">
                <i class="fa-brands fa-twitter" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">Twitter</span>
              </a>
                </li>
            </ul>
        </div>

        <nav class="site-footer__primary-nav" aria-label="Footer Primary">
            <ul>
                <li>
                    <a href="#">Footer Link 1</a>
                </li>
                <li>
                    <a href="#">Footer Link 2</a>
                </li>
                <li>
                    <a href="#">Footer Link 3</a>
                </li>
                <li>
                    <a href="#">Footer Link 4</a>
                </li>
                <li>
                    <a href="#">Footer Link 5</a>
                </li>
                <li>
                    <a href="#">Footer Link 6</a>
                </li>
            </ul>
        </nav>

        <nav class="site-footer__secondary-nav" aria-label="Footer Secondary">
            <h2 class="site-footer__section-label">Quick Links</h2>
            <ul>
                <li>
                    <a href="#">Quick Link 1</a>
                </li>
                <li>
                    <a href="#">Quick Link 2</a>
                </li>
                <li>
                    <a href="#">Quick Link 3</a>
                </li>
                <li>
                    <a href="#">Quick Link 4</a>
                </li>
                <li>
                    <a href="#">Quick Link 5</a>
                </li>
                <li>
                    <a href="#">Sign Ons and Tools</a>
                </li>
            </ul>
        </nav>

        <div class="site-footer__site-org-contact-info">
            <h2 class="site-footer__section-label">Sarah Ryan</h2>
            <div class="site-footer__site-org-contact-address">
                <p>
                    5205 Adv Tch Res Bid (ATRB)<br> 2213 Pammel Dr<br> Ames, IA 50011-1101</p>
            </div>
            <div class="site-footer__site-org-contact-email-phone-wrap">
                <div class="site-footer__site-org-contact-phone">
                    <p>
                        (515) 294-3112</p>
                </div>
                <div class="site-footer__site-org-contact-email">
                    <p>
                        <a href="mailto:sryan@iastate.edu">sryan@iastate.edu</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="site-footer__bottom-wrap">
        <nav class="site-footer__utility-nav" aria-label="Footer Utility">
            <ul>
                <li>
                    <a href="https://www.iastate.edu/disclaimers-and-terms">Privacy Policy</a>
                </li>
                <li>
                    <a href="https://www.policy.iastate.edu/policy/discrimination">Non-discrimination Policy</a>
                </li>
                <li>
                    <a href="https://www.digitalaccess.iastate.edu/">Digital Access and Accessibility</a>
                </li>
                <li>
                    <a href="https://www.iastate.edu/consumer-information">Consumer Information</a>
                </li>
            </ul>
        </nav>
        <div class="site-footer__copyright">
            <p>&copy;Iowa State University of Science and Technology</p>
        </div>
    </div>
</footer>
 
<footer class="site-footer site-footer--ecosystem">
  <div class="site-footer__flex-wrap">
    <div class="site-footer__logo-social-links-wrap">
      <a href="https://www.iastate.edu" class="site-footer__logo">
        <img src="{{ "https://cdn.theme.iastate.edu/img/iastate22/iowa-state-university-logo-with-tagline-sci-tech.svg"|path }}" alt="Iowa State University of Science and Technology" loading="lazy" width="516" height="69">
      </a>

      {% if social_links %}
        <ul class="site-footer__social">
          {% if social_links.instagram %}
            <li>
              <a href="{{ social_links.instagram }}" target="_blank">
                <i class="fak fa-iastate22-instagram" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">Instagram</span>
              </a>
            </li>
          {% endif %}
          {% if social_links.youtube %}
            <li>
              <a href="{{ social_links.youtube }}" target="_blank">
                <i class="fa-brands fa-youtube" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">YouTube</span>
              </a>
            </li>
          {% endif %}
          {% if social_links.facebook %}
            <li>
              <a href="{{ social_links.facebook }}" target="_blank">
                <i class="fa-brands fa-facebook" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">Facebook</span>
              </a>
            </li>
          {% endif %}
          {% if social_links.twitter %}
            <li>
              <a href="{{ social_links.twitter }}" target="_blank">
                <i class="fa-brands fa-twitter" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">Twitter</span>
              </a>
            </li>
          {% endif %}
          {% if social_links.linkedin %}
            <li>
              <a href="{{ social_links.linkedin }}" target="_blank">
                <i class="fa-brands fa-linkedin-in" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">LinkedIn</span>
              </a>
            </li>
          {% endif %}
          {% if social_links.flickr %}
            <li>
              <a href="{{ social_links.flickr }}" target="_blank">
                <i class="fak fa-iastate22-flickr" aria-hidden="true"></i>
                <span class="visible-for-screen-readers">Flickr</span>
              </a>
            </li>
          {% endif %}
        </ul>
      {% endif %}
    </div>

    {% if footer_nav %}
      <nav class="site-footer__primary-nav" aria-label="Footer Primary">
        <ul>
          {% for link in footer_nav %}
            <li>
              <a href="{{ link.url }}">{{ link.title }}</a>
            </li>
          {% endfor %}
        </ul>
      </nav>
    {% endif %}


    {% if footer_secondary_nav %}
      <nav class="site-footer__secondary-nav" aria-label="Footer Secondary">
        {% if footer_secondary_nav|length > 3 %}
          <h2 class="site-footer__section-label">Quick Links</h2>
        {% endif %}
        <ul {% if footer_secondary_nav|length < 3 %} class="site-footer__secondary-nav-short" {% endif %}>
          {% for link in footer_secondary_nav %}
            <li>
              <a href="{{ link.url }}">{{link.title}}</a>
            </li>
          {% endfor %}
        </ul>
      </nav>
    {% endif %}

    {% if site_org_contact.name or site_org_contact.address.building or site_org_contact.address.street or site_org_contact.address.city_state_zip or site_org_contact.phone or site_org_contact.email %}
      <div class="site-footer__site-org-contact-info">
        <h2 class="site-footer__section-label">{{ site_org_contact.name }}</h2>
        {% if site_org_contact.address.building or site_org_contact.address.street or site_org_contact.address.city_state_zip %}
          <div class="site-footer__site-org-contact-address">
            <p>
              {% if site_org_contact.address.building %}
                {{ site_org_contact.address.building }}<br>
              {% endif %}
              {{ site_org_contact.address.street }}<br>
              {{ site_org_contact.address.city_state_zip }}</p>
          </div>
        {% endif %}
        <div class="site-footer__site-org-contact-email-phone-wrap">
          {% if site_org_contact.phone %}
            <div class="site-footer__site-org-contact-phone">
              {% for phone in site_org_contact.phone %}
                <p>
                  {% if phone.label %}
                    {{ phone.label|raw }}:
                  {% endif %}
                  {{ phone.phone_number }}</p>
              {% endfor %}
            </div>
          {% endif %}
          {% if site_org_contact.email %}
            <div class="site-footer__site-org-contact-email">
              {% for email in site_org_contact.email %}
                <p>
                  {% if email.label %}
                    {{ email.label }}:
                  {% endif %}
                  <a href="mailto:{{ email.email_address }}">{{ email.email_address }}</a>
                </p>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
  <div class="site-footer__bottom-wrap">
    <nav class="site-footer__utility-nav" aria-label="Footer Utility">
      <ul>
        {% for link in footer_utility_nav %}
          <li>
            <a href="{{ link.url }}">{{ link.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </nav>
    <div class="site-footer__copyright">
      <p>&copy;{{copyright}}</p>
    </div>
  </div>
</footer>
 
{
  "footer_nav": [
    {
      "title": "Footer Link 1",
      "url": "#"
    },
    {
      "title": "Footer Link 2",
      "url": "#"
    },
    {
      "title": "Footer Link 3",
      "url": "#"
    },
    {
      "title": "Footer Link 4",
      "url": "#"
    },
    {
      "title": "Footer Link 5",
      "url": "#"
    },
    {
      "title": "Footer Link 6",
      "url": "#"
    }
  ],
  "footer_secondary_nav": [
    {
      "title": "Quick Link 1",
      "url": "#"
    },
    {
      "title": "Quick Link 2",
      "url": "#"
    },
    {
      "title": "Quick Link 3",
      "url": "#"
    },
    {
      "title": "Quick Link 4",
      "url": "#"
    },
    {
      "title": "Quick Link 5",
      "url": "#"
    },
    {
      "title": "Sign Ons and Tools",
      "url": "#"
    }
  ],
  "footer_departments": [
    {
      "title": "General Information",
      "email": "contact@iastate.edu",
      "phone": "515-294-4111"
    },
    {
      "title": "Admissions",
      "email": "admissions@iastate.ede",
      "phone": "515-294-5836"
    }
  ],
  "footer_utility_nav": [
    {
      "title": "Privacy Policy",
      "url": "https://www.iastate.edu/disclaimers-and-terms"
    },
    {
      "title": "Non-discrimination Policy",
      "url": "https://www.policy.iastate.edu/policy/discrimination"
    },
    {
      "title": "Digital Access and Accessibility",
      "url": "https://www.digitalaccess.iastate.edu/"
    },
    {
      "title": "Consumer Information",
      "url": "https://www.iastate.edu/consumer-information"
    }
  ],
  "copyright": "Iowa State University of Science and Technology",
  "social_links": {
    "instagram": "#",
    "youtube": "#",
    "facebook": "#",
    "twitter": "#",
    "linkedin": "#",
    "flickr": "#"
  },
  "site_org_contact": {
    "name": "Site Name/Org Name Lorem Ipsum",
    "email": [
      {
        "label": "Undergrad",
        "email_address": "email@iastate.edu"
      },
      {
        "email_address": "email@iastate.edu"
      }
    ],
    "phone": [
      {
        "label": "<abbr title=\"Phone\">P</abbr>",
        "phone_number": "(515) 294-4347"
      }
    ],
    "address": {
      "building": "Building",
      "street": "12345 Street Address",
      "city_state_zip": "Ames, IA 50011"
    }
  }
}
  • Content: 
    .site-footer {
  background-color: $iastate-red;
  padding: rem(36) rem(36) 0;
  position: relative;
  @include media-breakpoint-up(md) {
    padding: rem(62) rem(68) 0;
  }
  @include media-breakpoint-up(xl) {
    padding: rem(59) rem(82) 0;
  }
  &:before {
    @include media-breakpoint-up(xxl) {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -50vw;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-color: $iastate-red;
      pointer-events: none;
    }
  }
}

.site-footer__flex-wrap {
  @include media-breakpoint-up(xl) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.site-footer__logo {
  width: 100%;
  max-width: rem(516);
  height: 100%;
  display: block;
  @include media-breakpoint-up(xl) {
    flex: 0 1 auto;
    width: 35%;
  }
  @include media-breakpoint-up(xxl) {
    width: 50%;
  }

  img {
    width: 100%;
  }
}

.site-footer__social-links-wrap {
  @include media-breakpoint-up(xl) {
    flex: 0 1 auto;
    width: 50%;
  }
}

.site-footer__social {
  display: flex;
  justify-content: space-between;
  margin: rem(27) 0;
  @include media-breakpoint-up(md) {
    justify-content: flex-start;
  }
  @include media-breakpoint-up(xl) {
    margin: 0;
    justify-content: flex-end;
  }
  .site-footer--ecosystem & {
    display: grid;
    grid-template-columns: repeat(auto-fill, 52px);
    gap: rem(15);
    @include media-breakpoint-up(xl) {
      grid-template-columns: repeat(auto-fit, 52px);
      max-width: 50%;
      flex: 1 1 0;
      gap: rem(30);
    }
  }

  li {
    @include media-breakpoint-up(md) {
      margin-right: rem(30);
    }
    .site-footer--ecosystem & {
      &:last-child {
        @include media-breakpoint-up(md) {
          margin-right: 0;
        }
      }
    }
    .site-footer--ecosystem & {
      @include media-breakpoint-up(md) {
        margin-right: 0;
      }
    }
    a {
      border: rem(2) solid $iastate-gold;
      border-radius: 50%;
      width: rem(52);
      height: rem(52);
      display: flex;
      align-items: center;
      justify-content: center;
      color: $white;
      transition: 0.2s background-color ease-in-out;
      &:hover {
        background-color: $iastate-maroon;
      }
      svg {
        color: $iastate-gold;
        font-size: rem(25);
      }
    }
  }
}

.site-footer__primary-nav {
  margin: rem(33) auto rem(43) auto;
  @include media-breakpoint-up(xl) {
    margin: rem(10) 0 rem(35) 0;
    width: 100%;
  }
  ul {
    @include media-breakpoint-up(md) {
      display: flex;
      justify-content: space-between;
      border-bottom: rem(2) solid $iastate-gold;
    }
    @include media-breakpoint-up(xl) {
      justify-content: flex-end;
      border-bottom: none;
    }
    .site-footer--ecosystem & {
      @include media-breakpoint-up(md) {
        flex-wrap: wrap;
        justify-content: flex-start;
        border-bottom: none;
      }
      @include media-breakpoint-up(xl) {
        justify-content: flex-end;
      }
    }
    li {
      border-bottom: rem(2) solid $iastate-gold;
      text-align: left;
      margin-left: rem(-36);
      margin-right: rem(-36);
      @include media-breakpoint-up(md) {
        padding: 0 rem(30);
        margin-left: 0;
        margin-right: 0;
        border-bottom: 0;
      }
      @include media-breakpoint-up(xl) {
        border-bottom: rem(2) solid $iastate-gold;
      }
      .site-footer--ecosystem & {
        @include media-breakpoint-up(md) {
          padding: 0 rem(30) 0 0;
          border-bottom: rem(2) solid $iastate-gold;
        }
      }
      &:first-child {
        border-top: rem(2) solid $iastate-gold;
        @include media-breakpoint-up(md) {
          border-top: none;
          padding-left: 0;
        }
      }
      &:last-child {
        .site-footer--ecosystem & {
          @include media-breakpoint-up(md) {
            padding-right: 0;
          }
        }
      }

      a {
        color: $white;
        text-decoration: none;
        display: block;
        font-family: $typeface-sans-serif;
        font-weight: 700;
        font-size: rem(21);
        line-height: (34 / 21);
        margin: rem(17) auto;
        transition: 0.2s color ease-in-out;
        max-width: rem(236);
        white-space: nowrap;
        position: relative;
        @include media-breakpoint-up(md) {
          text-align: center;
          display: inline-block;
          max-width: none;
          margin-bottom: rem(5);
        }
        @include media-breakpoint-up(xl) {
          margin: rem(17) auto;
        }
        .site-footer--ecosystem & {
          @include media-breakpoint-up(md) {
            font-size: rem(18);
            line-height: (32 / 18);
            margin-bottom: rem(7);
          }
        }
        &:hover {
          color: $iastate-gold;
          &:before {
            right: rem(-5);
          }
        }
        &:before {
          content: "";
          position: absolute;
          right: 0;
          top: rem(12);
          width: rem(9);
          height: rem(9);
          border-right: rem(2) solid $iastate-gold;
          border-bottom: rem(2) solid $iastate-gold;
          transform: rotate(315deg);
          transform-origin: center;
          transition: 0.2s right ease-in-out;
          @include media-breakpoint-up(md) {
            display: none;
          }
        }
      }
    }
  }
}

.site-footer__secondary-nav {
  border-bottom: rem(2) solid $iastate-gold;
  padding-bottom: rem(27);
  margin-bottom: rem(30);

  @include media-breakpoint-up(xl) {
    border-bottom: none;
    min-height: rem(130);
    min-width: rem(400);
    margin-bottom: 0;
  }
  .site-footer--ecosystem & {
    @include media-breakpoint-up(xl) {
      flex: 1 1 0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding-bottom: 0;
      padding-right: rem(60);
      min-height: initial;
    }
    .site-footer__section-label {
      @include media-breakpoint-up(xl) {
        flex: 0 1 auto;
        width: 100%;
      }
    }
  }

  ul {
    column-count: 2;
    @include media-breakpoint-up(md) {
      column-count: 3;
    }
    @include media-breakpoint-up(xl) {
      max-width: rem(500);
      column-gap: rem(70);
    }
    .site-footer--ecosystem & {
      column-count: 2;
    }
    &.site-footer__secondary-nav-short {
      column-count: 1;
    }
    li {
      color: $white;
      text-align: center;
      margin-bottom: rem(27);
      font-size: rem(18);
      line-height: (26 / 18);
      @include media-breakpoint-up(md) {
        text-align: left;
      }
      @include media-breakpoint-up(xl) {
        margin-bottom: rem(10);
        font-size: rem(16);
        line-height: (20 / 16);
      }
      a {
        color: currentColor;
        text-decoration: underline;
        font-family: $typeface-sans-serif;
        font-weight: 700;
        text-decoration-thickness: rem(1);
        text-underline-offset: rem(1);
        transition: 0.2s color ease-in-out;
        &:hover {
          color: $iastate-gold;
        }
      }
    }
  }
}

.site-footer__section-label {
  color: white;
  text-align: center;
  font-size: rem(18);
  line-height: (26 / 18);
  font-family: $typeface-serif;
  font-weight: 700;
  @include media-breakpoint-up(md) {
    text-align: left;
    margin-bottom: rem(20);
    padding-bottom: 0;
  }
  @include media-breakpoint-up(xl) {
    font-size: rem(16);
    line-height: (20 / 16);
    margin: 0 0 rem(15);
    padding: 0;
  }
}

.site-footer__departments-nav {
  @include media-breakpoint-up(xl) {
    width: auto;
    position: absolute;
    top: rem(227);
    right: rem(82);
  }
  @include media-breakpoint-up(xxl) {
    right: rem(304);
  }
  .site-footer--ecosystem & {
    @include media-breakpoint-up(xl) {
      position: static;
      top: initial;
      right: initial;
    }
    @include media-breakpoint-up(xxl) {
      right: initial;
    }
  }
  ul {
    @include media-breakpoint-up(md) {
      display: flex;
      justify-content: flex-start;
    }
    @include media-breakpoint-up(xl) {
      justify-content: flex-end;
    }
    @include media-breakpoint-up(xxl) {
      justify-content: flex-start;
    }
    li {
      text-align: center;
      font-family: $typeface-sans-serif;
      font-weight: 700;
      margin-bottom: rem(35);
      font-size: rem(18);
      line-height: (26 / 18);
      color: $white;
      @include media-breakpoint-up(md) {
        flex: 1 1 0;
        text-align: left;
      }
      @include media-breakpoint-up(xl) {
        font-size: rem(16);
        line-height: (26 / 16);
        text-align: left;
        padding-right: rem(50);
      }
      &:last-child {
        padding-right: 0;
      }
      .site-footer__section-label {
        @include media-breakpoint-up(md) {
          margin-bottom: rem(10);
        }
      }
      a {
        display: block;
        color: currentColor;
        text-decoration: underline;
        text-decoration-thickness: rem(1);
        text-underline-offset: rem(1);
        color: $white;
        transition: 0.2s color ease-in-out;
        &:hover {
          color: $iastate-gold;
        }
        &.site-footer__section-email {
          text-decoration: none;
          margin-bottom: rem(8);
          @include media-breakpoint-up(xl) {
            margin-bottom: rem(4);
            margin-top: rem(-2);
          }
          &:hover {
            text-decoration: underline;
            text-decoration-thickness: rem(1);
            text-underline-offset: rem(1);
          }
        }
      }
    }
  }
}

.site-footer__bottom-wrap {
  background-color: $iastate-maroon;
  margin-left: rem(-36);
  margin-right: rem(-36);
  padding-bottom: rem(20);
  @include media-breakpoint-up(md) {
    margin-left: rem(-68);
    margin-right: rem(-68);
    margin-top: rem(30);
    padding-left: rem(68);
    padding-right: rem(68);
  }
  @include media-breakpoint-up(xl) {
    margin-left: rem(-82);
    margin-right: rem(-82);
    margin-top: rem(50);
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-left: rem(82);
    padding-right: rem(82);
    padding-bottom: 0;
  }
  @include media-breakpoint-up(xxl) {
    position: relative;
  }
  &:before {
    @include media-breakpoint-up(xxl) {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -50vw;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-color: $iastate-maroon;
      pointer-events: none;
    }
  }
}

.site-footer__utility-nav {
  padding: rem(20);
  @include media-breakpoint-up(md) {
    padding: rem(20) 0;
  }
  @include media-breakpoint-up(xl) {
    padding: rem(20);
  }
  ul {
    @include media-breakpoint-up(md) {
      column-count: 2;
      column-gap: 0;
    }
    @include media-breakpoint-up(xl) {
      column-count: 1;
      display: flex;
    }
    li {
      text-align: center;
      line-height: (21 / 15);
      @include media-breakpoint-up(md) {
        text-align: left;
      }
      @include media-breakpoint-up(xl) {
        margin-right: rem(15);
      }
      @include media-breakpoint-up(xxl) {
        text-align: center;
      }
      a {
        color: $white;
        transition: 0.2s color ease-in-out;
        font-family: $typeface-sans-serif;
        font-weight: 700;
        font-size: rem(15);

        &:hover {
          color: $iastate-gold;
        }
      }
    }
  }
}

.site-footer__copyright {
  text-align: center;
  color: $white;
  font-family: $typeface-sans-serif;
  font-size: rem(15);
  line-height: (28 / 15);
  @include media-breakpoint-up(md) {
    text-align: left;
  }
  @include media-breakpoint-up(xl) {
    font-size: rem(18);
    line-height: (28 / 18);
    padding-right: rem(40);
    // text-align: center;
  }
}

// Styles for ecosystem footer variant only
.site-footer__logo-social-links-wrap {
  @include media-breakpoint-up(xl) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
}

.site-footer__site-org-contact-info {
  text-align: center;
  @include media-breakpoint-up(md) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: left;
  }
  @include media-breakpoint-up(xl) {
    flex: 0 1 auto;
    width: 50%;
  }

  .site-footer__section-label {
    color: $white;
    padding: 0;
    @include media-breakpoint-up(md) {
      flex: 0 1 auto;
      width: 100%;
    }
  }

  p {
    color: $white;
    font-weight: 700;
    a {
      color: currentColor;
      text-decoration-thickness: rem(1);
      text-underline-offset: rem(1);
      color: $white;
      transition: 0.2s color ease-in-out;
      &:hover {
        color: $iastate-gold;
      }
    }
  }
}

.site-footer__site-org-contact-address,
.site-footer__site-org-contact-email-phone-wrap {
  @include media-breakpoint-up(lg) {
    flex: 0 1 auto;
    width: 50%;
  }
}
.site-footer__site-org-contact-address,
.site-footer__site-org-contact-email,
.site-footer__site-org-contact-phone {
  margin-bottom: rem(20);
  @include media-breakpoint-up(xl) {
    margin-bottom: 0;
  }
}

.site-footer__site-org-contact-email,
.site-footer__site-org-contact-phone {
  p {
    margin: 0;
  }
}

.site-footer--ecosystem {
  .site-footer__logo-social-links-wrap + .site-footer__secondary-nav,
  .site-footer__logo-social-links-wrap + .site-footer__secondary-nav + .site-footer__site-org-contact-info {
    @include media-breakpoint-up(md) {
      margin-top: rem(40);
    }
    @include media-breakpoint-up(xl) {
      margin-top: rem(60);
    }
  }

  // instances where there is no site-footer__secondary-nav
  .site-footer__primary-nav + .site-footer__site-org-contact-info {
    @include media-breakpoint-up(xl) {
      position: relative;
      left: 50%;
    }
  }

  // instances where there is not site-footer__site-org-contact-info
  .site-footer__logo-social-links-wrap + .site-footer__site-org-contact-info {
    @include media-breakpoint-up(xl) {
      position: relative;
      left: 50%;
      margin-top: rem(30);
    }
  }
}
  • URL: /components/raw/site-footer/_site-footer.scss
  • Filesystem Path: src/components/site-footer/_site-footer.scss
  • Size: 14.3 KB

Site Footer

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • The site footer has sections for Primary, Secondary, Departments (with contact info) and Utility navigations
  • The site-footer--ecosystem variant has some optional elements: Social Navigation, Primary Navigation, Secondary Navigation, Address, Phone Numbers, Email Addresses, and Utility Navigation. The Social Navigation has room for Twitter, Instagram, Facebook, YouTube, LinkedIn, and Flickr - each is optional. For the Secondary Navigation if there are less than 3 links - the “Quick Links” label will be removed.
  • Uses font-awesome icons for the social media logos
  • The custom styles are imported into the index.scss file as @import "../components/site-footer/site-footer";