Images with captions

By Ken Hawkins

layout visuals images Requires EBI Visual Framework 1.1.0

Use a figure element to style images with captions. You can also use a legacy class to caption images.

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

#### Using semantic figures with figcaptions

<figure class="image float-right">
  <img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" alt="Alt text." title="Title here." width="350">
  <figcaption>A fixed <code>figure.image > figcaption</code>. Not responsive, but we only need set the image's width attribute.</figcaption>
</figure>

“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”

“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”

<div class="columns float-right medium-5">
<figure class="image"><img alt="Why are PDX models important in cancer research? How can standards make them even more useful? Why should users get involved? Terry Meehan of EMBL-EBI explains." src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" width="" class="">
<figcaption class="">A responsive <code>figure &gt; figcaption</code> wrapped in a <code>div.columns.float-right.medium-5</code></figcaption>
</figure>
</div>

“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”

“Unless it follows a standard, a PDX model can only help one patient or one research facility,” explains Terry Meehan, Mouse Informatics Coordinator at EMBL-EBI and principal author. “For PDX models to make a real difference in the fight against cancer, and to reduce the number of animals used in research, we need to make existing models easy to find and access. This will accelerate the rate of scientific discovery and reduce unnecessary duplication.”

#### Legacy class-based captions

<div class="medium-5 float-right margin-left-large">
  <img src="https://www.ebi.ac.uk/sites/ebi.ac.uk/files/groups/external_relations/images/wide-imagery/Bitcoin_challenge_credit_WUYTS_Sander_v_EMBL-EBI_780x400.jpg" alt="Alt text." title="Title here.">
  <p class="caption">A simple legacy `.caption`. Note this is also wrapped in a `div.medium-5.float-right.margin-left-large`.</p>
</div>



JS