Images are an important part of every site we build. We use single images and slideshows. Each type allows for image, caption, and attribution.
Tell a story with more than one image
Image essay: big plus two
This text describes the full image essay. It summarizes the first, second, and third photos. Joe Photographer for Indiana University
Show/hide markup
<div class="image-essay big-plus-two">
<div class="full-width">
<figure class="media image">
<img src="https://placehold.it/1536x768" alt="Placeholder Image" />
</figure>
</div>
<div class="one-half first">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<div class="one-half second">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<p class="figcaption">
<span class="caption-text">This text describes the full image essay. It summarizes the first, second, and third photos.</span>
<span class="caption-credit">Joe Photographer for Indiana University</span>
</p>
</div>Image essay: two plus big
This text describes the full image essay. It summarizes the first, second, and third photos. Jane Photographer for Indiana University
Show/hide markup
<div class="image-essay two-plus-big">
<div class="one-half first">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<div class="one-half second">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<div class="full-width">
<figure class="media image">
<img src="https://placehold.it/1536x768" alt="Placeholder Image" />
</figure>
</div>
<p class="figcaption">
<span class="caption-text">This text describes the full image essay. It summarizes the first, second, and third photos.</span>
<span class="caption-credit">Joe Photographer for Indiana University</span>
</p>
</div>Image essay: one plus two
This text describes the full image essay. It summarizes the first, second, and third photos. Joe Photographer for Indiana University
Show/hide markup
<div class="image-essay one-plus-two">
<div class="one-half first">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<div class="one-half second">
<figure class="media image">
<img src="https://placehold.it/768x384" alt="Placeholder Image" />
</figure>
<figure class="media image">
<img src="https://placehold.it/768x384" alt="Placeholder Image" />
</figure>
</div>
<p class="figcaption">
<span class="caption-text">This text describes the full image essay. It summarizes the first, second, and third photos.</span>
<span class="caption-credit">Joe Photographer for Indiana University</span>
</p>
</div>Image essay: two plus one
This text describes the full image essay. It summarizes the first, second, and third photos. Jane Photographer for Indiana University
Show/hide markup
<div class="image-essay two-plus-one">
<div class="one-half first">
<figure class="media image">
<img src="https://placehold.it/768x384" alt="Placeholder Image" />
</figure>
<figure class="media image">
<img src="https://placehold.it/768x384" alt="Placeholder Image" />
</figure>
</div>
<div class="one-half second">
<figure class="media image">
<img src="https://placehold.it/768x768" alt="Placeholder Image" />
</figure>
</div>
<p class="figcaption">
<span class="caption-text">This text describes the full image essay. It summarizes the first, second, and third photos.</span>
<span class="caption-credit">Joe Photographer for Indiana University</span>
</p>
</div>