Image Essays

Image essay: big plus two

Placeholder Image
Placeholder Image
Placeholder Image

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

Placeholder Image
Placeholder Image
Placeholder Image

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 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

Placeholder Image
Placeholder Image
Placeholder Image

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>