19 examples Layout Examples
These examples are intended to show large layout patterns and collections of components.
Source:
../kitsune/sumo/static/sumo/scss/examples/_examples.scss, line 3
19.1 examples.home Homepage
This is an example homepage design, complied to display several components working together.
Examples
Default styling
Search Support
Popular Searches: Mozilla accounts Log In Item Item
Get Help
Pick your product
Firefox
Web browser for Windows, Mac and Linux
Firefox for Android
Web browser for Android smartphones and tablets
Featured Articles & Threads
Private Browsing Use Firefox without saving history
Firefox Private Browsing is great for viewing website without saving things like cookies, but did you know there is more you can do? This text should be longer than needed, and will be truncated with CSS. Truncating at 40 words should be sufficient.
Private Browsing Use Firefox without saving history
Firefox Private Browsing is great for viewing website without saving things like cookies, but did you know there is more you can do? This text should be longer than needed, and will be truncated with CSS. Truncating at 40 words should be sufficient.
Private Browsing Use Firefox without saving history
Firefox Private Browsing is great for viewing website without saving things like cookies, but did you know there is more you can do? This text should be longer than needed, and will be truncated with CSS. Truncating at 40 words should be sufficient.
Private Browsing Use Firefox without saving history
Firefox Private Browsing is great for viewing website without saving things like cookies, but did you know there is more you can do? This text should be longer than needed, and will be truncated with CSS. Truncating at 40 words should be sufficient.
Join Our Community
Grow and share your expertise with others. Answer questions and improve our knowledge base.
Markup: ../../../../../styleguide/styleguide-examples/example-home.njk
<header class="mzp-c-navigation sumo-nav ">
<div class="mzp-c-navigation-l-content">
<div class="sumo-nav--container">
<div class="sumo-nav--logo">
<a href="/"><img src="static/mozilla-support.4be004d0bbcbfb1e.svg" alt="Mozilla Support Logo"/></a>
</div>
<button data-sumo-toggle-nav="#search-navigation" class="sumo-nav--search-button" type="button" aria-controls="search-navigation">Search</button>
<button data-sumo-toggle-nav="#main-navigation" class="sumo-nav--toggle-button" type="button" aria-controls="main-navigation">Menu</button>
<a class="sumo-nav--avatar-button" data-sumo-toggle-nav="#profile-navigation" aria-controls="profile-navigation" aria-role="button">
<img class="avatar" src="https://secure.gravatar.com/avatar/00000000000000000000000000000000?s=200" alt="Avatar for Username">
</a>
<div class="mzp-c-navigation-items sumo-nav--list-wrap" id="main-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<ul class="mzp-c-menu-category-list sumo-nav--list">
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="mzp-c-menu-title sumo-nav--link" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-help" aria-expanded="false">Get Help</a>
<div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-help">
<div class="sumo-nav--dropdown-container">
<div class="sumo-nav--dropdown-grid">
<button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-example">Close Firefox menu</button>
<div class="sumo-nav--dropdown-col">
<section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
<a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
<svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3H4a2 2 0 00-2 2v12a2 2 0 002 2h9l2 4 2-4h2a2 2 0 002-2v-6"></path><path d="M17.5 2.5a2.121 2.121 0 013 3L13 13l-4 1 1-4 7.5-7.5z"></path></g></svg>
<h4 class="mzp-c-menu-item-title">Ask the Community</h4>
<p class="mzp-c-menu-item-desc">
Create a thread and find answers in any of our product support forums.
</p>
</a>
<ul class="mzp-c-menu-item-list sumo-nav--sublist">
<li><a href="#">Firefox desktop</a></li>
<li><a href="#">Firefox Private Network</a></li>
<li><a href="#">Firefox for iOS</a></li>
<li><a href="#">Firefox Lockwise</a></li>
<li><a href="#">Firefox for Android</a></li>
<li><a href="#">See All Products</a></li>
</ul>
</section>
</div>
<div class="sumo-nav--dropdown-col">
<section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
<a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
<svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3 3)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"><rect stroke-linejoin="round" width="18" height="18" rx="2"></rect><path d="M4 5h10M4 9h10M4 13h4"></path></g></svg>
<h4 class="mzp-c-menu-item-title">Explore Our Help Articles</h4>
<p class="mzp-c-menu-item-desc">
Dig into the knowledge base, tips and tricks, troubleshooting, and so much more
</p>
</a>
<ul class="mzp-c-menu-item-list sumo-nav--sublist">
<li><a href="#">Firefox desktop</a></li>
<li><a href="#">Firefox Private Network</a></li>
<li><a href="#">Firefox for iOS</a></li>
<li><a href="#">Firefox Lockwise</a></li>
<li><a href="#">Firefox for Android</a></li>
<li><a href="#">See All Products</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
</li>
<li class="mzp-c-menu-category">
<a class="mzp-c-menu-title sumo-nav--link" href="https://www.mozilla.org/">Volunteer</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="mzp-c-navigation-items sumo-nav--list-wrap-right" id="profile-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<ul class="mzp-c-menu-category-list sumo-nav--list">
<li class="mzp-c-menu-category sumo-nav--item-right">
<form data-instant-search="form" id="support-search" action="/en-US/search" method="get" class="simple-search-form">
<input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="Find help..." class="searchbox" id="search-q">
<button type="submit" title="Search" class="search-button">Search</button>
</form>
</li>
<li class="mzp-c-menu-category sumo-nav--item-right sumo-nav--item-lang">
<a class="mzp-c-menu-title sumo-nav--link sumo-nav--lang-link" href="">EN</a>
</li>
<li class="mzp-c-menu-category ">
<a class="mzp-c-menu-title sumo-nav--link has-avatar" href="#">
Username
<img class="avatar" src="https://firefoxusercontent.com/00000000000000000000000000000000" alt="Avatar for Username">
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="mzp-c-navigation-items sumo-nav--mobile-search-form" id="search-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<form data-instant-search="form" id="mobile-search-results" action="/en-US/search" method="get" class="simple-search-form">
<input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="Find help..." class="searchbox" id="search-q">
<button type="submit" title="Search" class="search-button">Search</button>
</form>
</nav>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="sumo-page-section shade-bg text-center">
<div class="mzp-l-content narrow">
<h1 class="sumo-page-heading-xl">Search Support</h1>
<form data-instant-search="form" id="support-search-home" action="/en-US/search" method="get" class="simple-search-form">
<input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="Find help..." class="searchbox" id="search-q">
<button type="submit" title="Search" class="search-button">Search</button>
</form>
<p class="popular-searches">
<span>Popular Searches:</span>
<a href="#TODO">Mozilla accounts</a>
<a href="#TODO">Log In</a>
<a href="#TODO">Item</a>
<a href="#TODO">Item</a>
</p>
</div>
</section>
<section class="mzp-l-content sumo-page-section">
<div class="text-center">
<h2 class="sumo-page-subheading">Get Help</h2>
<p>Pick your product</p>
</div>
<div class="sumo-card-grid">
<div class="scroll-wrap">
<div class="card card--product">
<img class="card--icon" src="static/product_placeholder.a4907146f1d63453.png" alt="Firefox">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="/en-US/products/firefox">
Firefox
</a>
</h3>
<p class="card--desc">Web browser for Windows, Mac and Linux</p>
</div>
</div>
<div class="card card--product">
<img class="card--icon" src="static/product_placeholder.a4907146f1d63453.png" alt="Firefox for Android">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="/en-US/products/mobile">
Firefox for Android
</a>
</h3>
<p class="card--desc">Web browser for Android smartphones and tablets</p>
</div>
</div>
</div>
</div>
</section>
<section class="mzp-l-content sumo-page-section">
<div class="text-center">
<h2 class="sumo-page-subheading">Featured Articles & Threads</h2>
</div>
<div class="sumo-card-grid is-four-wide">
<div class="scroll-wrap">
<div class="card card--article">
<img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO">
Private Browsing Use Firefox without saving history
</a>
</h3>
<p class="card--desc">
Firefox Private Browsing is great for viewing website without saving
things like cookies, but did you know there is more you can do? This
text should be longer than needed, and will be truncated with CSS.
Truncating at 40 words should be sufficient.
</p>
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO">
Private Browsing Use Firefox without saving history
</a>
</h3>
<p class="card--desc">
Firefox Private Browsing is great for viewing website without saving
things like cookies, but did you know there is more you can do? This
text should be longer than needed, and will be truncated with CSS.
Truncating at 40 words should be sufficient.
</p>
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/reader-mode.8280caa0e03387df.svg" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO">
Private Browsing Use Firefox without saving history
</a>
</h3>
<p class="card--desc">
Firefox Private Browsing is great for viewing website without saving
things like cookies, but did you know there is more you can do? This
text should be longer than needed, and will be truncated with CSS.
Truncating at 40 words should be sufficient.
</p>
</div>
</div>
<div class="card card--article">
<img class="card--icon-sm" src="static/blog.9821fd5d89ada267.svg" alt="todo: title">
<div class="card--details">
<h3 class="card--title">
<a class="expand-this-link" href="#TODO">
Private Browsing Use Firefox without saving history
</a>
</h3>
<p class="card--desc">
Firefox Private Browsing is great for viewing website without saving
things like cookies, but did you know there is more you can do? This
text should be longer than needed, and will be truncated with CSS.
Truncating at 40 words should be sufficient.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="mzp-l-content sumo-page-section">
<div class="card card--callout">
<img class="card--feature-img" src="static/Mozilla_illustration_placholder2x.b9ee632f832d147d.png" alt="Illustration of hands">
<div class="card--details">
<h3 class="card--title">Join Our Community</h3>
<p class="card--desc">Grow and share your expertise with others. Answer questions and improve our knowledge base.</p>
<p class="card--desc"><strong><a href="/en-US/contribute">Learn More</a></strong></p>
</div>
</div>
</section>
</main>
<footer class="mzp-c-footer">
<div class="mzp-l-content">
<nav class="mzp-c-footer-primary">
<div class="mzp-c-footer-cols">
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Mozilla</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/en-US/about/legal/fraud-report/">Report Trademark Abuse</a></li>
<li><a href="https://github.com/mozilla/kitsune/">Source code</a></li>
<li><a href="https://twitter.com/firefox">Twitter</a></li>
<li><a href="/contribute">Join the Community</a></li>
<li><a href="#TODO">Explore Help Articles</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Firefox</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Download</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Android Browser</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">iOS Browser</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Focus Browser</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Firefox for Developers</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/en-US/firefox/developer/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Developer Edition</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Beta</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/android/#beta?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Beta for Android</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Nightly</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/android/#nightly?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Nightly for Android</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Mozilla accounts</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://support.mozilla.org/en-US/fxa/authenticate/">Sign Up (TODO)</a></li>
<li><a href="https://support.mozilla.org/en-US/fxa/authenticate/">Sign In</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/accounts/">Benefits</a></li>
</ul>
</section>
<section class="mzp-c-footer-col lang-col">
<form class="mzp-c-language-switcher" method="get" action="#">
<a class="mzp-c-language-switcher-link" href="https://www.mozilla.org/locales/">Language</a>
<label for="mzp-c-language-switcher-select">Language</label>
<select id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select"
name="lang">
<option value="en-US">English (US)</option>
<option value="de">Deutsch</option>
<option value="fr">Français</option>
<option value="es-ES">Español</option>
<option value="ja">日本語</option>
</select>
<!-- form submit button is shown when JavaScript is not enabled -->
<button type="submit">Go</button>
</form>
<ul class="mzp-c-footer-links-social">
<li><a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a></li>
<li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li>
<li><a class="instagram" href="https://www.instagram.com/firefox">Instagram<span> (firefox)</span></a></li>
</ul>
</section>
</div>
</nav>
<nav class="mzp-c-footer-secondary">
<div class="mzp-c-footer-link-col">
<div class="mzp-c-footer-primary-logo"><a href="https://www.mozilla.org/">Mozilla</a></div>
<div class="mzp-c-footer-legal">
<ul>
<li><a href="https://www.mozilla.org/">mozilla.org</a></li>
<li><a href="https://www.mozilla.org/about/legal/terms/mozilla/">Terms of Service</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/">Privacy</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
<li><a href="https://www.mozilla.org/en-US/contact/">Contact</a></li>
</ul>
</div>
</div>
<div class="mzp-c-footer-legal-col">
<p>
Visit <a href="https://www.mozilla.org" rel="external noopener" data-link-type="footer" data-link-name="Mozilla Corporation">Mozilla Corporation’s</a>
not-for-profit parent, the <a href="https://foundation.mozilla.org" rel="external noopener" data-link-type="footer" data-link-name="Mozilla Foundation">Mozilla Foundation</a>.
</p>
<p>
Portions of this content are © 1998–2020 by individual mozilla.org contributors. Content available under a
<a rel="external noopener" href="https://www.mozilla.org/foundation/licensing/website-content/">Creative Commons license</a>.
</p>
</div>
</nav>
</div>
</footer>
Source:
../kitsune/sumo/static/sumo/scss/examples/_examples.scss, line 14
19.2 examples.two-col Two-column example page (Profile)
This is an example of a two-column page layout with a collapsable sidebar. This example uses the profile page content, but is used throughout the system
Examples
Default styling
Account
kasey.kelly@gmail.com
You can change your email address on Mozilla accounts. Need help?
user.name
Markup: ../../../../../styleguide/styleguide-examples/example-two-col.njk
<header class="mzp-c-navigation sumo-nav ">
<div class="mzp-c-navigation-l-content">
<div class="sumo-nav--container">
<div class="sumo-nav--logo">
<a href="/"><img src="static/mozilla-support.4be004d0bbcbfb1e.svg" alt="Mozilla Support Logo"/></a>
</div>
<button data-sumo-toggle-nav="#search-navigation" class="sumo-nav--search-button" type="button" aria-controls="search-navigation">Search</button>
<button data-sumo-toggle-nav="#main-navigation" class="sumo-nav--toggle-button" type="button" aria-controls="main-navigation">Menu</button>
<a class="sumo-nav--avatar-button" data-sumo-toggle-nav="#profile-navigation" aria-controls="profile-navigation" aria-role="button">
<img class="avatar" src="https://secure.gravatar.com/avatar/00000000000000000000000000000000?s=200" alt="Avatar for Username">
</a>
<div class="mzp-c-navigation-items sumo-nav--list-wrap" id="main-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<ul class="mzp-c-menu-category-list sumo-nav--list">
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="mzp-c-menu-title sumo-nav--link" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-help" aria-expanded="false">Get Help</a>
<div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-help">
<div class="sumo-nav--dropdown-container">
<div class="sumo-nav--dropdown-grid">
<button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-example">Close Firefox menu</button>
<div class="sumo-nav--dropdown-col">
<section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
<a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
<svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3H4a2 2 0 00-2 2v12a2 2 0 002 2h9l2 4 2-4h2a2 2 0 002-2v-6"></path><path d="M17.5 2.5a2.121 2.121 0 013 3L13 13l-4 1 1-4 7.5-7.5z"></path></g></svg>
<h4 class="mzp-c-menu-item-title">Ask the Community</h4>
<p class="mzp-c-menu-item-desc">
Create a thread and find answers in any of our product support forums.
</p>
</a>
<ul class="mzp-c-menu-item-list sumo-nav--sublist">
<li><a href="#">Firefox desktop</a></li>
<li><a href="#">Firefox Private Network</a></li>
<li><a href="#">Firefox for iOS</a></li>
<li><a href="#">Firefox Lockwise</a></li>
<li><a href="#">Firefox for Android</a></li>
<li><a href="#">See All Products</a></li>
</ul>
</section>
</div>
<div class="sumo-nav--dropdown-col">
<section class="mzp-c-menu-item mzp-has-icon sumo-nav--dropdown-item">
<a class="mzp-c-menu-item-link" href="https://voice.mozilla.org/">
<svg class="mzp-c-menu-item-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3 3)" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"><rect stroke-linejoin="round" width="18" height="18" rx="2"></rect><path d="M4 5h10M4 9h10M4 13h4"></path></g></svg>
<h4 class="mzp-c-menu-item-title">Explore Our Help Articles</h4>
<p class="mzp-c-menu-item-desc">
Dig into the knowledge base, tips and tricks, troubleshooting, and so much more
</p>
</a>
<ul class="mzp-c-menu-item-list sumo-nav--sublist">
<li><a href="#">Firefox desktop</a></li>
<li><a href="#">Firefox Private Network</a></li>
<li><a href="#">Firefox for iOS</a></li>
<li><a href="#">Firefox Lockwise</a></li>
<li><a href="#">Firefox for Android</a></li>
<li><a href="#">See All Products</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
</li>
<li class="mzp-c-menu-category">
<a class="mzp-c-menu-title sumo-nav--link" href="https://www.mozilla.org/">Volunteer</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="mzp-c-navigation-items sumo-nav--list-wrap-right" id="profile-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<ul class="mzp-c-menu-category-list sumo-nav--list">
<li class="mzp-c-menu-category sumo-nav--item-right">
<form data-instant-search="form" id="support-search" action="/en-US/search" method="get" class="simple-search-form">
<input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="Find help..." class="searchbox" id="search-q">
<button type="submit" title="Search" class="search-button">Search</button>
</form>
</li>
<li class="mzp-c-menu-category sumo-nav--item-right sumo-nav--item-lang">
<a class="mzp-c-menu-title sumo-nav--link sumo-nav--lang-link" href="">EN</a>
</li>
<li class="mzp-c-menu-category ">
<a class="mzp-c-menu-title sumo-nav--link has-avatar" href="#">
Username
<img class="avatar" src="https://firefoxusercontent.com/00000000000000000000000000000000" alt="Avatar for Username">
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="mzp-c-navigation-items sumo-nav--mobile-search-form" id="search-navigation" aria-expanded="false">
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu mzp-is-enhanced">
<form data-instant-search="form" id="mobile-search-results" action="/en-US/search" method="get" class="simple-search-form">
<input type="search" autocomplete="off" name="q" required="required" aria-required="true" placeholder="Find help..." class="searchbox" id="search-q">
<button type="submit" title="Search" class="search-button">Search</button>
</form>
</nav>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="sumo-page-section mzp-l-content">
<div class="sumo-l-two-col">
<aside class="sumo-l-two-col--sidebar">
<nav class="sidebar-nav">
<span class="details-heading">My Profile</span>
<ul id="user-nav" class="sidebar-nav--list">
<li class="sidebar-nav--item"><a href="/en-US/user/#TODO" class="sidebar-nav--link is-active">My profile</a></li>
<li class="sidebar-nav--item"><a class="sidebar-nav--link" href="/en-US/users/edit">Edit my profile</a></li>
<li class="sidebar-nav--item"><a class="sidebar-nav--link" href="/en-US/users/settings">Edit settings</a></li>
<li class="sidebar-nav--item"><a class="sidebar-nav--link" href="/en-US/users/watches">Manage watch list</a></li>
</ul>
</nav>
</aside>
<article id="profile" class="sumo-l-two-col--main">
<h1 class="text-display-lg">Account</h1>
<p class="mb-0"><strong>kasey.kelly@gmail.com</strong></p>
<p class="helptext">
You can change your email address on Mozilla accounts.
<a href="https://support.mozilla.org/en-US/kb/change-primary-email-address-firefox-accounts">Need help?</a>
</p>
<hr class="section-break">
<h1 class="text-display-lg">user.name</h1>
<h2 class="location"></h2>
<section class="avatar-group">
<figure class="avatar-group--figure">
<img class="avatar" src="https://stable.dev.lcip.org/profile/a/00000000000000000000000000000000" alt="">
</figure>
<div class="avatar-group--details">
</div>
</section>
<div class="pm-or-signout sumo-button-wrap extra-pad-top">
<form id="sign-out" action="/en-US/users/logout" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="kL2USfYkjqh8leyyoA9oOTx7koGX4VRUlCi20iIHaARUFAgRrCAO6jzoZ4qwvoEL">
</form>
<a class="sumo-button primary-button button-lg" data-type="submit" data-form="sign-out" href="#sign-out" data-event-label="Sign Out">
Sign Out
</a>
</div>
</article>
</div>
</div>
</main>
<footer class="mzp-c-footer">
<div class="mzp-l-content">
<nav class="mzp-c-footer-primary">
<div class="mzp-c-footer-cols">
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Mozilla</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/en-US/about/legal/fraud-report/">Report Trademark Abuse</a></li>
<li><a href="https://github.com/mozilla/kitsune/">Source code</a></li>
<li><a href="https://twitter.com/firefox">Twitter</a></li>
<li><a href="/contribute">Join the Community</a></li>
<li><a href="#TODO">Explore Help Articles</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Firefox</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Download</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Android Browser</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">iOS Browser</a></li>
<li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Focus Browser</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Firefox for Developers</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://www.mozilla.org/en-US/firefox/developer/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Developer Edition</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Beta</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/android/#beta?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Beta for Android</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Nightly</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/channel/android/#nightly?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">Nightly for Android</a></li>
</ul>
</section>
<section class="mzp-c-footer-col">
<h5 class="mzp-c-footer-heading">Mozilla accounts</h5>
<ul class="mzp-c-footer-list">
<li><a href="https://support.mozilla.org/en-US/fxa/authenticate/">Sign Up (TODO)</a></li>
<li><a href="https://support.mozilla.org/en-US/fxa/authenticate/">Sign In</a></li>
<li><a href="https://www.mozilla.org/en-US/firefox/accounts/">Benefits</a></li>
</ul>
</section>
<section class="mzp-c-footer-col lang-col">
<form class="mzp-c-language-switcher" method="get" action="#">
<a class="mzp-c-language-switcher-link" href="https://www.mozilla.org/locales/">Language</a>
<label for="mzp-c-language-switcher-select">Language</label>
<select id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select"
name="lang">
<option value="en-US">English (US)</option>
<option value="de">Deutsch</option>
<option value="fr">Français</option>
<option value="es-ES">Español</option>
<option value="ja">日本語</option>
</select>
<!-- form submit button is shown when JavaScript is not enabled -->
<button type="submit">Go</button>
</form>
<ul class="mzp-c-footer-links-social">
<li><a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a></li>
<li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li>
<li><a class="instagram" href="https://www.instagram.com/firefox">Instagram<span> (firefox)</span></a></li>
</ul>
</section>
</div>
</nav>
<nav class="mzp-c-footer-secondary">
<div class="mzp-c-footer-link-col">
<div class="mzp-c-footer-primary-logo"><a href="https://www.mozilla.org/">Mozilla</a></div>
<div class="mzp-c-footer-legal">
<ul>
<li><a href="https://www.mozilla.org/">mozilla.org</a></li>
<li><a href="https://www.mozilla.org/about/legal/terms/mozilla/">Terms of Service</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/">Privacy</a></li>
<li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
<li><a href="https://www.mozilla.org/en-US/contact/">Contact</a></li>
</ul>
</div>
</div>
<div class="mzp-c-footer-legal-col">
<p>
Visit <a href="https://www.mozilla.org" rel="external noopener" data-link-type="footer" data-link-name="Mozilla Corporation">Mozilla Corporation’s</a>
not-for-profit parent, the <a href="https://foundation.mozilla.org" rel="external noopener" data-link-type="footer" data-link-name="Mozilla Foundation">Mozilla Foundation</a>.
</p>
<p>
Portions of this content are © 1998–2020 by individual mozilla.org contributors. Content available under a
<a rel="external noopener" href="https://www.mozilla.org/foundation/licensing/website-content/">Creative Commons license</a>.
</p>
</div>
</nav>
</div>
</footer>
Source:
../kitsune/sumo/static/sumo/scss/examples/_examples.scss, line 27