CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Footer

Footers are used to render links to important destinations inside and outside Lumen applications.

Examples

To use footers, apply the class chi-footer to <footer> and wrap all content in chi-footer__content.

Localization

The Footer's language drop down is not functional by default as language support varies by project. Please ensure the drop down is populated with the correct languages and URL paths relevant to your project prior to release.

Unauthenticated

Show the unauthenticated footer for all logged out views.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__external">
      <div class="chi-footer__external-content -mw--1200">
        <div class="chi-footer__header">
          <div class="chi-footer__brand">
            <a href="/" class="chi-brand" aria-label="Lumen">
              <svg viewBox="0 0 140 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path fill="#000" d="M.27396667 2.00213333V17.8541333c0 .9566667.558 1.395 1.634 1.395H16.8916333c1.0363334 0 1.634-.4383333 1.634-1.395 0-.9163333-.5976666-1.3946666-1.634-1.3946666H4.01996667c-.518 0-.71733334-.239-.71733334-.7173334V2.00213333c0-.797-.59766666-1.39466666-1.51433333-1.39466666-.87666667 0-1.51433333.59766666-1.51433333 1.39466666"/>
                <path fill="#000" d="M26.0176333 12.2995V2.00216667c0-.797-.5976666-1.395-1.5143333-1.395-.9166667 0-1.5143333.598-1.5143333 1.395V12.5785c0 6.416 3.985 7.1486667 10.8793333 7.1486667 6.894 0 10.8793333-.7326667 10.8793333-7.1486667V2.00216667c0-.797-.598-1.395-1.5143333-1.395-.9166667 0-1.5143333.598-1.5143333 1.395V12.2995c0 5.2203333-2.7896667 4.5186667-7.8506667 4.5186667s-7.8506667.622-7.8506667-4.5186667"/>
                <path fill="#000" d="M74.2765667 5.2699v12.8236667c0 .8366666.6376666 1.3946666 1.5143333 1.3946666.9166667 0 1.5143333-.558 1.5143333-1.3946666V2.67956667c0-1.15566667-.8126666-2.07233334-1.9126666-2.07233334-1.0423334 0-1.502.59166667-2.5106667 1.51433334l-7.7313333 7.62766666H65.1109l-7.731-7.58766666C56.3882333 1.14123333 55.6362333.60723333 54.7495667.60723333c-.8863334 0-1.9526667.91666667-1.9526667 2.07233334V18.0935667c0 .8366666.6376667 1.3946666 1.5143333 1.3946666.9166667 0 1.5143334-.558 1.5143334-1.3946666V5.2299H55.9849l7.3726667 6.99c.663.6496667 1.1793333 1.1556667 1.7133333 1.1556667.671 0 1.0156667-.5276667 1.754-1.1556667l7.3323333-6.95h.1193334z"/>
                <path fill="#0C9ED9" d="M103.845933 2.28113333c0-.91666666-.558-1.43466666-1.634-1.43466666H87.0686c-1.076 0-1.6336667.518-1.6336667 1.43466666V3.6698l16.8169997-.03366667c1.036 0 1.594-.47833333 1.594-1.355"/>
                <path fill="#000" d="M85.4348 8.71616667v9.13800003c0 .9563333.558 1.3946666 1.634 1.3946666h15.303c1.035667 0 1.593667-.4383333 1.593667-1.3946666 0-.9166667-.558-1.3946667-1.593667-1.3946667h-13.191c-.5176667 0-.7173333-.2393333-.7173333-.7173333V11.5425h9.963c1.0756666 0 1.6336663-.4783333 1.6336663-1.395 0-.87666667-.5579997-1.39466667-1.6336663-1.39466667L85.4348 8.71616667z"/>
                <path fill="#000" d="M132.8176 17.6948667V2.0022c0-.797-.637667-1.395-1.514667-1.395-.916666 0-1.514333.598-1.514333 1.395v12.704L114.804933 2.12153333C113.773267 1.2562 113.1996.6072 112.214267.6072c-1.080667 0-1.792667.71733333-1.792667 2.07233333V18.0935333c0 .797.637333 1.3946667 1.514 1.3946667.916667 0 1.514333-.5976667 1.514333-1.3946667V5.11053333L128.274267 17.8542c.993333.8433333 1.681666 1.634 2.710333 1.634 1.037 0 1.833-.7573333 1.833-1.7933333"/>
                <path fill="#000" d="M137.447467 3.0801c.316333 0 .495333-.165.495333-.399 0-.26166667-.179-.39933333-.495333-.39933333h-.591667V3.0801h.591667zm-1.06-1.211h1.101333c.536667 0 .936.26133333.936.77066667 0 .399-.234333.64666666-.564667.743l.647.922h-.564333l-.578-.83933334h-.509v.83933334h-.468333V1.8691zm3.055333 1.266v-.01366667c0-1.17-.908-2.133-2.119333-2.133-1.197334 0-2.119334.977-2.119334 2.14666667v.014c0 1.16966667.908 2.133 2.119334 2.133 1.197333 0 2.119333-.97733333 2.119333-2.147zm-4.514.014v-.014c0-1.30733333 1.06-2.40833333 2.394667-2.40833333 1.349 0 2.394666 1.08733333 2.394666 2.39466666V3.1351c0 1.30733333-1.059333 2.40866667-2.394666 2.40866667-1.348667 0-2.394667-1.08766667-2.394667-2.39466667z"/>
              </svg>
            </a>
          </div>
          <div class="chi-footer__search">
            <div class="chi-form__item">
              <label class="chi-label -d--none" for="chi-footer-search-input">Search Lumen</label>
              <input class="chi-input" type="text" placeholder="Search" id="chi-footer-search-input">
            </div>
          </div>
        </div>
        <div class="chi-footer__links chi-grid">
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li>
                <a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a>
              </li>
              <li>
                <a href="https://www.centurylink.com/business/login/" target="_blank">Sign in / Pay bill</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
              </li>
            </ul>
            <div class="chi-footer__social">
              <a href="https://www.twitter.com/lumentechco" aria-label="Lumen on Twitter" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-twitter -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.linkedin.com/company/lumen-tech" aria-label="Lumen on LinkedIn" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-linkedin -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.facebook.com/lumentechnologies" aria-label="Lumen on Facebook" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-facebook -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.youtube.com/lumentechnologies" aria-label="Lumen on YouTube" rel="noopener" target="_blank">
                <i class="chi-icon chi-icon icon-logo-youtube -md" aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li>
                <a href="https://www.lumen.com/en-us/about.html">About Us</a>
              </li>
              <li>
                <a href="https://ir.lumen.com" target="_blank">Investors</a>
              </li>
              <li>
                <a href="https://news.lumen.com" target="_blank">Newsroom</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/about/our-platform.html">Our Platform</a>
              </li>
              <li>
                <a href="https://www.lumen.com/public-sector.html" target="_blank">Public Sector</a>
              </li>
              <li>
                <a href="https://www.centurylink.com/home/" target="_blank">Residential</a>
              </li>
              <li>
                <a href="https://www.lumen.com/wholesale.html" target="_blank">Wholesale</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Solutions</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/adaptive-networking.html">Adaptive Networking</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/collaboration.html">Collaboration</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/connected-security.html">Connected Security</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/edge-computing.html">Edge Computing</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/hybrid-cloud.html">Hybrid Cloud</a>
              </li>
            </ul>
            <div class="chi-footer__links-title">Shop</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/marketplace.html">Marketplace</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Resources</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/about/4th-industrial-revolution.html">4th Industrial Revolution</a>
              </li>
              <li>
                <a href="https://blog.lumen.com" target="_blank">Blog</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/portals.html" target="_blank">Customer Portals</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/resources/network-maps.html">Network Maps</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/partner.html" target="_blank">Partners</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-dropdown chi-footer__language">
          <a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
            <div class="chi-button__content">
              <i class="chi-icon icon-globe-network-outline" aria-hidden="true"></i>
              <span>English</span>
            </div>
          </a>
          <div class="chi-dropdown__menu -w--sm -text--body">
            <a class="chi-dropdown__menu-item -active" href="#">English</a>
            <a class="chi-dropdown__menu-item" href="#">Español</a>
            <a class="chi-dropdown__menu-item" href="#">Português</a>
            <a class="chi-dropdown__menu-item" href="#">Français</a>
            <a class="chi-dropdown__menu-item" href="#">Deutsch</a>
            <a class="chi-dropdown__menu-item" href="#">简体中文</a>
            <a class="chi-dropdown__menu-item" href="#">日本語</a>
          </div>
        </div>
        <div class="chi-footer__links">
          <ul>
            <li>
              <a href="https://www.lumen.com/en-us/about.html">About Us</a>
            </li>
            <li>
              <a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a>
            </li>
            <li>
              <a href="https://jobs.lumen.com" target="_blank">Careers</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a>
            </li>
            <!-- OneTrust Cookies Settings button start -->
            <li>
              <a href="#" class="optanon-toggle-display">Cookie Settings</a>
            </li>
            <!-- OneTrust Cookies Settings button end -->
            <li>
              <a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/acceptable-use-policy.html" target="_blank">Legal Notices</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html">Privacy</a>
            </li>
            <li>
              <a href="https://www.centurylink.com/aboutus/company-information/public-policy.html" target="_blank">Public Policy</a>
            </li>
            <li>
              <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts">Canadian Ombudsman</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/gender-pay-gap-report?Creativeid=b565bf28-6d55-4f86-a245-2f0eb40b91a3" target="_blank">Gender Pay Gap 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/es-ar/about/legal/latam-tariffs-regulatory.html">Legal (Latin America)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/de-legal-notices.html">Legal Notices (Germany)</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/modern-slavery-statement-1?Creativeid=5dbb9687-e4a8-4a40-ae00-673ce51d6a80" target="_blank">Modern Slavery Statement 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/uk-tax-strategy.html">UK Tax Strategy</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>chi.dropdown(document.getElementById('language-dropdown-button'));</script>

Authenticated

Show the authenticated footer for all logged in views.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-dropdown chi-footer__language">
          <a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
            <div class="chi-button__content">
              <i class="chi-icon icon-globe-network-outline" aria-hidden="true"></i>
              <span>English</span>
            </div>
          </a>
          <div class="chi-dropdown__menu -w--sm -text--body">
            <a class="chi-dropdown__menu-item -active" href="#">English</a>
            <a class="chi-dropdown__menu-item" href="#">Español</a>
            <a class="chi-dropdown__menu-item" href="#">Português</a>
            <a class="chi-dropdown__menu-item" href="#">Français</a>
            <a class="chi-dropdown__menu-item" href="#">Deutsch</a>
            <a class="chi-dropdown__menu-item" href="#">简体中文</a>
            <a class="chi-dropdown__menu-item" href="#">日本語</a>
          </div>
        </div>
        <div class="chi-footer__links">
          <ul>
            <li><a href="https://www.lumen.com/en-us/about.html">About Us</a></li>
            <li>
              <a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a>
            </li>
            <li><a href="https://jobs.lumen.com" target="_blank">Careers</a></li>
            <li><a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a></li>
            <li><a href="#" class="optanon-toggle-display">Cookie Settings</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a></li>
            <li><a href="https://www.lumen.com/en-us/about/legal/acceptable-use-policy.html" target="_blank">Legal Notices</a>
            </li>
            <li><a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html">Privacy</a></li>
            <li>
              <a href="https://www.centurylink.com/aboutus/company-information/public-policy.html" target="_blank">Public Policy</a>
            </li>
            <li><a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a></li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts">Canadian Ombudsman</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/gender-pay-gap-report?Creativeid=b565bf28-6d55-4f86-a245-2f0eb40b91a3">Gender Pay Gap 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/es-ar/about/legal/latam-tariffs-regulatory.html">Legal (Latin America)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/de-legal-notices.html">Legal Notices (Germany)</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/modern-slavery-statement-1?Creativeid=5dbb9687-e4a8-4a40-ae00-673ce51d6a80">Modern Slavery Statement 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/uk-tax-strategy.html">UK Tax Strategy</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>chi.dropdown(document.getElementById('language-dropdown-button'));</script>

Unauthenticated - Simple

Show the unauthenticated simple footer for all logged out views where social media links, language selection, and international legal notice links are not needed (e.g. Developer Center).

<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__external">
      <div class="chi-footer__external-content -mw--1200">
        <div class="chi-footer__header">
        </div>
        <div class="chi-footer__links chi-grid">
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__brand">
              <a href="/" class="chi-brand" aria-label="Lumen">
                <svg viewBox="0 0 140 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path fill="#000" d="M.27396667 2.00213333V17.8541333c0 .9566667.558 1.395 1.634 1.395H16.8916333c1.0363334 0 1.634-.4383333 1.634-1.395 0-.9163333-.5976666-1.3946666-1.634-1.3946666H4.01996667c-.518 0-.71733334-.239-.71733334-.7173334V2.00213333c0-.797-.59766666-1.39466666-1.51433333-1.39466666-.87666667 0-1.51433333.59766666-1.51433333 1.39466666"/>
                  <path fill="#000" d="M26.0176333 12.2995V2.00216667c0-.797-.5976666-1.395-1.5143333-1.395-.9166667 0-1.5143333.598-1.5143333 1.395V12.5785c0 6.416 3.985 7.1486667 10.8793333 7.1486667 6.894 0 10.8793333-.7326667 10.8793333-7.1486667V2.00216667c0-.797-.598-1.395-1.5143333-1.395-.9166667 0-1.5143333.598-1.5143333 1.395V12.2995c0 5.2203333-2.7896667 4.5186667-7.8506667 4.5186667s-7.8506667.622-7.8506667-4.5186667"/>
                  <path fill="#000" d="M74.2765667 5.2699v12.8236667c0 .8366666.6376666 1.3946666 1.5143333 1.3946666.9166667 0 1.5143333-.558 1.5143333-1.3946666V2.67956667c0-1.15566667-.8126666-2.07233334-1.9126666-2.07233334-1.0423334 0-1.502.59166667-2.5106667 1.51433334l-7.7313333 7.62766666H65.1109l-7.731-7.58766666C56.3882333 1.14123333 55.6362333.60723333 54.7495667.60723333c-.8863334 0-1.9526667.91666667-1.9526667 2.07233334V18.0935667c0 .8366666.6376667 1.3946666 1.5143333 1.3946666.9166667 0 1.5143334-.558 1.5143334-1.3946666V5.2299H55.9849l7.3726667 6.99c.663.6496667 1.1793333 1.1556667 1.7133333 1.1556667.671 0 1.0156667-.5276667 1.754-1.1556667l7.3323333-6.95h.1193334z"/>
                  <path fill="#0C9ED9" d="M103.845933 2.28113333c0-.91666666-.558-1.43466666-1.634-1.43466666H87.0686c-1.076 0-1.6336667.518-1.6336667 1.43466666V3.6698l16.8169997-.03366667c1.036 0 1.594-.47833333 1.594-1.355"/>
                  <path fill="#000" d="M85.4348 8.71616667v9.13800003c0 .9563333.558 1.3946666 1.634 1.3946666h15.303c1.035667 0 1.593667-.4383333 1.593667-1.3946666 0-.9166667-.558-1.3946667-1.593667-1.3946667h-13.191c-.5176667 0-.7173333-.2393333-.7173333-.7173333V11.5425h9.963c1.0756666 0 1.6336663-.4783333 1.6336663-1.395 0-.87666667-.5579997-1.39466667-1.6336663-1.39466667L85.4348 8.71616667z"/>
                  <path fill="#000" d="M132.8176 17.6948667V2.0022c0-.797-.637667-1.395-1.514667-1.395-.916666 0-1.514333.598-1.514333 1.395v12.704L114.804933 2.12153333C113.773267 1.2562 113.1996.6072 112.214267.6072c-1.080667 0-1.792667.71733333-1.792667 2.07233333V18.0935333c0 .797.637333 1.3946667 1.514 1.3946667.916667 0 1.514333-.5976667 1.514333-1.3946667V5.11053333L128.274267 17.8542c.993333.8433333 1.681666 1.634 2.710333 1.634 1.037 0 1.833-.7573333 1.833-1.7933333"/>
                  <path fill="#000" d="M137.447467 3.0801c.316333 0 .495333-.165.495333-.399 0-.26166667-.179-.39933333-.495333-.39933333h-.591667V3.0801h.591667zm-1.06-1.211h1.101333c.536667 0 .936.26133333.936.77066667 0 .399-.234333.64666666-.564667.743l.647.922h-.564333l-.578-.83933334h-.509v.83933334h-.468333V1.8691zm3.055333 1.266v-.01366667c0-1.17-.908-2.133-2.119333-2.133-1.197334 0-2.119334.977-2.119334 2.14666667v.014c0 1.16966667.908 2.133 2.119334 2.133 1.197333 0 2.119333-.97733333 2.119333-2.147zm-4.514.014v-.014c0-1.30733333 1.06-2.40833333 2.394667-2.40833333 1.349 0 2.394666 1.08733333 2.394666 2.39466666V3.1351c0 1.30733333-1.059333 2.40866667-2.394666 2.40866667-1.348667 0-2.394667-1.08766667-2.394667-2.39466667z"/>
                </svg>
              </a>
            </div>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">APIs</div>
            <ul>
              <li>
                <a href="#">Explore APIs</a>
              </li>
              <li>
                <a href="#">Learn and Build</a>
              </li>
              <li>
                <a href="#">Get Started</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Products</div>
            <ul>
              <li>
                <a href="#">Browse All Products</a>
              </li>
              <li>
                <a href="#">Business Management</a>
              </li>
              <li>
                <a href="#">CenturyLink Partners</a>
              </li>
              <li>
                <a href="#">Communications</a>
              </li>
              <li>
                <a href="#">Edge Services</a>
              </li>
              <li>
                <a href="#">Lumen Channel Partners</a>
              </li>
              <li>
                <a href="#">Networking</a>
              </li>
              <li>
                <a href="#">Security</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Help & Support</div>
            <ul>
              <li>
                <a href="#">FAQ</a>
              </li>
              <li>
                <a href="#" target="_blank">Help Documentation</a>
              </li>
              <li>
                <a href="#" target="_blank">Contact Us</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-footer__links">
          <ul>
            <li>
              <a href="https://www.lumen.com/en-us/about.html" target="_blank">About Lumen</a>
            </li>
            <li>
              <a href="https://jobs.lumen.com" target="_blank">Careers</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/partner.html" target="_blank">Partners</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html" target="_blank">Privacy Policy</a>
            </li>
            <li>
              <a href="https://apimarketplace.lumen.com/terms-use" target="_blank">Terms of Use</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

Authenticated - Simple

Show the authenticated simple footer for all logged in views where social media links, language selection, and international legal notice links are not needed (e.g. Developer Center).

<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-footer__links">
          <ul>
            <li>
              <a href="https://www.lumen.com/en-us/about.html" target="_blank">About Lumen</a>
            </li>
            <li>
              <a href="https://jobs.lumen.com" target="_blank">Careers</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/partner.html" target="_blank">Partners</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html" target="_blank">Privacy Policy</a>
            </li>
            <li>
              <a href="https://apimarketplace.lumen.com/terms-use" target="_blank">Terms of Use</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

External

Show the external footer for all public facing webpages.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__external">
      <div class="chi-footer__external-content -mw--1200">
        <div class="chi-footer__header">
          <div class="chi-footer__brand">
            <a class="chi-brand -centurylink -black" href="/" aria-label="CenturyLink">
              <svg viewBox="0 0 204 41" xmlns="http://www.w3.org/2000/svg" data-brand-type="black" aria-hidden="true">
                <path fill="#242526" d="M18.634.03c-2.406.214-4.692.841-6.791 1.817l6.791 11.758V.03"></path>
                <path fill="#242526" d="M8.639 3.7C6.712 5.055 5.028 6.744 3.67 8.669l11.758 6.786L8.639 3.7"></path>
                <path fill="#242526" d="M1.814 11.873C.844 13.967.216 16.257 0 18.662h13.578L1.814 11.873M0 22.363c.218 2.412.844 4.696 1.814 6.787l11.764-6.787H0"></path>
                <path fill="#242526" d="M3.67 32.358a20.6867 20.6867 0 0 0 4.969 4.971l6.789-11.759L3.67 32.358m8.173 6.823c2.099.973 4.385 1.604 6.791 1.819V27.422l-6.791 11.759"></path>
                <path fill="#242526" d="M22.335 41c2.407-.215 4.69-.846 6.789-1.819l-6.789-11.759V41"></path>
                <path fill="#242526" d="M32.33 37.329a20.6729 20.6729 0 0 0 4.97-4.971L25.542 25.57l6.788 11.759"></path>
                <path fill="#242526" d="M27.393 22.363l11.761 6.787c.972-2.091 1.599-4.375 1.815-6.787H27.393m13.576-3.701c-.218-2.405-.845-4.695-1.815-6.789l-11.761 6.789h13.576"></path>
                <path fill="#242526" d="M32.331 3.7l-6.787 11.755L37.3 8.669c-1.358-1.925-3.042-3.614-4.969-4.969zm-3.207-1.853C27.025.871 24.742.245 22.335.03v13.575l6.789-11.758"></path>
                <path fill="#242526" d="M188.016 22.141l.05.046 3.87-5.513h4.365l-4.523 5.75 4.81 7.525h-4.573l-3.949-7.185-.05.052v7.133h-3.919V11.074h3.919v11.067m-16.371-3.797l.051.08c.814-1.205 2.041-1.987 4.028-1.987 1.305 0 3.843.963 4.312 2.876.21.809.265 1.648.265 2.092v8.544h-3.924v-7.89c-.023-1.414-.419-3.005-2.353-3.005-1.23 0-2.3 1.097-2.353 3.005v7.89h-3.92v-13.12h3.894v1.515M160.068 29.95h3.923V16.829h-3.923V29.95zm-.13-15.501h4.184v-3.375h-4.184v3.375zm-14.56 15.5V11.074h4.054v15.742h8.181v3.133h-12.235m-9.572 5.025h-2.541l1.989-5.074-5.462-13.071h2.766l4.107 10.353 4.189-10.353h2.663l-7.711 18.145m-12.105-5.025h-2.484v-13.12h2.484v2.533h.055c.366-1.802 2.035-2.717 3.841-2.717.313 0 .577.029.861.029v2.351c-.338-.128-.731-.128-1.07-.128-3.139.102-3.687 1.775-3.687 4.548v6.504m-8.285-13.12h2.481v13.12h-2.428V28.02h-.053c-.994 1.642-2.668 2.323-4.497 2.323-2.746 0-4.316-2.086-4.316-4.731v-8.783h2.486v7.763c0 2.277.521 3.948 2.901 3.948 1.019 0 2.403-.52 2.931-1.883.468-1.225.495-2.767.495-3.083v-6.745m-16.434-.004v-2.792l2.484-.786v3.578h3.033v1.802h-3.033v8.426c0 .937.732 1.382 1.623 1.382.39 0 .912-.051 1.303-.154v1.907c-.571.029-1.124.155-1.694.155-.602 0-1.076-.024-1.674-.126-.393-.079-1.05-.287-1.464-.865-.447-.627-.578-.678-.578-2.43v-8.295h-2.246v-1.802h2.246m-12.923 1.938h.051c.839-1.649 2.668-2.326 3.974-2.326.915 0 4.971.237 4.971 4.446v9.066h-2.486v-8.26c0-2.17-.913-3.345-3.01-3.345 0 0-1.357-.079-2.403.969-.365.362-1.046.942-1.046 3.503v7.133h-2.485v-13.12h2.434v1.934m-7.591 3.378c.051-2.202-.945-3.902-3.349-3.902-2.066 0-3.294 1.751-3.294 3.902h6.643zm-6.643 1.719c-.181 2.304.761 4.68 3.294 4.68 1.935 0 2.901-.755 3.193-2.664h2.613c-.394 2.979-2.692 4.467-5.83 4.467-4.209 0-5.882-2.976-5.882-6.846 0-3.843 1.932-7.06 6.089-7.06 3.923.077 5.778 2.562 5.778 6.192v1.231h-9.255zm-7.262-7.921c-.131-1.806-2.066-3.009-4.001-3.009-4.658 0-5.521 4.263-5.521 7.588 0 3.896 1.181 7.578 5.287 7.578 2.008 0 3.841-.994 4.153-3.003h2.747c-.261 3.164-3.453 5.25-7.136 5.25-5.57 0-7.79-4.545-7.79-9.825 0-4.629 2.035-10.017 8.361-9.835 3.633.106 6.357 1.884 6.642 5.256h-2.742"></path>
              </svg>
            </a>
          </div>
          <div class="chi-footer__search">
            <div class="chi-form__item">
              <label class="chi-label -d--none" for="chi-footer-search-input2">Search CenturyLink</label>
              <input class="chi-input" type="text" placeholder="Search" id="chi-footer-search-input2" />
            </div>
          </div>
        </div>
        <div class="chi-footer__links chi-grid">
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li><a href="https://www.centurylink.com/home/help/contact.html">Contact Us</a></li>
              <li><a href="https://signin.centurylink.com/oxauth/consumer/login.htm" target="_blank">Sign in / Pay bill</a></li>
              <li><a href="https://www.centurylink.com/home/help.html">Support</a></li>
            </ul>
            <div class="chi-footer__social"><a href="https://twitter.com/centurylink" aria-label="CenturyLink on Twitter" rel="noopener" target="_blank"><i class="chi-icon icon-logo-twitter -md"></i></a><a href="https://www.linkedin.com/company/centurylink" aria-label="CenturyLink on LinkedIn" rel="noopener" target="_blank"><i class="chi-icon icon-logo-linkedin -md"></i></a><a href="https://www.facebook.com/CenturyLink" aria-label="CenturyLink on Facebook" rel="noopener" target="_blank"><i class="chi-icon icon-logo-facebook -md"></i></a><a href="https://www.youtube.com/centurylink" aria-label="CenturyLink on YouTube" rel="noopener" target="_blank"><i class="chi-icon icon-logo-youtube -md"></i></a></div>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li><a href="https://www.lumen.com/en-us/about.html" target="_blank">About Lumen</a></li>
              <li><a href="https://www.centurylink.com/aboutus.html" target="_blank">About CenturyLink</a></li>
              <li><a href="https://ir.lumen.com/">Investor Relations</a></li>
              <li><a href="https://news.lumen.com/" target="_blank">Newsroom</a></li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Solutions</div>
            <ul>
              <li><a href="https://www.centurylink.com/">Residential</a></li>
              <li><a href="https://www.centurylink.com/small-business/">Small Business</a></li>
              <li><a href="https://www.lumen.com/en-us/home.html">Enterprise</a></li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Resources</div>
            <ul>
              <li><a href="https://www.centurylink.com/local.html" target="_blank">CenturyLink in Your Area</a></li>
              <li><a href="http://www.localinternetservice.com/" target="_blank">CenturyLink Retailer</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-footer__links">
          <ul>
            <li><a href="https://www.centurylink.com/aboutus.html">About Us</a></li>
            <li><a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a></li>
            <li><a href="https://jobs.lumen.com" target="_blank">Careers</a></li>
            <li><a href="https://www.centurylink.com/home/help/contact.html">Contact Us</a></li><!-- OneTrust Cookies Settings button start -->
            <li><a class="optanon-toggle-display" href="#">Cookie Settings</a></li><!-- OneTrust Cookies Settings button end -->
            <li><a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a></li>
            <li><a href="https://www.centurylink.com/legal/" target="_blank">Legal Notices</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal/privacy-policy.html">Privacy Policy</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal/tariff-library.html" target="_blank">Tariffs</a></li>
            <li><a href="https://www.centurylink.com/sitemap.html" target="_blank">Site Map</a></li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

Internal

Show the internal footer for authenticated users.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-footer__links">
          <ul>
            <li><a href="https://www.centurylink.com/aboutus.html">About Us</a></li>
            <li><a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a></li>
            <li><a href="https://jobs.lumen.com" target="_blank">Careers</a></li>
            <li><a href="https://www.centurylink.com/home/help/contact.html">Contact Us</a></li><!-- OneTrust Cookies Settings button start -->
            <li><a class="optanon-toggle-display" href="#">Cookie Settings</a></li><!-- OneTrust Cookies Settings button end -->
            <li><a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a></li>
            <li><a href="https://www.centurylink.com/legal/" target="_blank">Legal Notices</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal/privacy-policy.html">Privacy Policy</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal/tariff-library.html" target="_blank">Tariffs</a></li>
            <li><a href="https://www.centurylink.com/sitemap.html" target="_blank">Site Map</a></li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

Localization

The Footer's language drop down is not functional by default as language support varies by project. Please ensure the drop down is populated with the correct languages and URL paths relevant to your project prior to release.

External

Show the external footer for all public facing webpages.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__external">
      <div class="chi-footer__external-content -mw--1200">
        <div class="chi-footer__header">
          <div class="chi-footer__brand">
            <a class="chi-brand -brightspeed" href="/" aria-label="Brightspeed">
              <svg viewBox="0 0 219 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#FFC800" d="M6.27 25.27A6.26 6.26 0 0 0 0 19.01v6.26h6.26ZM0 6.26A6.26 6.26 0 0 0 6.28 0H0v6.26ZM19.02 25.27a6.26 6.26 0 0 1 6.26-6.26v6.26h-6.26ZM25.28 6.26A6.26 6.26 0 0 1 19.02 0h6.26v6.26ZM10.44 14.83a14.81 14.81 0 0 0-2.8-2.2A14.77 14.77 0 0 1 0 14.77a10.5 10.5 0 0 1 10.51 10.51c0-2.7.73-5.34 2.12-7.65a14.63 14.63 0 0 0-2.19-2.79Z"/><path fill="#FA783C" d="M10.44 10.45c.84-.84 1.58-1.78 2.2-2.8A14.77 14.77 0 0 1 10.5 0 10.5 10.5 0 0 1 .01 10.51c2.69 0 5.33.73 7.64 2.12a14.73 14.73 0 0 0 2.8-2.18Z"/><path fill="#FA4628" d="M0 10.51v4.25c2.7 0 5.35-.73 7.65-2.12a14.78 14.78 0 0 0-7.64-2.13Z"/><path fill="#FA783C" d="M14.84 14.83a14.7 14.7 0 0 0-2.2 2.8c1.4 2.3 2.13 4.95 2.12 7.64a10.5 10.5 0 0 1 10.52-10.5c-2.7 0-5.34-.74-7.65-2.13a14.76 14.76 0 0 0-2.8 2.19Z"/><path fill="#FA4628" d="M10.52 25.27h4.25c0-2.7-.73-5.34-2.12-7.64a14.77 14.77 0 0 0-2.13 7.64Z"/><path fill="#FFC800" d="M14.84 10.44c.84.85 1.77 1.58 2.8 2.2 2.3-1.4 4.94-2.13 7.64-2.12A10.5 10.5 0 0 1 14.77 0c0 2.7-.73 5.34-2.12 7.64a14.81 14.81 0 0 0 2.19 2.8Z"/><path fill="#FA4628" d="M14.77 0h-4.25c0 2.7.73 5.34 2.12 7.65 1.4-2.3 2.13-4.95 2.13-7.65ZM17.63 12.64c2.3 1.39 4.95 2.12 7.64 2.12V10.5c-2.7 0-5.34.73-7.64 2.13Z"/><path fill="#000" d="M71.08 1.19a3.17 3.17 0 0 1 4.07 0 2.66 2.66 0 0 1 .02 3.8c-.53.48-1.21.73-2.05.73-.84 0-1.53-.25-2.05-.74a2.66 2.66 0 0 1 .01-3.79Zm-.4 6.84h4.84v15.22h-4.84V8.03ZM82.04 31.2a5.96 5.96 0 0 1-3.85-5.71c0-.25 0-.5.03-.74h4.66c-.04 1 .24 1.78.84 2.34.6.55 1.49.83 2.64.83 1.03 0 1.86-.23 2.5-.7a2.16 2.16 0 0 0 .95-1.83c0-.78-.3-1.38-.88-1.8a4.26 4.26 0 0 0-2.5-.63A9.69 9.69 0 0 1 82 22a6.96 6.96 0 0 1-2.93-2.7 7.79 7.79 0 0 1-1.03-4.05 7.29 7.29 0 0 1 4.02-6.67 9.38 9.38 0 0 1 7.78-.23l1.8-2.22 3.54 2.56-2.03 2.37a6.15 6.15 0 0 1 1.54 4.2c0 1.09-.27 2.17-.82 3.12a6.64 6.64 0 0 1-2.3 2.36c.97.42 1.8 1.1 2.4 1.96a5 5 0 0 1 .84 2.88c.02 1.2-.34 2.39-1.05 3.37a6.6 6.6 0 0 1-2.95 2.25 11.7 11.7 0 0 1-4.44.79c-1.65 0-3.1-.26-4.33-.8Zm1.76-13.33c.65.66 1.52 1 2.6 1 1.06 0 1.93-.33 2.58-.99.65-.65.98-1.53.99-2.62 0-1.1-.32-1.96-.97-2.61a3.58 3.58 0 0 0-2.62-.98c-1.07 0-1.93.33-2.59.98a3.5 3.5 0 0 0-.98 2.61c0 1.07.33 1.93.99 2.6Zm14.09-16.2h4.84v8a5.88 5.88 0 0 1 4.65-2c1.87 0 3.36.63 4.46 1.88 1.1 1.26 1.64 2.95 1.65 5.09v8.6h-4.84v-8.32a3.4 3.4 0 0 0-.73-2.32 2.54 2.54 0 0 0-2.02-.83c-.94 0-1.7.32-2.3.96a3.54 3.54 0 0 0-.87 2.5v8h-4.84V1.69Zm32 19.94 1.85-3.33c.8.48 1.67.83 2.57 1.05.95.24 1.93.37 2.92.37 1.33 0 2-.36 2-1.08a.89.89 0 0 0-.56-.83c-.37-.19-.98-.3-1.84-.37a8.22 8.22 0 0 1-4.61-1.45 4.05 4.05 0 0 1-1.71-3.39 4.24 4.24 0 0 1 1.84-3.62c1.24-.9 2.9-1.34 5-1.34 1.15 0 2.3.14 3.4.43 1 .25 1.94.65 2.8 1.2l-1.88 3.24a8.18 8.18 0 0 0-4.1-.98c-1.56 0-2.35.37-2.34 1.1a.77.77 0 0 0 .47.72 5 5 0 0 0 1.62.37c2.18.16 3.84.65 4.98 1.48a4 4 0 0 1 1.71 3.45c0 1.56-.63 2.79-1.88 3.68-1.25.9-2.99 1.34-5.2 1.34-2.7 0-5.05-.68-7.04-2.04Zm39.6 1.03a7 7 0 0 1-2.98-2.76 8.23 8.23 0 0 1-1.05-4.22 8.3 8.3 0 0 1 1.03-4.16 7.18 7.18 0 0 1 2.89-2.82c1.23-.67 2.66-1 4.28-1 1.66 0 3.1.31 4.32.94a6.65 6.65 0 0 1 2.79 2.65c.64 1.14.97 2.47.97 4-.01.6-.06 1.2-.16 1.8H170.4a2.88 2.88 0 0 0 1.27 1.9c.7.49 1.59.73 2.68.73.75 0 1.5-.11 2.22-.34.67-.2 1.3-.52 1.85-.95l2.53 2.7a9 9 0 0 1-3.07 1.86c-1.21.44-2.5.66-3.78.65-1.77 0-3.3-.33-4.6-.98Zm7.65-8.33a2.82 2.82 0 0 0-.98-2.07c-.59-.5-1.37-.74-2.35-.74-.97 0-1.76.25-2.36.74-.6.5-.95 1.18-1.04 2.07h6.73Zm10.51 8.33a7 7 0 0 1-2.99-2.76 8.23 8.23 0 0 1-1.04-4.22 8.28 8.28 0 0 1 1.03-4.16 7.18 7.18 0 0 1 2.88-2.82c1.23-.67 2.66-1 4.29-1 1.66 0 3.1.31 4.31.94a6.65 6.65 0 0 1 2.8 2.65c.64 1.14.96 2.47.96 4 0 .6-.06 1.2-.15 1.8h-11.2a2.88 2.88 0 0 0 1.28 1.9c.7.5 1.59.73 2.68.73.75 0 1.5-.11 2.22-.34.67-.2 1.3-.52 1.85-.95l2.52 2.71a8.98 8.98 0 0 1-3.06 1.85c-1.21.44-2.5.66-3.78.65-1.77 0-3.3-.33-4.6-.98Zm7.65-8.33a2.83 2.83 0 0 0-.97-2.07 3.52 3.52 0 0 0-2.36-.74c-.97 0-1.75.25-2.36.74-.6.5-.95 1.18-1.03 2.07h6.72Zm-142.94-2.8a9.6 9.6 0 0 1 0 8.24 6.83 6.83 0 0 1-2.59 2.8 7.21 7.21 0 0 1-3.79 1c-1.92 0-3.5-.61-4.75-1.82v1.52h-4.8V1.68h4.83v7.8a6.7 6.7 0 0 1 4.72-1.76 7.21 7.21 0 0 1 3.8 1 6.83 6.83 0 0 1 2.58 2.8Zm-4.9 6.91a3.86 3.86 0 0 0 1.02-2.79c0-1.15-.34-2.08-1.02-2.79a3.44 3.44 0 0 0-2.62-1.06 3.4 3.4 0 0 0-2.6 1.08c-.67.72-1 1.64-1 2.77 0 1.13.33 2.06 1 2.78a3.4 3.4 0 0 0 2.6 1.08c1.07 0 1.95-.36 2.62-1.07ZM66.85 8.07c.68.25 1.3.64 1.82 1.14l-2.04 3.54a5.72 5.72 0 0 0-1.2-.58 3.65 3.65 0 0 0-1.17-.19 3.1 3.1 0 0 0-2.44.98c-.6.66-.9 1.62-.9 2.9v7.4H56.1V8.03h4.84V9.6a4.57 4.57 0 0 1 3.82-1.91c.72 0 1.43.13 2.1.38Zm59.83 10.96 1.14 3.64a8.91 8.91 0 0 1-4.04.9 5.44 5.44 0 0 1-3.95-1.4c-.96-.94-1.44-2.45-1.44-4.53v-5.76h-2.6V8.03h2.6V3.7h4.8v4.32h3.8v3.85h-3.8v5.76c0 .62.16 1.08.47 1.38a1.75 1.75 0 0 0 1.26.44c.61 0 1.22-.15 1.76-.43Zm35.92-7.5a9.63 9.63 0 0 1 0 8.24 6.84 6.84 0 0 1-2.6 2.8 7.21 7.21 0 0 1-3.79 1 6.6 6.6 0 0 1-4.71-1.8v8.09h-4.84V8.03h4.8v1.48a6.55 6.55 0 0 1 4.75-1.79 7.21 7.21 0 0 1 3.8 1 6.84 6.84 0 0 1 2.59 2.8Zm-4.9 6.9a3.85 3.85 0 0 0 1.02-2.79c0-1.15-.34-2.08-1.02-2.79a3.44 3.44 0 0 0-2.62-1.06 3.4 3.4 0 0 0-2.61 1.08c-.67.72-1 1.64-1 2.77a3.9 3.9 0 0 0 1 2.78 3.4 3.4 0 0 0 2.6 1.08c1.08 0 1.95-.36 2.63-1.07Zm56.06-16.75h4.84v21.57h-4.84V21.7c-.51.52-1.12.94-1.78 1.24-.96.42-1.99.63-3.03.62a6.7 6.7 0 0 1-6.27-3.78 9.04 9.04 0 0 1-.9-4.14c0-1.57.3-2.95.9-4.15a6.7 6.7 0 0 1 6.27-3.77c.92 0 1.84.15 2.7.48.8.29 1.51.75 2.11 1.34V1.68Zm-.95 16.75c.51-.55.85-1.24.95-1.98v-1.61a3.62 3.62 0 0 0-.95-1.99 3.45 3.45 0 0 0-2.62-1.06 3.4 3.4 0 0 0-2.61 1.08c-.67.72-1 1.64-1 2.77 0 1.13.33 2.06 1 2.78a3.4 3.4 0 0 0 2.6 1.08c1.07 0 1.95-.36 2.63-1.07Z"/></svg>
            </a>
          </div>
          <div class="chi-footer__search">
            <div class="chi-form__item">
              <label class="chi-label -d--none" for="chi-footer-search-input">Search Lumen</label>
              <input class="chi-input" type="text" placeholder="Search" id="chi-footer-search-input">
            </div>
          </div>
        </div>
        <div class="chi-footer__links chi-grid">
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li>
                <a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a>
              </li>
              <li>
                <a href="https://www.centurylink.com/business/login/" target="_blank">Sign in / Pay bill</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
              </li>
            </ul>
            <div class="chi-footer__social">
              <a href="https://www.twitter.com/lumentechco" aria-label="Lumen on Twitter" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-twitter -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.linkedin.com/company/lumen-tech" aria-label="Lumen on LinkedIn" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-linkedin -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.facebook.com/lumentechnologies" aria-label="Lumen on Facebook" rel="noopener" target="_blank">
                <i class="chi-icon icon-logo-facebook -md" aria-hidden="true"></i>
              </a>
              <a href="https://www.youtube.com/lumentechnologies" aria-label="Lumen on YouTube" rel="noopener" target="_blank">
                <i class="chi-icon chi-icon icon-logo-youtube -md" aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <ul class="-text--bold">
              <li>
                <a href="https://www.lumen.com/en-us/about.html">About Us</a>
              </li>
              <li>
                <a href="https://ir.lumen.com" target="_blank">Investors</a>
              </li>
              <li>
                <a href="https://news.lumen.com" target="_blank">Newsroom</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/about/our-platform.html">Our Platform</a>
              </li>
              <li>
                <a href="https://www.lumen.com/public-sector.html" target="_blank">Public Sector</a>
              </li>
              <li>
                <a href="https://www.centurylink.com/home/" target="_blank">Residential</a>
              </li>
              <li>
                <a href="https://www.lumen.com/wholesale.html" target="_blank">Wholesale</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Solutions</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/adaptive-networking.html">Adaptive Networking</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/collaboration.html">Collaboration</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/connected-security.html">Connected Security</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/edge-computing.html">Edge Computing</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/solutions/hybrid-cloud.html">Hybrid Cloud</a>
              </li>
            </ul>
            <div class="chi-footer__links-title">Shop</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/marketplace.html">Marketplace</a>
              </li>
            </ul>
          </div>
          <div class="chi-col -w--12 -w-md--6 -w-lg--3">
            <div class="chi-footer__links-title">Resources</div>
            <ul>
              <li>
                <a href="https://www.lumen.com/en-us/about/4th-industrial-revolution.html">4th Industrial Revolution</a>
              </li>
              <li>
                <a href="https://blog.lumen.com" target="_blank">Blog</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/portals.html" target="_blank">Customer Portals</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/resources/network-maps.html">Network Maps</a>
              </li>
              <li>
                <a href="https://www.lumen.com/en-us/partner.html" target="_blank">Partners</a>
              </li>
              <li>
                <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-dropdown chi-footer__language">
          <a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
            <div class="chi-button__content">
              <i class="chi-icon icon-globe-network-outline" aria-hidden="true"></i>
              <span>English</span>
            </div>
          </a>
          <div class="chi-dropdown__menu -w--sm -text--body">
            <a class="chi-dropdown__menu-item -active" href="#">English</a>
            <a class="chi-dropdown__menu-item" href="#">Español</a>
            <a class="chi-dropdown__menu-item" href="#">Português</a>
            <a class="chi-dropdown__menu-item" href="#">Français</a>
            <a class="chi-dropdown__menu-item" href="#">Deutsch</a>
            <a class="chi-dropdown__menu-item" href="#">简体中文</a>
            <a class="chi-dropdown__menu-item" href="#">日本語</a>
          </div>
        </div>
        <div class="chi-footer__links">
          <ul>
            <li>
              <a href="https://www.lumen.com/en-us/about.html">About Us</a>
            </li>
            <li>
              <a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a>
            </li>
            <li>
              <a href="https://jobs.lumen.com" target="_blank">Careers</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a>
            </li>
            <!-- OneTrust Cookies Settings button start -->
            <li>
              <a href="#" class="optanon-toggle-display">Cookie Settings</a>
            </li>
            <!-- OneTrust Cookies Settings button end -->
            <li>
              <a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/acceptable-use-policy.html" target="_blank">Legal Notices</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html">Privacy</a>
            </li>
            <li>
              <a href="https://www.centurylink.com/aboutus/company-information/public-policy.html" target="_blank">Public Policy</a>
            </li>
            <li>
              <a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts">Canadian Ombudsman</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/gender-pay-gap-report?Creativeid=b565bf28-6d55-4f86-a245-2f0eb40b91a3" target="_blank">Gender Pay Gap 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/es-ar/about/legal/latam-tariffs-regulatory.html">Legal (Latin America)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/de-legal-notices.html">Legal Notices (Germany)</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/modern-slavery-statement-1?Creativeid=5dbb9687-e4a8-4a40-ae00-673ce51d6a80" target="_blank">Modern Slavery Statement 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/uk-tax-strategy.html">UK Tax Strategy</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>chi.dropdown(document.getElementById('language-dropdown-button'));</script>

Internal

Show the internal footer for authenticated users.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-dropdown chi-footer__language">
          <a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
            <div class="chi-button__content">
              <i class="chi-icon icon-globe-network-outline" aria-hidden="true"></i>
              <span>English</span>
            </div>
          </a>
          <div class="chi-dropdown__menu -w--sm -text--body">
            <a class="chi-dropdown__menu-item -active" href="#">English</a>
            <a class="chi-dropdown__menu-item" href="#">Español</a>
            <a class="chi-dropdown__menu-item" href="#">Português</a>
            <a class="chi-dropdown__menu-item" href="#">Français</a>
            <a class="chi-dropdown__menu-item" href="#">Deutsch</a>
            <a class="chi-dropdown__menu-item" href="#">简体中文</a>
            <a class="chi-dropdown__menu-item" href="#">日本語</a>
          </div>
        </div>
        <div class="chi-footer__links">
          <ul>
            <li><a href="https://www.lumen.com/en-us/about.html">About Us</a></li>
            <li>
              <a href="https://www.centurylink.com/aboutus/community/community-development/programs-for-customers-with-disabilities.html">Accessibility</a>
            </li>
            <li><a href="https://jobs.lumen.com" target="_blank">Careers</a></li>
            <li><a href="https://www.lumen.com/en-us/contact-us.html">Contact Us</a></li>
            <li><a href="#" class="optanon-toggle-display">Cookie Settings</a></li>
            <li><a href="https://www.centurylink.com/aboutus/legal.html" target="_blank">Legal</a></li>
            <li><a href="https://www.lumen.com/en-us/about/legal/acceptable-use-policy.html" target="_blank">Legal Notices</a>
            </li>
            <li><a href="https://www.lumen.com/en-us/about/legal/privacy-notice.html">Privacy</a></li>
            <li>
              <a href="https://www.centurylink.com/aboutus/company-information/public-policy.html" target="_blank">Public Policy</a>
            </li>
            <li><a href="https://www.lumen.com/help/en-us/home.html" target="_blank">Support</a></li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts">Canadian Ombudsman</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/gender-pay-gap-report?Creativeid=b565bf28-6d55-4f86-a245-2f0eb40b91a3">Gender Pay Gap 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/es-ar/about/legal/latam-tariffs-regulatory.html">Legal (Latin America)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/de-legal-notices.html">Legal Notices (Germany)</a>
            </li>
            <li>
              <a href="https://assets.lumen.com/is/content/Lumen/modern-slavery-statement-1?Creativeid=5dbb9687-e4a8-4a40-ae00-673ce51d6a80">Modern Slavery Statement 2020 (UK)</a>
            </li>
            <li>
              <a href="https://www.lumen.com/en-us/about/legal/uk-tax-strategy.html">UK Tax Strategy</a>
            </li>
          </ul>
          <div class="chi-footer__copyright">&copy; 2024 Lumen Technologies. All Rights Reserved. Lumen is a registered trademark in the United States, EU and certain other countries.</div>
        </div>
      </div>
    </div>
  </div>
</footer>

<script>chi.dropdown(document.getElementById('language-dropdown-button'));</script>

Authenticated - Simple

Show the authenticated simple footer for all logged in views where social media links, language selection, and international legal notice links are not needed (e.g. Developer Center).

<footer class="chi-footer">
  <div class="chi-footer__content">
    <div class="chi-footer__internal">
      <div class="chi-footer__internal-content -mw--1200">
        <div class="chi-footer__links">
          <ul>
            <li><a href="https://www.colt.net/legal/code-of-business-conduct/" target="_blank">Colt Code of Business Conduct</a></li>
            <li><a href="https://www.colt.net/legal/#colt-group-of-companies" target="_blank">Colt Group of Companies</a></li>
            <li><a href="https://www.colt.net/support/" target="_blank">Help and Support</a></li>
            <li><a href="https://www.colt.net/legal/data-privacy/" target="_blank">Data Privacy Statement</a></li>
            <li><a href="https://www.colt.net/legal/terms-and-conditions/" target="_blank">Terms of Use</a></li>
          </ul>
          <div class="chi-footer__copyright">© 2024 Colt Technology Services Group Limited</div>
        </div>
      </div>
    </div>
  </div>
</footer>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon