Home ›
Documentation ›
Working with Content ›
Images & Videos

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.

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.

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.

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.

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.

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.

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.

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

<!-- 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).

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 class="image-right"><img class="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.

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