Image Styling

Default image styling is built into the UNL templates for you to use. Please note, while other markup has been used in the past for this presentational treatment, the markup below is the current supported markup and will be the markup used moving forward.

For large, presentational images, review the UNLedu bands documentation.

Additional class:

removes top margin on text to align with image on the right.
clear-top

Image Templates

Simple frame

Provide a simple, subtle frame around your image.

Photo of the UNL Campus

Example HTML

    
<figure class="wdn-frame">
    <img src="../graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
</figure>
    

Image frame with caption

In many cases, a caption will provide more context and is important.

Photo of the UNL Campus
The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.

Example HTML

    
<figure class="wdn-frame">
    <img src="../graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
    <figcaption>The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.</figcaption>
</figure>
    

Animated caption

Sometimes, the caption isn't necessary until a user interacts with the image. For this option, it's simply a matter of adding the appropriate class: wdn-caption-animate.

Photo of the UNL Campus
The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.

Example HTML

    
<figure class="wdn-frame wdn-caption-animate">
    <img src="../graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
    <figcaption>The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.</figcaption>
</figure>