Related links box

By Ken Hawkins

links shortcuts Requires EBI Visual Framework 1.1.0, 1.2.0

Formerly the "popular" box

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


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

HTML
<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="&amp;"> 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="&amp;"> 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>



JS