Related links box
Formerly the "popular" box
By default the basic markup will show in three columns.
Note: Typically these are expected to be used at the top of the right column and have a top margin of 4.5rem to align with the content. As this margin is not useful in this context we have disabled with .margin-top-none
Specify the number of columns
Alternativley, you can use the .small-up-3 grid method to specify variable 1, 2, 3, 4, N columns.
Related links box HTML
<div class="row">
<div class="columns medium-6">
<p>By default the basic markup will show in three columns.</p>
<p>Note: Typically these are expected to be used at the top of the right column and have a top margin of 4.5rem to align with the content. As this margin is not useful in this context we have disabled with <code>.margin-top-none</code></p>
</div>
<div class="columns medium-6">
<div class="related margin-top-none">
<h3>Releated</h3>
<ul>
<li><a href="//wwwdev.ebi.ac.uk/about/news" class="icon icon-generic" data-icon="N"> News </a></li>
<li><a href="//wwwdev.ebi.ac.uk/about/jobs" class="icon icon-generic" data-icon="c"> Jobs</a></li>
<li><a href="http://www.embl.de/aboutus/index.html" class="icon icon-generic" data-icon="&"> EMBL</a></li>
<li><a href="//wwwdev.ebi.ac.uk/services" class="icon icon-generic" data-icon="("> Services</a></li>
<li><a href="//wwwdev.ebi.ac.uk/support" class="icon icon-generic" data-icon="s"> Support</a></li>
<li><a href="//wwwdev.ebi.ac.uk/about/travel" class="icon icon-generic" data-icon="]"> Visit us</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="columns medium-8">
<h3>Specify the number of columns</h3>
<p>Alternativley, you can 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="//wwwdev.ebi.ac.uk/about/news" class="icon icon-generic" data-icon="N"> News </a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/about/jobs" class="icon icon-generic" data-icon="c"> Jobs</a></li>
<li class="column"><a href="http://www.embl.de/aboutus/index.html" class="icon icon-generic" data-icon="&"> EMBL</a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/about/people" class="icon icon-generic" data-icon="C"> People and groups </a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/services" class="icon icon-generic" data-icon="("> Services</a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/training/online" class="icon icon-generic" data-icon="T"> Train online</a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/support" class="icon icon-generic" data-icon="s"> Support</a></li>
<li class="column"><a href="//wwwdev.ebi.ac.uk/about/travel" class="icon icon-generic" data-icon="]"> Visit us</a></li>
</ul>
</div>
</div>
</div>
Related links box Style
You can find the original source of the CSS as .scss
Related links box
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.