College of Business Style Guide

Story Slider: Left 

<section class="story-slide lazy slider">
    <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>
</section>
 
<section class="story-slide lazy slider">
    {% block cms_override %}
        {% for slide_img in slide_imgs %}
            {% include "@story_slide--left" with slide_img only %}
        {% endfor %}
    {% endblock cms_override %}
</section>
 
{
  "slide_imgs": [
    {
      "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"
    }
  ]
}
  • Content: 
    .slick {
  &-next,
  &-prev {
    height: inherit;
    width: inherit;
    z-index: 2;

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

    &::before {
      font-family: $font-awesome;
      color: $white;
      font-size: 8rem;
    }
  }

  &-prev {
    left: $space;

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

  &-next {
    right: $space;

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

  &-dots {
    bottom: $space-triple;
    right: $space-quadruple;
    text-align: center;
    width: inherit;
    position: unset;

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

    li {
      margin: 0 10px;

      button {
        &::before {
          font-size: 1.5rem;
          -webkit-text-stroke: 4px $lehigh-brown;
          opacity: 1;
          color: transparent;
          content: '\2022';

          @media only screen and (min-width: $break-desktop) {
            -webkit-text-stroke: 4px $white;
          }
        }
      }

      &.slick-active {
        button {
          &::before {
            opacity: 1;
            color: $lehigh-brown;

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

      &:last-of-type {
        margin: 0 0 0 10px;
      }
    }
  }

  &-dotted {
    &.slick-slider {
      margin: 0;
    }
  }

  &-slide {
    div {
      @media only screen and (min-width: $break-desktop) {
        &:first-of-type {
          //margin-bottom: -4px;
        }
      }
    }
  }
}

.story-slide {
  margin: 0 0 -6px 0 !important;

  @media only screen and (max-width: $break-desktop) {
    margin: $space-triple 0 0 0 !important;
    padding: 0 0 $space-triple 0 !important;
    border-bottom: 1px solid $grey_light;
  }
}

.slick-next,
.slick-prev {
  &:focus,
  &:hover {
    &::before {
      color: $lehigh-brown;
    }
  }
}
  • URL: /components/raw/story_slider/story_slider.scss
  • Filesystem Path: components/03-sections/04-story_slider/story_slider.scss
  • Size: 1.9 KB

No notes defined.