D.School Component Library

Full Width Image 

<div class="c-full-width-image">

    <img class="o-image" loading="lazy" src="../../../images/photo_news.jpg" alt="holding chalk" />
    <div class="c-full-width-image__scrim">
        <figcaption class="o-caption c-full-width-image__caption">
            <span class="o-icon">
                <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.6612 17.9693L16.2476 19.4613C16.1308 19.5845 16.1308 19.7843 16.2476 19.9076C16.3643 20.0308 16.5537 20.0308 16.6704 19.9076L18.5732 17.8993C18.69 17.776 18.69 17.5762 18.5732 17.453L16.6704 15.4447C16.5537 15.3215 16.3643 15.3215 16.2476 15.4447C16.1308 15.568 16.1308 15.7678 16.2476 15.891L17.6144 17.3336C12.0184 16.9285 7.59799 12.0091 7.59799 6H7C7 12.3745 11.7125 17.5874 17.6612 17.9693Z" />
                </svg>
            </span>
            Lorem ipsum dolor sit amet consectetur. Hendrerit turpis amet commodo vestibulum aenean. Neque mauris dictum pellentesque non. Pellentesque adipiscing morbi morbi massa proin iaculis enim pellentesque.
        </figcaption>
    </div>
</div>
 
{% set base_class = homepage_banner.base_class|default('c-full-width-image') %}

<div class="{{ bem(base_class, full_width_image.element, full_width_image.modifiers, full_width_image.extra) }}">
  {% include "@responsive-image" with {
    "image": full_width_image.image
  } %}
  {% if full_width_image.text %}
    <div class="{{ bem(base_class, 'scrim') }}">
      {% include "@caption" with {
        "caption": {
          "text": full_width_image.text,
          "icon": "true",
          "extra": bem(base_class, 'caption')
        }
      } %}
    </div>
  {% endif %}
</div>
 
{
  "full_width_image": {
    "image": {
      "src": "../../../images/photo_news.jpg",
      "alt": "holding chalk"
    },
    "text": "Lorem ipsum dolor sit amet consectetur. Hendrerit turpis amet commodo vestibulum aenean. Neque mauris dictum pellentesque non. Pellentesque adipiscing morbi morbi massa proin iaculis enim pellentesque."
  }
}
  • Content: 
    .c-full-width-image {
  position: relative;

  img {
    height: 175px;
    object-fit: cover;
    mask: linear-gradient(#000, #000), 
      url("../../../images/border-textures/negative-border-texture-left.svg") 0 0/100% auto;
    mask-composite: subtract;
    mask-repeat: no-repeat;
  }

  &__caption {
    padding-block: var(--ds-space-sm);
    padding-inline: 0 var(--ds-space-md);
    margin: 0;
    display: flex;
    flex-direction: row;
    max-width: 645px;

    .o-icon {
      flex: 0 0 auto;
      align-items: flex-start;
    }
  }

  @include media('>=medium') {
    color: var(--ds-color-background-primary);

    img {
      height: 725px;
    }

    &__scrim {
      width: 100%;
      height: 135px;
      position: absolute;
      bottom: 0;
      background: linear-gradient(#0000, #0009);
    }

    &__caption {
      position: absolute;
      bottom: var(--ds-space-sm);
      right: var(--ds-space-xl);
      padding: 0;

      .o-icon {
        margin-top: calc(-1 * var(--ds-space-xs));
      }
    }
  }
}
  • URL: /components/raw/full-width-image/_full-width-image.scss
  • Filesystem Path: components/02-molecules/full-width-image/_full-width-image.scss
  • Size: 1 KB

Should this picture be a fixed height, or respond to the particular image?