Navigation
Affix
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.
<div class="grid affix-container">
<div class="column-3">
<div class="affix" data-affix>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ducimus voluptates veniam a. Suscipit esse eaque nemo ratione voluptatibus amet maxime ipsam voluptas, reiciendis veniam, asperiores pariatur, dolorem at repellendus?
</div>
</div>
<div class="column-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto quisquam tempore saepe accusantium sunt sit commodi dolores molestias officiis porro, ab blanditiis asperiores cumque. Sed dicta in voluptas id.</p>
</div>
</div>
Breadcrumbs
<div class="breadcrumbs">
<a class="breadcrubs__link" href="#link">Home</a>
<a class="breadcrubs__link" href="#link">Lorem</a>
<span>Ipsum dolir asmit emet</span>
</div>
Nav bar
<header id="nav-bar" class="nav-bar">
<div class="nav-bar__container">
<a class="logo" href="/"><img src="assets/dist/img/logo.png" alt=""></a>
<nav class="nav-bar__nav">
<a id="nav-bar-trigger" class="nav-bar__trigger hide-gamma-and-up"></a>
<ul class="nav-bar__list">
<li class="nav-bar__item"><a class="nav-bar__link" href="#link">link</a></li>
<li class="nav-bar__item"><a class="nav-bar__link" href="#link">link</a></li>
<li class="nav-bar__item"><a class="nav-bar__link" href="#link">link</a></li>
</ul>
</nav>
</div>
</header>
Off canvas
The docs has an off canvas for its menu.
Pagination
These work with the button classes so you can use those to change color, size is controlled with specific pagination padding.
Default pagination
<div class="btn-container">
<a class="btn btn--alpha" href="#link">‹</a>
<a class="btn btn--alpha" href="#link">1</a>
<a class="btn btn--alpha" href="#link">2</a>
<a class="btn btn--alpha" href="#link">3</a>
<a class="btn btn--alpha" href="#link">4</a>
<a class="btn btn--alpha" href="#link">5</a>
<a class="btn btn--divider">...</a>
<a class="btn btn--alpha" href="#link">23</a>
<a class="btn btn--alpha" href="#link">›</a>
</div>
Centered pagination
<div class="btn-container btn-container--center">
<a class="btn btn--alpha" href="#link">‹</a>
<a class="btn btn--alpha" href="#link">1</a>
<a class="btn btn--alpha" href="#link">2</a>
<a class="btn btn--alpha" href="#link">3</a>
<a class="btn btn--alpha" href="#link">4</a>
<a class="btn btn--alpha" href="#link">5</a>
<a class="btn btn--divider">...</a>
<a class="btn btn--alpha" href="#link">23</a>
<a class="btn btn--alpha" href="#link">›</a>
</div>
Right pagination
<div class="btn-container btn-container--right">
<a class="btn btn--alpha" href="#link">‹</a>
<a class="btn btn--alpha" href="#link">1</a>
<a class="btn btn--alpha" href="#link">2</a>
<a class="btn btn--alpha" href="#link">3</a>
<a class="btn btn--alpha" href="#link">4</a>
<a class="btn btn--alpha" href="#link">5</a>
<a class="btn btn--divider">...</a>
<a class="btn btn--alpha" href="#link">23</a>
<a class="btn btn--alpha" href="#link">›</a>
</div>
Button group pagination
<div class="btn-container">
<ul class="btn-group btn-group--inline">
<li><a class="btn btn--alpha" href="#link">‹</a></li>
<li><a class="btn btn--alpha" href="#link">1</a></li>
<li><a class="btn btn--alpha" href="#link">2</a></li>
<li><a class="btn btn--alpha" href="#link">3</a></li>
<li><a class="btn btn--alpha" href="#link">4</a></li>
<li><a class="btn btn--alpha" href="#link">5</a></li>
<li><a class="btn btn--divider">...</a></li>
<li><a class="btn btn--alpha" href="#link">23</a></li>
<li><a class="btn btn--alpha" href="#link">›</a></li>
</ul>
</div>
Centered button group pagination
<div class="btn-container btn-container--center">
<ul class="btn-group btn-group--inline">
<li><a class="btn btn--alpha" href="#link">‹</a></li>
<li><a class="btn btn--alpha" href="#link">1</a></li>
<li><a class="btn btn--alpha" href="#link">2</a></li>
<li><a class="btn btn--alpha" href="#link">3</a></li>
<li><a class="btn btn--alpha" href="#link">4</a></li>
<li><a class="btn btn--alpha" href="#link">5</a></li>
<li><a class="btn btn--divider">...</a></li>
<li><a class="btn btn--alpha" href="#link">23</a></li>
<li><a class="btn btn--alpha" href="#link">›</a></li>
</ul>
</div>
Right button group pagination
<div class="btn-container btn-container--right">
<ul class="btn-group btn-group--inline">
<li><a class="btn btn--alpha" href="#link">‹</a></li>
<li><a class="btn btn--alpha" href="#link">1</a></li>
<li><a class="btn btn--alpha" href="#link">2</a></li>
<li><a class="btn btn--alpha" href="#link">3</a></li>
<li><a class="btn btn--alpha" href="#link">4</a></li>
<li><a class="btn btn--alpha" href="#link">5</a></li>
<li><a class="btn btn--divider">...</a></li>
<li><a class="btn btn--alpha" href="#link">23</a></li>
<li><a class="btn btn--alpha" href="#link">›</a></li>
</ul>
</div>