Design System navigation

<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>
		<p class="bg-dark-gray">
			<br>
		<a href="#" class="link-underline-inverse text-white">Link underline inverse</a><br><br>
		</p>
		<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 ><a href="/" class="agib-logo">agib.dk</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li  ><a href="/posts/">Blog</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li  ><a href="/portfolio/">Portfolio</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li  ><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/design-ideas.html" class="tag-link">design-ideas</a>
	

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

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

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

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

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

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

		<a href="/tags/widget-design.html" 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>
		<div class="bg-dark-gray pad-top-1 pad-left-1">
		<ul class="social-links"><!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://www.linkedin.com/in/agibsen" title="LinkedIn"><!-- <i class="fa fa-fw fa-inverse fa-linkedin"></i> -->LinkedIn</a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://twitter.com/agibdk" title="Twitter"><!-- <i class="fa fa-fw fa-inverse fa-twitter"></i> -->Twitter</a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="http://ux.stackexchange.com/users/2145/agib" title="UX StackExchange"><!-- <i class="fa fa-fw fa-inverse fa-stack-exchange"></i> -->UX StackExchange</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://codepen.io/agibdk/" title="Codepen"><!-- <i class="fa fa-fw fa-inverse fa-codepen"></i> -->Codepen</a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="mailto:andreas@agib.dk" title="E-mail"><!-- <i class="fa fa-fw fa-inverse fa-envelope-o"></i> -->E-mail</a></li>
</ul>


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