Images

Documentation and examples for opting images into responsive behavior.

Figures

Examples for displaying related images and text with the figure component.

Figure

      
        
  <figure class="figure">
      <img
        srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
                ../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
        sizes="(max-width: 576px) 480px,
               (max-width: 768px) 720px,
               (max-width: 992px) 960px,"
        src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
        alt="Image description"
        class="figure-img"
      >
    <figcaption class="figure-caption">Image caption text. Lorem ipsum odor amet, consectetuer elit.</figcaption>
  </figure>

Figure Overlay

View in new window for full preview

      
        
  <figure class="figure figure-overlay">
      <img
        srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
                ../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
        sizes="(max-width: 576px) 480px,
               (max-width: 768px) 720px,
               (max-width: 992px) 960px,"
        src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
        alt="Image description"
        class="figure-img"
      >
    <figcaption class="figure-caption">Image caption text. Lorem ipsum odor amet, consectetuer elit.</figcaption>
  </figure>

Figure/Image with Link

View in new window for full preview

      
        <a class="figure-link" href="#">
  <figure class="figure">
      <img
        srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
                ../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
        sizes="(max-width: 576px) 480px,
               (max-width: 768px) 720px,
               (max-width: 992px) 960px,"
        src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
        alt="Image description"
        class="figure-img"
      >
  </figure>
  </a>
  <hr>
  <a class="figure-link" href="#">
  <figure class="figure figure-overlay">
      <img
        srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
                ../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
                ../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,"
        sizes="(max-width: 576px) 480px,
               (max-width: 768px) 720px,
               (max-width: 992px) 960px,"
        src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
        alt="Image description"
        class="figure-img"
      >
    <figcaption class="figure-caption">Image caption text. Lorem ipsum odor amet, consectetuer elit.</figcaption>
  </figure>
  </a>