Images & Videos

Images

Floated Images

The .image-left and .image-right classes can be used to float images within the content. These classes are used on the element that contains the image.

Campus photo

Atque ita re simpliciter primo collocata reliqua subtilius persequentes corporis bona facilem quandam rationem habere censebant; Murenam te accusante defenderem.

Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.

Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.

Campus photo

Atque ita re simpliciter primo collocata reliqua subtilius persequentes corporis bona facilem quandam rationem habere censebant; Murenam te accusante defenderem. Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Deinde disputat, quod cuiusque generis animantium statui deceat extremum.

Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.

Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<!-- Floated Right -->
<figure class="image-right">
  <img src="image.png" width="600" height="400" alt="Campus photo" />
</figure>

<!-- Floated Left -->
<figure class="image-left">
  <img src="image.png" width="600" height="400" alt="Campus photo" />
</figure>

Non-Floated Images

The .image-default can be used when floating is not desired. Any content following the image will be displayed below it.

Campus photo

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nih.

<!-- Not Floated -->
<figure class="image-default">
  <img src="image.png" width="600" height="400" alt="Campus photo" />
</figure>

Captioned Images

Captions can be added by using the <figcaption> element.

Campus photo
This is the caption for the image. Lorem ipsum dolor sit amet.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.x

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada.

<figure class="image-right">
  <img src="image.png" width="600" height="400" alt="Campus photo" />
  <!-- Caption goes here -->
  <figcaption>This is the caption for the image. Lorem ipsum dolor sit amet.</figcaption>
</figure>

Pulled Images

The classes .image-full-right and .image-full-left can be used to pull images to the edge of the screen. These images are full-bleed on screens smaller than the large breakpoint. They stop expanding to the edge of the screen after 1920px.

Campus photo
<!-- Pulled Right Image -->
<figure class="image-full-right">
  <img src="image.png" width="1200" height="400" alt="Campus photo" />
</figure>
Campus photo
<!-- Pulled Left Image -->
<figure class="image-full-left">
  <img src="image.png" width="1800" height="600" alt="Campus photo" />
</figure>

Portraits

Headshots are normally circular on Notre Dame websites. The class .image-circle is used for this purpose. This class only works correctly for images that are perfectly square (600x600, for example).

Portrait placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.

 <!-- Circle Profile Image -->
<figure><img class="image-right image-circle" src="image.png" alt="Portrait placeholder" width="300" height="300"/></figure>

Image CSS Reference

Class Description
.image-default Does not float image.
.image-left Floats contained image left after small breakpoint.
.image-right Floats contained image right after small breakpoint.
.image-full-left Full-bleed until large breakpoint. Between large breakpoint and 1920px, it pulls contained image to left edge of screen.
.image-full-right Full-bleed until large breakpoint. Between large breakpoint and 1920px, it pulls contained image to right edge of screen.
.image-circle Make image circular. Can be used on image directly, or containing element.

Videos

The .video class can be used to designate a video link. The Web Theme JavaScript will add a play button overlay and replace the element with an <iframe> on click.

A YouTube Video

<p>
  <a class="video" href="https://www.youtube.com/watch?v=p_vC10eq474" title="A YouTube Video">
    <img src="image.png" alt="A YouTube Video" />
  </a>
</p>