Focus (with image)

A white section with a large image positioned below the heading and description of the page. Used when the element is a focal part of the page.

Images and embeds in Lens use a 16:9 ratio for consistency.

<!-- COMPONENT: Focus -->
<section class="small-padding stack-section">
    <div class="row column text-center">
        <figure class="focus image">
            <img src="https://picsum.photos/1600/900/" alt="Lorem ipsum dolor sit amet consectetur adipisicing elit sed">
            <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
        </figure>
    </div>
</section>
<!-- End component: Focus -->
  • Handle: @focus-image
  • Preview:
  • Filesystem Path: components/ingredients/common-ingredients/focus/focus-image/focus-image.hbs