Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed:
Download a ZIP file
More on how to use this
<div class="column">
<h3>Default implementation</h3>
<p>By default, the related links box will display in two columns.</p>
<div class="related margin-top-none">
<h3>Releated</h3>
<ul>
<li><a href="#" class="icon icon-generic" data-icon="N"> News </a></li>
<li><a href="#" class="icon icon-generic" data-icon="c"> Jobs</a></li>
<li><a href="#" class="icon icon-generic" data-icon="&"> EMBL</a></li>
<li><a href="#" class="icon icon-generic" data-icon="("> Services</a></li>
<li><a href="#" class="icon icon-generic" data-icon="s"> Support</a></li>
<li><a href="#" class="icon icon-generic" data-icon="]"> Visit us</a></li>
</ul>
</div>
</div>
<div class="column">
<h3>Custom number of columns</h3>
<p>Use the <code>.small-up-3</code> <a href="../grid">grid method</a> to specify variable 1, 2, 3, 4, N columns.</p>
<div class="related margin-top-none">
<h3>Releated</h3>
<ul class="small-up-3 small-collapse">
<li class="column"><a href="#" class="icon icon-generic" data-icon="N"> News </a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="c"> Jobs</a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="&"> EMBL</a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="C"> People and groups </a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="("> Services</a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="T"> Train online</a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="s"> Support</a></li>
<li class="column"><a href="#" class="icon icon-generic" data-icon="]"> Visit us</a></li>
</ul>
</div>
</div>