App layout
Examples
To render application layout, use the tag chi-main
.
Base
App content goes here
Use the
title=""
attribute to display a title above the application layout.<chi-main title="App title">
<!-- App content goes here -->
<footer class="chi-footer" slot="footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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="-text--h3 -text--boldest -text--navy -m--0 -pr--2">App title</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- App content goes here -->
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
<div class="chi-button__content">
<i class="chi-icon icon-globe-network"></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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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
App content goes here
Use the
backlink=""
attribute to display a link above the title of the application layout.<chi-main backlink="Back link" title="App title">
<!-- App content goes here -->
<footer class="chi-footer" slot="footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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="-text--h3 -text--boldest -text--navy -m--0 -pr--2">App title</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- App content goes here -->
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
<div class="chi-button__content">
<i class="chi-icon icon-globe-network"></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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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
App 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="App title" subtitle="App subtitle">
<!-- App content goes here -->
<footer class="chi-footer" slot="footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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="-text--h3 -text--boldest -text--navy -m--0 -br--1 -pr--2">App title</div>
<div class="-text--md -pl--2">App subtitle</div>
</div>
</div>
</div>
<div class="chi-main__content">
<!-- App content goes here -->
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
<div class="chi-button__content">
<i class="chi-icon icon-globe-network"></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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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
App 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="App title" subtitle="App subtitle">
<button class="chi-button -primary -lg -uppercase -px--4" slot="header-actions">Primary</button>
<button class="chi-button -primary -outline -lg -bg--white -uppercase -px--4 -ml--1" slot="header-actions">Secondary</button>
<!-- App content goes here -->
<footer class="chi-footer" slot="footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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 title</span>
</div>
</a>
<div class="chi-main__title">
<div class="-text--h3 -text--boldest -text--navy -m--0 -br--1 -pr--2">App title</div>
<div class="-text--md -pl--2">App subtitle</div>
</div>
</div>
<div class="chi-main__header-end">
<button class="chi-button -primary -lg -uppercase -px--4">Primary</button>
<button class="chi-button -primary -outline -lg -bg--white -uppercase -px--4 -ml--1">Secondary</button>
</div>
</div>
<div class="chi-main__content">
<!-- App content goes here -->
</div>
<footer class="chi-footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
<div class="chi-button__content">
<i class="chi-icon icon-globe-network"></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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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
App 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="App title" subtitle="App subtitle">
<button class="chi-button -primary -lg -uppercase -px--4" slot="header-actions">Primary</button>
<button class="chi-button -primary -outline -lg -bg--white -uppercase -px--4 -ml--1" slot="header-actions">Secondary</button>
<!-- App content goes here -->
<button class="chi-button -primary -outline -lg -uppercase -px--4 -bg--white" slot="page-level__actions">Cancel</button>
<button class="chi-button -primary -lg -uppercase -px--4 -ml--1" slot="page-level__actions">Submit</button>
<footer class="chi-footer" slot="footer">
<div class="chi-footer__content">
<div class="chi-footer__internal">
<div class="chi-footer__internal-content -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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 title</span>
</div>
</a>
<div class="chi-main__title">
<div class="-text--h3 -text--boldest -text--navy -m--0 -br--1 -pr--2">App title</div>
<div class="-text--md -pl--2">App subtitle</div>
</div>
</div>
<div class="chi-main__header-end">
<button class="chi-button -primary -lg -uppercase -px--4">Primary</button>
<button class="chi-button -primary -outline -lg -bg--white -uppercase -px--4 -ml--1">Secondary</button>
</div>
</div>
<div class="chi-main__content">
<!-- App 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 -lg -uppercase -px--4 -bg--white">Cancel</button>
<button class="chi-button -primary -lg -uppercase -px--4 -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 -mw--1200">
<div class="chi-dropdown chi-footer__language">
<a class="chi-button -icon -flat -light -sm chi-dropdown__trigger" id="language-dropdown-button" data-position="top-start" aria-label="Select your preferred language">
<div class="chi-button__content">
<i class="chi-icon icon-globe-network"></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.centurylink.com/is/content/centurylink/UK-Gender-Pay-Gap-Report-2018?Creativeid=621ee105-c759-4597-b947-de420d1e731c" target="_blank">Gender Pay Gap 2018 (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.centurylink.com/is/content/centurylink/Modern-Slavery-Statement-2019?Creativeid=fe9a3e89-5681-4142-95fa-5785b3cef63f" target="_blank">Modern Slavery Statement 2019 (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>