Images

You can float images by adding the class right or left. Optionally, pair this with the code data-size="" to specify an image's size.

• full - image will fill 100% of its container
• medium - image will fill 60% of its container
• small - image will fill 40% of its container

HTML

<img src="" alt="image alt text" data-size="full">
<img src="" alt="image alt text" data-size="medium" class="right">
<img src="" alt="image alt text" data-size="small" class="left">

Rendered HTML

Captions

Adding a caption to an image is a variant of a spotlight. See below for an example.

HTML

<div class="spotlight gray"> 
    <img src="" alt="image alt text">
    <div class="headline">
        <strong>A Caption</strong>
        <br>For Your Photos
    </div>
</div>

Rendered HTML

A Caption
For Your Photos

By default, this will stretch to fill the entire width of its container. Alternatively, you can pair the caption with the above sizing and float options. See below.

HTML

<div class="spotlight gray right" data-size="small"> 
    <img src="" alt="image alt text">
    <div class="headline">
        <strong>A Caption</strong>
        <br>For Your Photos
    </div>
</div>

Rendered HTML

A Caption
For Your Photos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas turpis vel ante dictum dictum. Pellentesque tincidunt arcu sed mauris euismod commodo. Ut in arcu varius, tincidunt purus quis, posuere diam. Aliquam erat volutpat. Aliquam eu nibh efficitur, feugiat orci vitae, interdum libero. Aenean laoreet justo tellus, ac bibendum felis tincidunt et. Donec venenatis placerat efficitur. Sed sit amet justo in diam malesuada sagittis. Nulla ullamcorper dui vitae tempor viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas turpis vel ante dictum dictum. Pellentesque tincidunt arcu sed mauris euismod commodo. Ut in arcu varius, tincidunt purus quis, posuere diam. Aliquam erat volutpat. Aliquam eu nibh efficitur, feugiat orci vitae, interdum libero. Aenean laoreet justo tellus, ac bibendum felis tincidunt et. Donec venenatis placerat efficitur. Sed sit amet justo in diam malesuada sagittis. Nulla ullamcorper dui vitae tempor viverra.