College of Business Style Guide

Story Slide: Default 

<div class="slide-wrapper right">
    <div class="slide-image">
        <img data-srcset="/images/Clougherty.png" data-sizes="100vw" src="/images/Clougherty.png" />
    </div>
    <div class="slide-content">
        <h2>Business Breakthrough</h2>
        <h3>Mary Clougherty</h3>
        <div>
            <img data-srcset="/images/Clougherty.png" data-sizes="100vw" src="/images/Clougherty.png" />
        </div>
        <p><em>Mary Clougherty '21</em> covers the Lehigh University campus the way she covers the basketball court &ndash; completely and intensely. Lehigh Business gives her the freedom and opportunity to cross disciplines, activities and even the world in pursuit of her interests.</p>

        <p class="read-more">
            <a href="#">Read More <span class="sr-only">about Read More</span></a>
        </p>
    </div><!-- end slide-content -->
    <div class="slide-decoration teal"></div>
</div>
 
<div class="slide-wrapper {{ side }}">
    <div class="slide-image">
        {% block cms_override_image %}
            <img data-srcset="{{ slide_src_img }}" data-sizes="100vw" src="{{ slide_src_img }}" />
        {% endblock cms_override_image %}
    </div>
    <div class="slide-content">
        <h2>{{ heading }}</h2>
        {% if subheading|render|trim %}
         <h3>{{ subheading }}</h3>
        {% endif %}
        <div>
            {% block cms_override_image_mobile %}
                <img data-srcset="{{ slide_src_img }}" data-sizes="100vw" src="{{ slide_src_img }}" />
            {% endblock cms_override_image_mobile %}
        </div>
        {% block cms_override_text %}
            <p>{{ content }}</p>
        {% endblock cms_override_text %}
      
      {% if url|render|trim %}
        <p class="read-more">
            {% block cms_override_link %}
              <a href="{{ url }}">Read More <span class="sr-only">about {{ link_text }}</span></a>
            {% endblock cms_override_link %}
        </p>
      {% endif %}
    </div><!-- end slide-content -->
    <div class="slide-decoration {{ color_triangle }}"></div>
</div>
 
{
  "side": "right",
  "slide_src_img": "/images/Clougherty.png",
  "heading": "Business Breakthrough",
  "subheading": "Mary Clougherty",
  "content": "<em>Mary Clougherty '21</em> covers the Lehigh University campus the way she covers the basketball court &ndash; completely and intensely. Lehigh Business gives her the freedom and opportunity to cross disciplines, activities and even the world in pursuit of her interests.",
  "url": "#",
  "link_text": "Read More",
  "color_triangle": "teal"
}
  • Content: 
    .slide {
  &-wrapper {
    position: relative;

    @media only screen and (max-width: $break-desktop) {
      background-image: none !important;
    }

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

    &.left,
    &.On {
      .slide-content {
        position: unset;
        background-color: $white;
        z-index: 3;

        @media only screen and (min-width: $break-desktop) {
          position: absolute;
          top: 15%;
          left: $space-septuple;
          width: 50%;
          padding: $space-triple;
        }
      }
    }

    &.right,
    &.Off {
      .slide-content {
        position: unset;
        background-color: $white;
        z-index: 3;

        @media only screen and (min-width: $break-desktop) {
          position: absolute;
          top: 15%;
          right: $space-septuple;
          width: 50%;
          padding: $space-triple;
        }
      }
    }

    .slide-image {
      display: none;

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

        img {
          width: 100%;
        }
      }
    }
  }

  &-content {
    background-color: $white;
    z-index: 3;

    h2 {
      color: $lehigh-brown;
      font-size: 1.5rem;
      font-weight: bold;
      padding: 0 $space-triple;

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

    h3 {
      color: $grey_dark;
      font-size: 1.1rem;
      font-weight: bold;
      padding: 0 $space-triple;

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

    img {
      @include img;
      margin: $space 0;
      z-index: 1;

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

    p {
      padding: 0 $space-triple;

      &.read-more {
        margin: $space-double 0 0 0;

        a {
          color: $grey_dark;
          font-weight: bold;

          &::before {
            content: "+ "
          }
        }
      }

      @media only screen and (min-width: $break-desktop) {
        padding: 0;
      }
    }
  }
  @media only screen and (min-width: $break-desktop) {
    &-decoration {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;
      overflow: hidden;

      &::before {
        content: '';
        display: block;
        position: relative;
        right: -450px;
        bottom: -450px;
        width: 0;
        height: 0;
        border-style: solid;
        opacity: 0.9;
        border-width: 450px;
        transform: rotate(45deg);
      }

      &.teal {
        &::before {
          border-color: transparent transparent transparent $highlight-teal;
        }
      }

      &.red {
        &::before {
          border-color: transparent transparent transparent $red;
        }
      }

      &.gold {
        &::before {
          border-color: transparent transparent transparent $gold;
        }
      }

      &.grey_dark {
        &::before {
          border-color: transparent transparent transparent $grey_dark;
        }
      }
    }
  }
}

.slick-initialized {
  .slick-slide {
    max-height: 1000px;
  }
}
  • URL: /components/raw/story_slide/story_slide.scss
  • Filesystem Path: components/02-pieces/05-story_slide/story_slide.scss
  • Size: 3.3 KB

No notes defined.