Image shortcuts
To come
If you have a series of images you'd like to use to promote various areas, you can use
.shortcuts
Image shortcuts HTML
<div class="row collapse">
If you have a series of images you'd like to use to promote various areas, you can use <code>.shortcuts</code>
<div class="row">
<div class="medium-up-3 columns medium-12 callout">
<div class="column shortcuts transparent">
<a href="http://www.embl.de/research/faculty/index.php?dtySt=0"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/Faculty_500.jpg" alt="EMBL Faculty" title="EMBL Faculty" />
<p class="pane-title">EMBL faculty</p>
</a>
</div>
<div class="column shortcuts transparent">
<a href="http://www.ebi.ac.uk/research/postdocs"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/News/Postdocs_highlight.jpg" alt="Postdocs at EMBL-EBI" title="Postdocs at EMBL-EBI" />
<p class="pane-title">Postdocs at EMBL-EBI</p>
</a>
</div>
<div class="column shortcuts transparent">
<a href="http://www.ebi.ac.uk/research/eipp"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/PhD_500.jpg" alt="EMBL International PhD Programme" title="EMBL International PhD Programme" />
<p class="pane-title">PhD Programme</p>
</a>
</div>
<div class="column shortcuts transparent">
<a href="http://targetvalidation.org"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/CTTV_highlight.jpg" alt="Open Targets" title="Open Targets" />
<p class="pane-title">Centre for Therapeutic Target Validation</p>
</a>
</div>
<div class="column shortcuts transparent">
<a href="http://www.sanger.ac.uk/science/collaboration/sanger-institute-ebi-single-cell-genomics-centre"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/News/Single_cell_genomics_centre_highlight.jpg" alt="Single Cell Genomics Centre" title="Single Cell Genomics Centre" />
<p class="pane-title">Sanger/EBI Single-Cell Genomics Centre</p>
</a>
</div>
<div class="column shortcuts transparent">
<a href="http://www.ebi.ac.uk/about/brochures"><img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/highlights/Brochure_highlights.jpg" alt="EMBL-EBI brochures link" title="EMBL-EBI brochures link" />
<p class="pane-title">Read more about EMBL-EBI</p>
</a>
</div>
</div>
</div> <!-- /row -->
</div>
Image shortcuts Style
You can find the original source of the CSS as .scss
Image shortcuts
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.