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">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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" 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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('language-dropdown-button'));</script>
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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script>chi.dropdown(document.getElementById('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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<script>
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-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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script>
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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<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>
</div>
</div>
<div class="chi-main__content">
<!-- Page content goes here -->
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
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 -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">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</chi-main>
<div class="chi-main -fixed-width -header-background">
<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 -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>
<div class="chi-main__background">
<div class="chi-main__background-image">
</div>
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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">© 2022 CenturyLink. All Rights Reserved. Third party marks are the property of their respective owners.</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script>
chi.popover(document.getElementById('example__help-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">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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__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-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>
<div class="chi-main__background">
<div class="chi-main__background-image">
</div>
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('language-dropdown-button'));
chi.popover(document.getElementById('example__help-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 size="xs" slot="header-actions">
<chi-icon icon="settings"></chi-icon>
<span>Customize</span>
</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">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('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 -xs">
<div class="chi-button__content">
<i class="chi-icon icon-settings"></i>
<span>Customize</span>
</div>
</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">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content">
<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"></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 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.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/en-us/about/legal/commission-for-complaints-for-telecom-television-services-ccts" target="_blank">Support</a>
</li>
<li>
<a href="https://www.lumen.com/help/en-us/home.html">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.centurylink.com/aboutus/legal/latam/tariffs-and-regulatory-information.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">© 2021 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('language-dropdown-button'));
chi.popover(document.getElementById('example__help-button'));
</script>
Web Component
Properties
Events
Accessibility
Accessibility guidelines coming soon