College of Business Style Guide

Image Focused Slide 

<div class="image-focused-slide-wrapper">
    <a href="http://es.pn">
        <div class="image-focused-slide-text gold">
            <div class="image-focused-slide-image">
                <img data-lazy="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" data-srcset="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" data-sizes="100vw" src="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" />
            </div>
            <div class="image-focused-slide-content">
                <h2>All Star</h2>
                <span>
                    <img data-lazy="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" data-srcset="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" data-sizes="100vw" src="/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png" />
                </span>
                <p>Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb.</p>
            </div>
        </div><!-- end hover-box-text -->
    </a>
</div>
 
<div class="image-focused-slide-wrapper">
{% if page_url|trim is not empty %}
  <a href="{{ page_url }}">
{% endif %}
    <div class="image-focused-slide-text {{ color }}">
        <div class="image-focused-slide-image">
            {% block cms_override_image %}
                <img data-lazy="{{ slide_src_img }}" data-srcset="{{ slide_src_img }}" data-sizes="100vw" src="{{ slide_src_img }}" />
            {% endblock cms_override_image %}
        </div>
        <div class="image-focused-slide-content">
            <h2>{{ heading }}</h2>
            <span>
                {% block cms_override_image_mobile %}
                    <img data-lazy="{{ slide_src_img }}" data-srcset="{{ slide_src_img }}" data-sizes="100vw" src="{{ slide_src_img }}" />
                {% endblock cms_override_image_mobile %}
            </span>
            {% block cms_override_text %}
                <p>{{ content }}</p>
            {% endblock cms_override_text %}
        </div>
    </div><!-- end hover-box-text -->
{% if page_url|trim is not empty %}
  </a>
{% endif %}
</div>
 
{
  "slide_src_img": "/images/Feature_RauchExpansion_PathtoProminence_LehighBusiness.png",
  "heading": "All Star",
  "content": "Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb.",
  "color": "gold",
  "page_url": "http://es.pn"
}
  • Content: 
    .image-focused-slide {
  &-wrapper {
    position: relative;

    @media only screen and (max-width: $break-desktop) {
    }

    @media only screen and (min-width: $break-desktop) {
      width: 100%;
      display: inline-block;
      padding-bottom: 50%;
    }
  }

  &-text {
    position: unset;
    width: 100%;
    height: 100%;
    color: $black;
    bottom: 0;

    @media only screen and (min-width: $break-desktop) {
      color: $white;
      overflow: hidden;
    }

    @media only screen and (min-width: $break-desktop) {
      position: absolute;
    }

    &.teal {
      @media only screen and (min-width: $break-desktop) {
        background: linear-gradient(rgba(113, 196, 188, 0.9), rgba(0, 0, 0, 0.9));
      }

      span {
        background: linear-gradient(rgba(113, 196, 188, 0.9), rgba(0, 0, 0, 0.9));
        height: 100%;
        width: 100%;
        display: block;

        @media only screen and (min-width: $break-desktop) {
          display: none;
        }

        img {
          opacity: 0.2 !important;
        }
      }
    }

    &.red {
      @media only screen and (min-width: $break-desktop) {
        background: linear-gradient(rgba(255, 61, 58, 0.9), rgba(0, 0, 0, 0.9));
      }

      span {
        background: linear-gradient(rgba(255, 61, 58, 0.9), rgba(0, 0, 0, 0.9));
        height: 100%;
        width: 100%;
        display: block;

        @media only screen and (min-width: $break-desktop) {
          display: none;
        }

        img {
          opacity: 0.2 !important;
        }
      }
    }

    &.gold {
      @media only screen and (min-width: $break-desktop) {
        background: linear-gradient(rgba(255, 218, 64, 0.9), rgba(0, 0, 0, 1));
      }

      span {
        background: linear-gradient(rgba(255, 218, 64, 0.9), rgba(0, 0, 0, 1));
        height: 100%;
        width: 100%;
        display: block;

        @media only screen and (min-width: $break-desktop) {
          display: none;
        }

        img {
          opacity: 0.2 !important;
        }
      }
    }

    &.grey_dark {
      @media only screen and (min-width: $break-desktop) {
        background: linear-gradient(rgba(52, 70, 84, 0.9), rgba(0, 0, 0, 0.9));
      }

      span {
        background: linear-gradient(rgba(52, 70, 84, 0.9), rgba(0, 0, 0, 0.9));
        height: 100%;
        width: 100%;
        display: block;

        @media only screen and (min-width: $break-desktop) {
          display: none;
        }

        img {
          opacity: 0.2 !important;
        }
      }
    }

    .image-focused-slide-image {
      display: none;

      @media only screen and (min-width: $break-desktop) {
        display: block;
        opacity: 0.2 !important;
        z-index: 1;

        img {
          width: 100%;
        }
      }
    }
  }

  &-content {
    position: unset;
    z-index: 5;

    @media only screen and (min-width: $break-desktop) {
      position: absolute;
      bottom: 0;
      left: $space-triple;
      height: $space-decagon;
      width: 50%;
    }

    h2 {
      margin: 0 $space-double $space-double $space-double;
      font-weight: bold;

      @media only screen and (min-width: $break-desktop) {
        margin: 0;
        font-weight: normal;
      }

      &::before {
        content: "";
      }
    }

    img {
      display: inherit !important;
      margin: 0;
      max-width: 100%;
      width: 100%;
      height: auto;

      @media only screen and (min-width: $break-tablet) {
        display: none;
      }

      @media only screen and (min-width: $break-desktop) {
        display: none !important;
      }
    }

    p {
      margin: $space-double;

      @media only screen and (min-width: $break-desktop) {
        margin: 0;
      }
    }
  }
}
  • URL: /components/raw/image_focused_slide/image_focused_slide.scss
  • Filesystem Path: components/02-pieces/07-image_focused_slide/image_focused_slide.scss
  • Size: 3.8 KB

No notes defined.