Component Library

Full Width Image 

<figure class="full-width-image">
    <div class="full-width-image__image">
        <img src="../../img/Component-Centered-Image-Full-Width.jpg" alt="" loading="lazy" width="1470" height="549">
    </div>
    <figcaption class="full-width-image__caption text-content">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</figcaption>
</figure>
 
<figure class="full-width-image">
    <div class="full-width-image__image">
      <img src="{{ image|path }}" alt="" loading="lazy" width="1470" height="549">
    </div>
    <figcaption class="full-width-image__caption text-content">{{ caption|raw }}</figcaption>
</figure>
 
{
  "image": "../../img/Component-Centered-Image-Full-Width.jpg",
  "caption": "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim."
}
  • Content: 
    .paragraph-widget--full-width-image {
  @extend %full-width-component;
}

.full-width-image {
  margin: 0;
}

.full-width-image__image {
  @extend %responsive-img;
  &:before {
    padding-top: 37.34%;
  }
}
.full-width-image__caption {
  @extend %caption;
  @extend %outer-pad-x;
}
  • URL: /components/raw/full-width-image/_full-width-image.scss
  • Filesystem Path: src/components/full-width-image/_full-width-image.scss
  • Size: 283 Bytes

Full Width Image

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • Images within the full-width-image__image element will be inline img elements and are sized using the css object-fit property (a polyfill is included for older browsers)
  • The custom styles are imported into the index.scss file as @import "../components/full-width-image/full-width-image";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--full-width-image">.