Images with captions
For images inserted inside text areas, you can use make a div.thumbnail wrap an image and a div.caption to add subtle padding and spacing.
You can also add a caption with
.caption.You can further combine with .float-left or .float-right for a nice treatment, and size with, say, .columns .medium-4 for a responsive effect.
Images will dynamically scale down to fit the container, but will not scale above their actual size.
This is the treatment you see to the right.
Images with captions HTML
<div class="row collapse">
<div class="thumbnail float-right medium-4 columns">
<img src="http://www.ebi.ac.uk/sites/ebi.ac.uk/files/styles/large/public/groups/external_relations/images/News/TCell_news_EBI.jpg?itok=b_KTDxDO" alt="Photo of Uranus.">
<div class="caption">You can also add a caption with <code>.caption</code>.</div>
</div>
<p>You can further combine with <code>.float-left</code> or <code>.float-right</code> for a nice treatment, and size with, say, <code>.columns .medium-4</code> for a responsive effect.</p>
<p>Images will dynamically scale down to fit the container, but will not scale above their actual size.</p>
<p>This is the treatment you see to the right.</p>
</div>
Images with captions Style
You can find the original source of the CSS as .scss
Images with captions
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.