Quorn-hcp Styleguide

  1. Styleguide
  2. Figure

Figure

.figure contains images and can optionally contain a caption.

Basic figure

.figure

<div class="figure">
  <div class="figure__media">
    <div class="aspect--3-2 aspect-700--3-1">
      <picture class="figure__media__img">
        <source srcset="..." media="(min-width:768px)" >
        <img alt="..." src="..." >
      </picture>
    </div>
  </div>
</div>

Figure with caption

.figure with optional additional markup .figure__caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum perferendis quae, beatae repellendus error! 
<div class="figure">
  <div class="figure__media">
    <div class="aspect--3-2 aspect-700--3-1">
      <picture class="figure__media__img">
        <source srcset="..." media="(min-width:768px)" >
        <img alt="..." src="..." >
      </picture>
    </div>
  </div>
  <div class="figure__caption">
    ...
  </div>
</div>

Figure with caption and link around image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum perferendis quae, beatae repellendus error! 
<div class="figure">
  <div class="figure__media">
    <a href="#">
      <div class="aspect--3-2 aspect-700--3-1">
        <picture class="figure__media__img">
          <source srcset="..." media="(min-width:768px)" >
          <img alt="..." src="..." >
        </picture>
      </div>
    </a>
  </div>
  <div class="figure__caption">
    ...
  </div>
</div>