Style Guide navigation



Link
Link (.nonederline).
Link (.nonederline.link-colored.pointer-right-after).


Link underline inverse

Buttons

.btn .btn.btn-hollow

Main navigation

Paging navigation

List navigation

Tag navigation

html-css navigation redesign-case ux-critique widget-design .tag-link-active

Social links

<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="/projects/">Projects</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li  ><a href="/about/">About</a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li ><a href="/contact.html">Contact</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="nonederline block-link-padded bg-light-gray">Link</a>
	</li>
	<li>
	<a href="#" class="nonederline block-link-padded bg-light-gray active">Link <code>.active</code></a>
	</li>
	<li>
		<a href="#" class="nonederline 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="nonederline block-link-padded bg-light-gray">Link</a>
	</li>
</ul>
<h3 class="pad-top-2">Tag navigation</h3>

	

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

		<a href="/tags/navigation.html" class="tag-link">navigation</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" class="nonederline"><i class="fa fa-fw fa-inverse fa-linkedin"></i></a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://twitter.com/agibdk" title="Twitter" class="nonederline"><i class="fa fa-fw fa-inverse fa-twitter"></i></a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="http://ux.stackexchange.com/users/2145/agib" title="UX StackExchange" class="nonederline"><i class="fa fa-fw fa-inverse fa-stack-exchange"></i></a></li><!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="https://codepen.io/agibdk/" title="Codepen" class="nonederline"><i class="fa fa-fw fa-inverse fa-codepen"></i></a></li>
  <!-- DON'T REMOVE THESE COMMENTS
  --><li><a href="mailto:andreas@agib.dk" title="E-mail" class="nonederline"><i class="fa fa-fw fa-inverse fa-envelope-o"></i></a></li>
</ul>
</div>