Design System navigation

---
layout: layouts/designsystem
---
<div class="container narrow no-padding">
	<div class="box">
		<a href="#">Link</a><br>
		<a href="#" class="nonederline">Link (<code>.nonederline</code>).</a>
		<br>
		<a href="#" class="nonederline link-colored pointer-right-after">Link (<code>.nonederline.link-colored.pointer-right-after</code>).</a>
		<h3 class="pad-top-2">Buttons</h3>
		<a href="#" class="btn">.btn</a>
		<a href="#" class="btn btn-hollow">.btn.btn-hollow</a>
		<h3 class="pad-top-2">Main navigation</h3>
		<div class="bg-primary">
			<nav class="text-center">
	<ul class="nav-main nav-inverse">
  <li class="">
    <a href="/" class="agib-logo">agib.dk</a>
  </li>
  <li class="">
    <a href="/posts/">Blog</a>
  </li>
  <li class="">
    <a href="/portfolio/">Portfolio</a>
  </li>
  <li class="">
    <a href="/about/">About</a>
  </li>
</ul>



</nav>


		</div>		
		<h3 class="pad-top-2">Paging navigation</h3>
		<nav class="paging-link-container">
			<a href="#" class="paging-link paging-next btn" rel="next">
				<div class="paging-link-inner">
					<div class="point-right">Next</div>
				</div>
			</a>
			<a href="#" class="paging-link paging-prev btn" rel="prev">
				<div class="paging-link-inner">
					<div class="point-left">Previous</div>
				</div>
			</a>
		</nav>
		<h3 class="pad-top-2">List navigation</h3>
		<ul class="list-plain">
			<li>
				<a href="#" class="block-link-padded bg-light-gray">Link</a>
			</li>
			<li>
			<a href="#" class="block-link-padded bg-light-gray active">Link <code>.active</code></a>
			</li>
			<li>
				<a href="#" class="block-link-padded bg-light-gray ">Link with long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda iure aliquam tenetur obcaecati reprehenderit.</a>
			</li>
			<li>
				<a href="#" class="block-link-padded bg-light-gray">Link</a>
			</li>
		</ul>
		<h3 class="pad-top-2">Tag navigation</h3>
		
	

		<a href="/tags/ai/" class="tag-link">ai</a>
	

		<a href="/tags/design-ideas/" class="tag-link">design-ideas</a>
	

		<a href="/tags/html-css/" class="tag-link">html-css</a>
	

		<a href="/tags/life/" class="tag-link">life</a>
	

		<a href="/tags/navigation/" class="tag-link">navigation</a>
	

		<a href="/tags/news/" class="tag-link">news</a>
	

		<a href="/tags/redesign-case/" class="tag-link">redesign-case</a>
	

		<a href="/tags/ux-critique/" class="tag-link">ux-critique</a>
	

		<a href="/tags/widget-design/" class="tag-link">widget-design</a>
<span class="tag-link tag-link-active">.tag-link-active</span>
		<h3 class="pad-top-2">Social links</h3>
		<footer class="bg-dark-gray pad-top-1 pad-left-1 pad-bottom-1">
		<ul class="social-links"><!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://www.linkedin.com/in/agibsen" class="nonederline" title="LinkedIn">LinkedIn</a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="mailto:andreas@agib.dk" class="nonederline" title="E-mail">E-mail</a></li>
</ul>


		</footer>
	</div>	
</div>