<div class="page-wide-image-wrapper">
    <figure class="page-wide-image">
        <img src="https://via.placeholder.com/1600x420" alt="Page wide image" class="no-style" />

        <figcaption>
            <div class="description">Caption text comes here.</div>

        </figcaption>
    </figure>

    <h2>Page wide title</h2>
</div>
<div class="page-wide-image-wrapper">
  <figure class="page-wide-image">
    {% include '@image' with {
      "src": src,
      "alt_text": alt_text,
      "modifier": modifier
    } %}

    <figcaption>
      {% include 'description' with {
        "description": description,
      } %}
    </figcaption>
  </figure>

  {% include 'h2' with {
    "h2_text": h2_text,
  } %}
</div>
{
  "src": "https://via.placeholder.com/1600x420",
  "alt_text": "Page wide image",
  "modifier": "no-style",
  "description": "Caption text comes here.",
  "h2_text": "Page wide title"
}
  • Content:
    .page-wide-image-wrapper {
      position: relative;
    
      .description {
        @include tablet {
          display: block;
          margin-top: .25rem;
          margin-right: .5rem;
          float: right;
        }
    
        display: none;
      }
    
      h1,
      h2 {
        @include themify {
          color: $heading-2-color;
        }
    
        @include tablet {
          position: absolute;
          bottom: 1rem;
          left: 1rem;
          margin-bottom: 0;
          padding: 0;
          color: $color-white;
        }
    
        padding: 1rem .5rem 0;
        text-shadow: 1px 1px 1px $color-dark-gray;
      }
    
      h2 {
        @extend %h1;
      }
    }
    
    .page-wide-image {
      img {
        @include tablet {
          display: block;
          width: 100%;
          max-height: 26.25rem;
          overflow: hidden;
        }
    
        display: none;
      }
    }
    
    
  • URL: /components/raw/page-wide-image/_page-wide-image.scss
  • Filesystem Path: components/31-molecules/building-blocks/page-wide-image/_page-wide-image.scss
  • Size: 736 Bytes

Page wide image