App layout
Examples
To render application layout, use the tag chi-main.
Base#
Page content goes here
Use the
title="" attribute to display a title above the application layout.<chi-main title="Page Title">
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="base-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById('base-language-dropdown-button'));</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<div class="chi-main__title">
<div class="chi-main__title-heading">Page Title</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="base-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById('base-language-dropdown-button'));</script>Base with alert#
Page content goes here
Use the
title="" attribute to display a title above the application layout.<chi-main title="Page Title">
<chi-alert color="info" icon="circle-info" slot="page-alert" closable>This is a page level info alert</chi-alert>
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="alert-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById(alert-language-dropdown-button));</script><div class="chi-main">
<div class="chi-main__alert">
<div class="chi-alert -info -close" role="alert">
<i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
<div class="chi-alert__content">
<p class="chi-alert__text">This is a page level info alert</p>
</div>
<button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-main__header">
<div class="chi-main__header-start">
<div class="chi-main__title">
<div class="chi-main__title-heading">
Page Title
</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="alert-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById(alert-language-dropdown-button));</script>Base with help icon#
Page content goes here
<chi-main title="Page Title">
<chi-button id="example__help-button" type="icon" size="sm" variant="flat" alternative-text="Help" slot="help-icon">
<chi-icon icon="circle-question-outline"></chi-icon>
</chi-button>
<chi-popover id="example__help-popover" position="right-start" variant="text" arrow reference="#example__help-button" slot="help-icon">
Popover content.
</chi-popover>
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="help-icon-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>
chi.dropdown(document.getElementById('help-icon-language-dropdown-button'));
document.querySelector("#example__help-button")
.addEventListener("click", function() {
var popoverElem = document.querySelector("#example__help-popover");
popoverElem.toggle();
});
</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<div class="chi-main__title">
<div class="chi-main__title-heading">
Page Title
<div class="chi-button -icon -flat -sm" id="example__help-button" data-position="right-start" data-target="#example__help-popover" aria-label="Help" slot="help-icon">
<div class="chi-button__content">
<i class="chi-icon icon-circle-question-outline" aria-hidden="true"></i>
</div>
</div>
<section class="chi-popover chi-popover--right-start" id="example__help-popover" aria-modal="true" role="dialog">
<div class="chi-popover__content">
<p class="chi-popover__text">Popover content.</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="help-icon-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>
chi.dropdown(document.getElementById('help-icon-language-dropdown-button'));
chi.popover(document.getElementById('example__help-button'));
</script>Base with back link#
Page content goes here
Use the
backlink="" attribute to display a link above the title of the application layout.<chi-main backlink="Back link" title="Page Title">
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="back-link-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById('back-link-language-dropdown-button'));</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<a class="chi-link" href="#">
<div class="chi-link__content">
<i class="chi-icon icon-chevron-left -xs"></i>
<span class="-text--md">Back link</span>
</div>
</a>
<div class="chi-main__title">
<div class="chi-main__title-heading">Page Title</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="back-link-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById('back-link-language-dropdown-button'));</script>Base with back link and subtitle#
Page content goes here
Use the
subtitle="" attribute to display a subtitle next to the title of the application layout.<chi-main backlink="Back link" title="Page Title" subtitle="Page subtitle">
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="back-link-subtitle-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById('back-link-subtitle-language-dropdown-button'));</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<a class="chi-link" href="#">
<div class="chi-link__content">
<i class="chi-icon icon-chevron-left -xs" aria-hidden="true"></i>
<span class="-text--md">Back link</span>
</div>
</a>
<div class="chi-main__title">
<div class="chi-main__title-heading">Page Title</div>
<div class="chi-main__title-subheading">Page subtitle</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="back-link-subtitle-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById('back-link-subtitle-language-dropdown-button'));</script>Base with back link, subtitle and buttons#
Page content goes here
Add buttons in the header of the application layout by defining
slot="header-actions" on each chi-button.<chi-main backlink="Back link" title="Page Title" subtitle="Page subtitle">
<button class="chi-button -primary" slot="header-actions">Primary</button>
<!-- Page content goes here -->
<footer class="chi-footer" slot="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="back-link-subtitle-buttons-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById('back-link-subtitle-buttons-language-dropdown-button'));</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<a class="chi-link" href="#">
<div class="chi-link__content">
<i class="chi-icon icon-chevron-left -xs" aria-hidden="true"></i>
<span class="-text--md">Back link</span>
</div>
</a>
<div class="chi-main__title">
<div class="chi-main__title-heading">Page Title</div>
<div class="chi-main__title-subheading">Page subtitle</div>
</div>
</div>
<div class="chi-main__header-end">
<button class="chi-button -primary">Primary</button>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer" slot="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="back-link-subtitle-buttons-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById('back-link-subtitle-buttons-language-dropdown-button'));</script>Base with back link, subtitle, buttons and page-level actions#
Page content goes here
Add page-level actions at the bottom of the application layout by defining
slot="page-level__actions" on each chi-button.<chi-main backlink="Back link" title="Page Title" subtitle="Page subtitle">
<!-- Page content goes here -->
<button class="chi-button -primary -outline -bg--white" slot="page-level__actions">Cancel</button>
<button class="chi-button -primary -ml--1" slot="page-level__actions">Submit</button>
<footer class="chi-footer" slot="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="back-link-subtitle-buttons-page-level-actions-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>chi.dropdown(document.getElementById('back-link-subtitle-buttons-page-level-actions-language-dropdown-button'));</script><div class="chi-main">
<div class="chi-main__header">
<div class="chi-main__header-start">
<a class="chi-link" href="#">
<div class="chi-link__content">
<i class="chi-icon icon-chevron-left -xs" aria-hidden="true"></i>
<span class="-text--md">Back link</span>
</div>
</a>
<div class="chi-main__title">
<div class="chi-main__title-heading">Page Title</div>
<div class="chi-main__title-subheading">Page subtitle</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
<div class="-d--flex -align-items--center -justify-content--end -py--3 -my--2 -bt--1">
<button class="chi-button -primary -outline -bg--white">Cancel</button>
<button class="chi-button -primary -ml--1">Submit</button>
</div>
</div>
<footer class="chi-footer" slot="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="back-link-subtitle-buttons-page-level-actions-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>chi.dropdown(document.getElementById('back-link-subtitle-buttons-page-level-actions-language-dropdown-button'));</script>Dashboard with header background#
<chi-main title="Page Title" format="fixed-width" header-background>
<chi-button id="example__help-button" type="icon" size="sm" variant="flat" alternative-text="Help" slot="help-icon">
<chi-icon icon="circle-question-outline"></chi-icon>
</chi-button>
<chi-popover id="example__help-popover" position="right-start" variant="text" arrow reference="#example__help-button" slot="help-icon">
Popover content.
</chi-popover>
<chi-button color="primary" size="sm" slot="header-actions">Button</chi-button>
<div class="chi-css-grid -grid-rows--176">
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -highlight -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">
<ul class="chi-css-grid -gap--05 -no-style -m--0">
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
</ul>
</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
</div>
<footer class="chi-footer" slot="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="dashboard-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>
chi.dropdown(document.getElementById('dashboard-language-dropdown-button'));
document.querySelector("#example__help-button")
.addEventListener("click", function() {
var popoverElem = document.querySelector("#example__help-popover");
popoverElem.toggle();
});
</script><div class="chi-main -fixed-width -header-background">
<div class="chi-main__background">
<div class="chi-main__background-image">
</div>
</div>
<div class="chi-main__header">
<div class="chi-main__header-start">
<div class="chi-main__title">
<div class="chi-main__title-heading">
Page Title
<div class="chi-button -icon -flat -sm" id="example__help-button" data-position="right-start" data-target="#example__help-popover" aria-label="Help" slot="help-icon">
<div class="chi-button__content">
<i class="chi-icon icon-circle-question-outline" aria-hidden="true"></i>
</div>
</div>
<section class="chi-popover chi-popover--right-start" id="example__help-popover" aria-modal="true" role="dialog">
<div class="chi-popover__content">
<p class="chi-popover__text">Popover content.</p>
</div>
</section>
</div>
</div>
</div>
<div class="chi-main__header-end">
<button class="chi-button -primary -sm">Button</button>
</div>
</div>
<div class="chi-main__content">
<div class="chi-css-grid -grid-rows--176">
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -highlight -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">
<ul class="chi-css-grid -gap--05 -no-style -m--0">
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
</div>
</div>
<footer class="chi-footer" slot="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="dashboard-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>
chi.dropdown(document.getElementById('dashboard-language-dropdown-button'));
chi.popover(document.getElementById('example__help-button'));
</script>Dashboard with page-level alert#
<chi-main title="Page Title" format="fixed-width" header-background>
<chi-alert
color="info"
icon="circle-info"
slot="page-alert"
closable
>
This is a page level info alert
</chi-alert>
<chi-button id="example__help-button" type="icon" size="sm" variant="flat" alternative-text="Help" slot="help-icon">
<chi-icon icon="circle-question-outline"></chi-icon>
</chi-button>
<chi-popover id="example__help-popover" position="right-start" variant="text" arrow reference="#example__help-button" slot="help-icon">
Popover content.
</chi-popover>
<chi-button color="primary" size="sm" slot="header-actions">Button</chi-button>
<div class="chi-css-grid -grid-rows--176">
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -highlight -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">
<ul class="chi-css-grid -gap--05 -no-style -m--0">
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
<li class="chi-css-col -col-sm--6">
<chi-link href="#">Widget Link</chi-link>
</li>
</ul>
</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<chi-link size="md" href="#" cta="cta">View</chi-link>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
</div>
<footer class="chi-footer" slot="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="dashboard-alert-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</chi-main>
<script>
chi.dropdown(document.getElementById('dashboard-alert-language-dropdown-button'));
document.querySelector("#example__help-button")
.addEventListener("click", function() {
var popoverElem = document.querySelector("#example__help-popover");
popoverElem.toggle();
});
</script><div class="chi-main -fixed-width -header-background">
<div class="chi-main__background">
<div class="chi-main__background-image">
</div>
</div>
<div class="chi-main__alert">
<div class="chi-alert -info -close" role="alert">
<i class="chi-alert__icon chi-icon icon-circle-info" aria-hidden="true"></i>
<div class="chi-alert__content">
<p class="chi-alert__text">This is a page level info alert</p>
</div>
<button class="chi-alert__close-button chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-main__header">
<div class="chi-main__header-start">
<div class="chi-main__title">
<div class="chi-main__title-heading">
Page Title
<div class="chi-button -icon -flat -sm" id="example__help-button" data-position="right-start" data-target="#example__help-popover" aria-label="Help" slot="help-icon">
<div class="chi-button__content">
<i class="chi-icon icon-circle-question-outline" aria-hidden="true"></i>
</div>
</div>
<section class="chi-popover chi-popover--right-start" id="example__help-popover" aria-modal="true" role="dialog">
<div class="chi-popover__content">
<p class="chi-popover__text">Popover content.</p>
</div>
</section>
</div>
</div>
</div>
<div class="chi-main__header-end">
<button class="chi-button -primary -sm">Button</button>
</div>
</div>
<div class="chi-main__content">
<div class="chi-css-grid -grid-rows--176">
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -highlight -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">
<ul class="chi-css-grid -gap--05 -no-style -m--0">
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
<li class="chi-css-col -col-sm--6">
<a class="chi-link" href="#">Widget Link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4 -row--2">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
<div class="chi-css-col -col-lg--6 -col-xl--4">
<div class="chi-card -widget -h--100">
<div class="chi-card__header">
<div class="chi-card__title">Widget</div>
<a class="chi-link -md -cta" href="#">View</a>
</div>
<div class="chi-card__content">Content here</div>
</div>
</div>
</div>
</div>
<footer class="chi-footer" slot="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="dashboard-alert-language-dropdown-button"
data-position="top-start"
aria-label="Select your preferred language"
>
<div class="chi-button__content">
<i class="chi-flag-icon icon-us" aria-hidden="true"></i>
</div>
</a>
<div class="chi-dropdown__menu -w--sm -text--body">
<a class="chi-dropdown__menu-item -active" href="#">United States</a>
<a class="chi-dropdown__menu-item" href="#">Australia</a>
<a class="chi-dropdown__menu-item" href="#">Hong Kong</a>
<a class="chi-dropdown__menu-item" href="#">India</a>
<a class="chi-dropdown__menu-item" href="#">Japan</a>
<a class="chi-dropdown__menu-item" href="#">Singapore</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.lumen.com/en-us/about/accessibility.html">Accessibility</a>
</li>
<li>
<a href="https://www.centurylinkbusinessreferral.com/#!/home">Business Referral Program</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts.html" target="_blank">Canadian Ombudsman</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="#">Cookie Settings</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/governance/documentation.html" target="_blank">Governance</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal.html" target="_blank">Legal</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/legal/privacy-center.html">Privacy</a>
</li>
<li>
<a href="https://www.lumen.com/en-us/about/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>
</ul>
<div class="chi-footer__copyright">© 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>
</div>
<script>
chi.dropdown(document.getElementById('dashboard-alert-language-dropdown-button'));
chi.popover(document.getElementById('example__help-button'));
</script>Web Component
Properties
Events
Accessibility
Accessibility guidelines coming soon