College of Business Style Guide

Story Slide: Left 

<div class="slide-wrapper left" style="background-image: url('/images/speaker.png');">
    <div class="slide-content">
        <h2>Our Story</h2>
        <h3>Founded on the legacy of Lehigh.<br />Focused on the future of business.</h3>

        <span>
            <img data-lazy="/images/speaker.png" data-srcset="/images/speaker.png" data-sizes="100vw" src="/images/speaker.png" />
        </span>
        <p>Lehigh Business is founded on a legacy of visionary thinking, and focused on cultivating that same enterprising spirit in today's business students. We're turning business majors into business makers, primed to take their positions at the vanguard of the world.</p>
        <p class="read-more">
            <a href="#">Read More</a>
        </p>
    </div><!-- end slide-content -->
</div>
 
<div class="slide-wrapper {{ side }}" style="background-image: url('{{ slide_src_img }}');">
    <div class="slide-content">
        <h2>{{ heading }}</h2>
        <h3>{{ subheading }}</h3>
        {# @todo If the CMS renders this image tag, make sure to inject any
        of these data attributes that are needed for slider functionality. #}
        <span>
            {% 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 %}
        </span>
        {% block cms_override_text %}
            <p>{{ content }}</p>
        {% endblock cms_override_text %}
        <p class="read-more">
            <a href="{{ url }}">{{ link_text }}</a>
        </p>
    </div><!-- end slide-content -->
</div>
 
{
  "side": "left",
  "slide_src_img": "/images/speaker.png",
  "heading": "Our Story",
  "subheading": "Founded on the legacy of Lehigh.<br />Focused on the future of business.",
  "content": "Lehigh Business is founded on a legacy of visionary thinking, and focused on cultivating that same enterprising spirit in today's business students. We're turning business majors into business makers, primed to take their positions at the vanguard of the world.",
  "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.