College of Business Style Guide

Stats 

<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">
            {{ circle }}
        </div>
    </div><!-- stat-circle -->
    <div class="stats-description">
        {{ description }}
    </div>
</div><!-- end stats-wrapper -->
 
{
  "circle": "$64k",
  "description": "Average starting salary of 2018 Lehigh Business graduates"
}
  • Content: 
    .stats {
  &-wrapper {
    width: 275px;
    text-align: center;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  &-circle {
    background: url("/images/triangles_1.png") no-repeat $blue_60;
    height: 203px;
    width: 203px;
    -webkit-border-radius: 203px;
    -moz-border-radius: 203px;
    border-radius: 203px;
    position: relative;

    &-text {
      text-align: center;
      font-size: 3.75rem;
      color: $lehigh-brown;
      position: relative;
      top: 30%;
    }
  }

  &-description {
    margin: $space-and-one-half 0 0 0;
    font-size: 1.5rem;
    color: $lehigh-brown;
    width: 80%;
    line-height: 1.2;

    @media only screen and (min-width: $break-desktop) {
      width: inherit;
      line-height: 1;
    }
  }

  &-wrapper {
    &:first-of-type {
      .stats-circle {
        background: url("/images/triangles_1.png") no-repeat $blue_60;
      }
    }

    &:nth-of-type(2) {
      .stats-circle {
        background: url("/images/triangles_2.png") no-repeat $blue_60;
      }
    }

    &:last-of-type {
      .stats-circle {
        background: url("/images/triangles_3.png") no-repeat $blue_60;
      }
    }
  }
}
  • URL: /components/raw/stats/stats.scss
  • Filesystem Path: components/02-pieces/06-stats/stats.scss
  • Size: 1.2 KB

No notes defined.