Lehigh Clutch Style Guide

Image Large 

<div class="large_img">
    <div class="large_img-wrapper">
        <div class="large_img-img">
            <picture class="image large">
                <img src="/img/lava-2.jpg" alt="hot lava" />
            </picture>
        </div>

        <div class="large_img-caption">
            This is the caption
        </div>
    </div>
</div><!-- end large_img -->
 
<div class="large_img">
  <div class="large_img-wrapper">
    <div class="large_img-img">
      {% block large_img_image %}
      {% include "@images--large" %}
      {% endblock large_img_image %}
    </div>

    {% if caption %}
    <div class="large_img-caption">
      {{ caption|raw }}
    </div>
    {% endif %}
  </div>
</div><!-- end large_img -->
 
{
  "img_src": "/img/lava-2.jpg",
  "img_alt": "hot lava",
  "body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "caption": "This is the caption"
}
  • Content: 
    .large_img {
  position: relative;
  margin-bottom: $space_and_half;

  @include media-breakpoint-up(md) {
    width: 100%;
  }

  &-wrapper {
    position: relative;
    max-width: 100%;
    width: max-content;
  }

  &-img {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;

    img {
      max-width: 100%;
    }
  }

  &-caption {
    position: relative;
    width: 100%;
    background-color: $grey_darkest;
    color: $white;
    padding: $space_one_half;
    font-size: .875rem;

    .accent- & {
      background-color: var(--golden-hour, $golden-hour);
      color: var(--grey_darkest, $grey_darkest);
    }

    .accent-first-light & {
      background-color: var(--first-light, $first-light);
      color: var(--grey_darkest, $grey_darkest);
    }

    .accent-patina-green & {
      background-color: var(--patina-green, $patina-green);
      color: var(--grey_darkest, $grey_darkest);
    }

    .accent-bethlehem-sky & {
      background-color: var(--bethlehem-sky, $bethlehem-sky);
      color: var(--grey_darkest, $grey_darkest);
    }

    .accent-lehigh_brown & {
      background-color: var(--lehigh_brown, $lehigh_brown);
      color: var(--white, $white);
    }

    .accent-night-sky & {
      background-color: var(--night-sky, $night-sky);
      color: var(--mountaintop-mist, $mountaintop-mist);
    }

    p {
      margin: 0;
    }
  }
}
  • URL: /components/raw/image_large/image_large.scss
  • Filesystem Path: bits/04-components/image_large/image_large.scss
  • Size: 1.4 KB

Display large image with an optional caption.