College of Business Style Guide

Stats Slider 

<section class="stats-section" role="region" aria-label="stats section">
    <div class="c-stats-slider default">
        <div class="stats-wrapper">
            <div class="stats-circle">
                <div class="stats-circle-text">
                    $64k
                </div>
            </div><!-- stat-circle -->
            <div class="stats-description">
                Average starting salary of 2018 Lehigh Business graduates
            </div>
        </div><!-- end stats-wrapper -->
        <div class="stats-wrapper">
            <div class="stats-circle">
                <div class="stats-circle-text">
                    23
                </div>
            </div><!-- stat-circle -->
            <div class="stats-description">
                Degree programs, majors and minors for Lehigh Business students
            </div>
        </div><!-- end stats-wrapper -->
        <div class="stats-wrapper">
            <div class="stats-circle">
                <div class="stats-circle-text">
                    80k
                </div>
            </div><!-- stat-circle -->
            <div class="stats-description">
                Lehigh University alumni and networking opportunities
            </div>
        </div><!-- end stats-wrapper -->
    </div>
</section>
 
<section class="stats-section" role="region" aria-label="stats section">
    <div class="c-stats-slider {{ stats_class | default('default') }}">
        {% block cms_override %}
            {% for stats_item in stats_items %}
                {% include "@stats" with {
                    circle: stats_item.circle,
                    description: stats_item.description
                } %}
            {% endfor %}
        {% endblock cms_override %}
    </div>
</section>
 
{
  "stats_items": {
    "1": {
      "circle": "$64k",
      "description": "Average starting salary of 2018 Lehigh Business graduates"
    },
    "2": {
      "circle": "23",
      "description": "Degree programs, majors and minors for Lehigh Business students"
    },
    "3": {
      "circle": "80k",
      "description": "Lehigh University alumni and networking opportunities"
    }
  },
  "stats_class": "default"
}
  • Content: 
    .stats-section {
  padding: $space-quadruple;
  background-color: $white;

  .c-stats-slider {
    @media only screen and (min-width: $break-desktop) {
      .slick-list {
        height: 350px;
        width: 100%;
        margin: 0 auto;
      }
      .slick-dots {
        position: unset;

        li {
          button {
            &::before {
              -webkit-text-stroke: 4px $lehigh-brown;
            }
          }

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

    .slick-track {
      @media only screen and (min-width: $break-desktop) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
      }
    }

    .slick-slide {
      @media only screen and (min-width: $break-desktop) {
        float: unset;
      }

      &:nth-of-type(2) {
        @media only screen and (min-width: $break-desktop) {
          margin: 0 $space-double;
        }
      }
    }

    &.slick-dotted {
      .slick-slide {
        @media only screen and (min-width: $break-desktop) {
          position: relative;
          left: -50px;
          display: flex;
          justify-content: center;
        }
      }
    }

    .slick {
      &-next {
        right: -$space-quadruple;
      }

      &-prev {
        left: -$space-quadruple;
      }
    }

    .slick-next,
    .slick-prev {
      &::before {
        color: $lehigh-brown;
      }
    }
  }
}
  • URL: /components/raw/stats_slider/stats_slider.scss
  • Filesystem Path: components/03-sections/15-stats_slider/stats_slider.scss
  • Size: 1.5 KB

No notes defined.