Navigation
Main Navigation
Sub Navigation
<nav class="sub-navigation sub-navigation--uppercase">
<header>Section Title x.0</header>
<ul>
<li class="is-active"><a href=".">Active Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
<div class="break"></div>
Copied!
Breadcrumbs
<nav class="breadcrumbs">
<ul>
<li><a href=".">Home 0.0</a></li>
<li><a href=".">Landing Page x.0</a></li>
<li><a href=".">Sub-page x.x</a></li>
</ul>
</nav>
<div class="break"></div>
Copied!
Pagination
<nav class="pagination">
<ul>
<li><a href=".">Previous</a></li>
<li class="is-active"><a href=".">1</a></li>
<li><a href=".">2</a></li>
<li><a href=".">3</a></li>
<li>…</li>
<li><a href=".">36</a></li>
<li><a href=".">Next</a></li>
</ul>
</nav>
<div class="break"></div>
Copied!
Link List
<ul class="link-list">
<li>
<a href=".">
<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowbility-Home" transform="translate(-131.000000, -635.000000)" fill-rule="nonzero" fill="currentColor">
<g id="Service-Links" transform="translate(131.000000, 400.000000)">
<g id="Buttets" transform="translate(0.000000, 102.000000)">
<path d="M10.9227985,144.201507 L2.56492941,152.559376 C1.97743137,153.146875 1.02812156,153.146875 0.440623526,152.559376 C-0.146874509,151.971878 -0.146874509,151.022569 0.440623526,150.435071 L7.87569412,143 L0.440623526,135.564929 C-0.146874509,134.977431 -0.146874509,134.028122 0.440623526,133.440624 C1.02812156,132.853125 1.97743137,132.853125 2.56492941,133.440624 L10.9227985,141.798493 C11.5866441,142.462338 11.5866441,143.537789 10.9227985,144.201592 L10.9227985,144.201507 Z" id="Shape-Copy-3"></path>
</g>
</g>
</g>
</g>
</svg>
<span>Related Link Item 1</span>
</a>
</li>
<li>
<a href=".">
<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowbility-Home" transform="translate(-131.000000, -635.000000)" fill-rule="nonzero" fill="currentColor">
<g id="Service-Links" transform="translate(131.000000, 400.000000)">
<g id="Buttets" transform="translate(0.000000, 102.000000)">
<path d="M10.9227985,144.201507 L2.56492941,152.559376 C1.97743137,153.146875 1.02812156,153.146875 0.440623526,152.559376 C-0.146874509,151.971878 -0.146874509,151.022569 0.440623526,150.435071 L7.87569412,143 L0.440623526,135.564929 C-0.146874509,134.977431 -0.146874509,134.028122 0.440623526,133.440624 C1.02812156,132.853125 1.97743137,132.853125 2.56492941,133.440624 L10.9227985,141.798493 C11.5866441,142.462338 11.5866441,143.537789 10.9227985,144.201592 L10.9227985,144.201507 Z" id="Shape-Copy-3"></path>
</g>
</g>
</g>
</g>
</svg>
<span>Related Link Item 2</span>
</a>
</li>
<li>
<a href=".">
<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowbility-Home" transform="translate(-131.000000, -635.000000)" fill-rule="nonzero" fill="currentColor">
<g id="Service-Links" transform="translate(131.000000, 400.000000)">
<g id="Buttets" transform="translate(0.000000, 102.000000)">
<path d="M10.9227985,144.201507 L2.56492941,152.559376 C1.97743137,153.146875 1.02812156,153.146875 0.440623526,152.559376 C-0.146874509,151.971878 -0.146874509,151.022569 0.440623526,150.435071 L7.87569412,143 L0.440623526,135.564929 C-0.146874509,134.977431 -0.146874509,134.028122 0.440623526,133.440624 C1.02812156,132.853125 1.97743137,132.853125 2.56492941,133.440624 L10.9227985,141.798493 C11.5866441,142.462338 11.5866441,143.537789 10.9227985,144.201592 L10.9227985,144.201507 Z" id="Shape-Copy-3"></path>
</g>
</g>
</g>
</g>
</svg>
<span>Related Link Item 3</span>
</a>
</li>
<li>
<a href=".">
<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Knowbility-Home" transform="translate(-131.000000, -635.000000)" fill-rule="nonzero" fill="currentColor">
<g id="Service-Links" transform="translate(131.000000, 400.000000)">
<g id="Buttets" transform="translate(0.000000, 102.000000)">
<path d="M10.9227985,144.201507 L2.56492941,152.559376 C1.97743137,153.146875 1.02812156,153.146875 0.440623526,152.559376 C-0.146874509,151.971878 -0.146874509,151.022569 0.440623526,150.435071 L7.87569412,143 L0.440623526,135.564929 C-0.146874509,134.977431 -0.146874509,134.028122 0.440623526,133.440624 C1.02812156,132.853125 1.97743137,132.853125 2.56492941,133.440624 L10.9227985,141.798493 C11.5866441,142.462338 11.5866441,143.537789 10.9227985,144.201592 L10.9227985,144.201507 Z" id="Shape-Copy-3"></path>
</g>
</g>
</g>
</g>
</svg>
<span>Related Link Item 4</span>
</a>
</li>
</ul>
Copied!
Footer Menus
<footer class="footer-menus">
<div class="flex-row">
<div class="column">
<nav class="sub-navigation sub-navigation--header-inverted sub-navigation--info">
<header>Info Title x.0</header>
<ul>
<li>Info x.1</li>
<li>Info x.2</li>
</ul>
</nav>
</div>
<div class="column">
<nav class="sub-navigation sub-navigation--header-inverted">
<header>Section Title x.0</header>
<ul>
<li><a href=".">Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
<nav class="sub-navigation sub-navigation--header-inverted">
<header>Section Title x.0</header>
<ul>
<li><a href=".">Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
<nav class="sub-navigation sub-navigation--header-inverted">
<header>Section Title x.0</header>
<ul>
<li><a href=".">Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
<nav class="sub-navigation sub-navigation--header-inverted">
<header>Section Title x.0</header>
<ul>
<li><a href=".">Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
<nav class="sub-navigation sub-navigation--header-inverted">
<header>Section Title x.0</header>
<ul>
<li><a href=".">Sub-page x.1</a></li>
<li><a href=".">Sub-page x.2</a></li>
<li><a href=".">Sub-page x.3</a></li>
<li><a href=".">Sub-page x.4</a></li>
<li><a href=".">Sub-page x.5</a></li>
</ul>
</nav>
</div>
</div>
<ul class="inline-info">
<li>© 1999–2017 Knowbility 501(c)(3)</li>
<li>All rights reserved</li>
<li><a href=".">Privacy Policy</a></li>
</ul>
</footer>
Copied!