Stat

Stat: Horizontal w/ Background

Component Preview
<div class="stat__grid stat--horizontal stat--transform bg--black">
    <div>
        <h2 class="headline stat__title">
            <span class="headline__text">500</span>
            <span class="headline__suffix">%</span>
        </h2>
    </div>
    <p class="stat__description">student-to-faculty ratio</p>
    <p class="stat__content">Among the top 2% of universities worldwide.</p>
</div>

<style>
    .stat__grid.stat--horizontal {
        padding: 3rem;
    }
</style>
  • Content:
    .stat__grid {
      margin: 0;
      width: 100%;
      transition: all 0.55s cubic-bezier(0.95, 1.25, 0.375, 1.15); }
      @media (min-width: 855px) {
        .stat__grid.stat--transform:hover {
          transform: translateY(-10px); } }
      @media (min-width: 855px) {
        .stat__grid:hover .stat__content {
          position: static !important;
          clip: auto;
          height: auto;
          width: auto;
          overflow: auto;
          opacity: 1; } }
    
    .stat {
      position: relative; }
      .stat__title {
        position: relative;
        margin: 0;
        text-transform: uppercase;
        line-height: 1;
        font-family: "Antonio", sans-serif;
        font-weight: bold;
        font-size: 4rem;
        border-bottom: 8px solid #FFCD00;
        padding: 1.875rem 0 0.625rem 0; }
        @media (min-width: 768px) {
          .stat__title {
            padding: 1.05rem 1.875rem 0.625rem 0; } }
        .element--flex-center .stat__title {
          padding: 1.05rem 1.875rem 0.625rem 1.875rem;
          display: block; }
        .bg-pattern--brain .stat__title,
        [class*=bg--white] .stat__title,
        [class*=bg--gray] .stat__title,
        [class*=bg--black] .stat__title {
          border-bottom: 8px solid #FFCD00; }
        .stat--horizontal.bg-pattern--brain-black .stat__title,
        .stat--horizontal[class*=bg--black] .stat__title,
        .bg-pattern--brain-black .stat__title,
        [class*=bg--black] .stat__title {
          color: #FFCD00; }
        .bg-pattern--brain-reversed .stat__title,
        [class*=bg--gold] .stat__title {
          border-bottom: 8px solid white; }
        @media (min-width: 768px) {
          .stat__title {
            font-size: 5rem;
            padding: 0 1.875rem 0.625rem 0; }
            .element--flex-center .stat__title {
              padding: 0 1.875rem 0.625rem; } }
      .stat__content {
        color: #666;
        margin: 0;
        padding: 0;
        line-height: 1.4; }
        @media (min-width: 855px) {
          .stat__content {
            opacity: 0;
            transition: 1s;
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px); } }
        [class*=bg--black] .stat__content,
        .bg-pattern--brain-black .stat__content {
          color: #ccc; }
        .bg-pattern--brain-reversed .stat__content,
        [class*=bg--gold] .stat__content {
          color: #151515; }
        @media (min-width: 855px) {
          .element--flex-center .stat__content {
            margin: 0 10%; } }
      .stat__description {
        position: relative;
        font-family: "Antonio", sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.3rem;
        line-height: 1.2;
        width: 85%;
        margin: 0.625rem 0; }
        .bg-pattern--brain-black .stat__description,
        [class*=bg--black] .stat__description {
          color: white; }
        @media (min-width: 855px) {
          .stat__description {
            font-size: 1.5rem; } }
        @media (min-width: 855px) {
          .grid--3-2 .stat__description {
            width: 60%; } }
    
    @media (min-width: 855px) {
      .grid--3-2 .stat__description {
        width: 60%; } }
    
    .headline__prefix,
    .headline__suffix {
      font-size: 3.5rem;
      vertical-align: middle; }
    
    .headline__prefix {
      margin-right: -15px; }
    
    .headline__suffix {
      margin-left: -15px; }
    
    @media (min-width: 84.375em) {
      .stat--horizontal:not(.element--flex-center).bg-pattern--brain-reversed .stat__content, .stat--horizontal:not(.element--flex-center)[class*=bg--gold] .stat__content,
      .bg-pattern--brain-reversed .stat--horizontal:not(.element--flex-center) .stat__content,
      [class*=bg--gold] .stat--horizontal:not(.element--flex-center) .stat__content {
        border-top: 8px solid #151515; } }
    
    .stat--horizontal:not(.element--flex-center) .stat__title {
      font-size: 3.1rem; }
      @media (min-width: 855px) {
        .stat--horizontal:not(.element--flex-center) .stat__title {
          padding: 0 1.875rem 0.325rem 0;
          border-bottom: none; } }
      @media (min-width: 84.375em) {
        .stat--horizontal:not(.element--flex-center) .stat__title {
          flex-basis: 50%; } }
    
    .stat--horizontal:not(.element--flex-center).element--flex-left {
      flex-flow: wrap; }
    
    .stat--horizontal:not(.element--flex-center) .stat__content {
      font-size: 1.1rem; }
      @media (min-width: 855px) {
        .stat--horizontal:not(.element--flex-center) .stat__content {
          padding-top: .5rem;
          margin-top: .75rem;
          border-top: 8px solid #FFCD00;
          flex-basis: 100%; } }
    
    .stat--horizontal:not(.element--flex-center) .headline__prefix,
    .stat--horizontal:not(.element--flex-center) .headline__suffix {
      font-size: 2.1rem;
      vertical-align: middle; }
    
    .stat--horizontal:not(.element--flex-center) .headline__prefix {
      margin-right: -10px; }
    
    .stat--horizontal:not(.element--flex-center) .headline__suffix {
      margin-left: -10px; }
    
    .stat--horizontal:not(.element--flex-center) .stat__description {
      width: 100%;
      font-size: 1.3rem;
      margin: 0.625rem 0 0; }
      @media (min-width: 855px) {
        .stat--horizontal:not(.element--flex-center) .stat__description {
          flex-basis: 50%;
          margin: 0; } }
    
    .stat__grid.stat--horizontal {
      margin-bottom: 0rem;
      display: flex;
      flex-wrap: wrap;
      cursor: pointer;
      transition: all 0.55s cubic-bezier(0.95, 1.25, 0.375, 1.15); }
      @media (min-width: 855px) {
        .stat__grid.stat--horizontal.stat--transform:hover {
          transform: translateY(-10px) scale(1.02); } }
    
  • URL: /components/raw/stat/stat.css
  • Filesystem Path: src/components/stat/stat.css
  • Size: 5.3 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    .stat__grid {
      margin: 0;
      width: 100%;
      transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
    
      &.stat--transform {
        &:hover {
          @include breakpoint(menu) {
            transform: translateY(-10px);
          }
        }
      }
    
      &:hover .stat__content {
        @include breakpoint(menu) {
          @include element-invisible-off;
          opacity: 1;
        }
      }
    }
    
    .stat {
      position: relative;
    
      &__title {
        position: relative;
        margin: 0;
        text-transform: uppercase;
        line-height: 1;
        font-family: $font-family-caps-bold;
        font-weight: bold;
        font-size: 4rem;
        border-bottom: 8px solid $primary;
        padding: $lg 0 $sm 0;
    
        @include breakpoint(sm) {
          padding: $md $lg $sm 0;
        }
    
        .element--flex-center & {
          padding: $md $lg $sm $lg;
          display: block;
        }
    
        .bg-pattern--brain &,
        [class*=bg--white] &,
        [class*=bg--gray] &,
        [class*=bg--black] & {
          border-bottom: 8px solid $primary;
        }
    
        // @todo This should probably be resolved with https://sass-lang.com/documentation/values/maps#using-maps
        .stat--horizontal.bg-pattern--brain-black &,
        .stat--horizontal[class*=bg--black] &,
        .bg-pattern--brain-black &,
        [class*=bg--black] & {
          color: $primary;
        }
    
        .bg-pattern--brain-reversed &,
        [class*=bg--gold] & {
          border-bottom: 8px solid white;
        }
    
        @include breakpoint(sm) {
          font-size: 5rem;
          padding: 0 $lg $sm 0;
    
          .element--flex-center & {
            padding: 0 $lg $sm;
          }
        }
      }
    
      &__content {
        color: #666;
        margin: 0;
        padding: 0;
        line-height: 1.4;
    
        @include breakpoint(menu) {
          opacity: 0;
          transition: 1s;
          @include element-invisible;
        }
    
        [class*=bg--black] &,
        .bg-pattern--brain-black & {
          color: #ccc;
        }
    
        .bg-pattern--brain-reversed &,
        [class*=bg--gold] & {
          color: $secondary;
        }
    
        .element--flex-center & {
          @include breakpoint(menu) {
            margin: 0 10%;
          }
        }
    
      }
    
      &__description {
        position: relative;
        font-family: $font-family-caps-bold;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.3rem;
        line-height: 1.2;
        width: 85%;
        margin: $sm 0;
    
        .bg-pattern--brain-black &,
        [class*=bg--black] & {
          color: white;
        }
    
        @include breakpoint(menu) {
          font-size: 1.5rem;
        }
    
        .grid--3-2 & {
          @include breakpoint(menu) {
            width: 60%;
          }
        }
      }
    }
    
    .grid--3-2 .stat__description {
      @include breakpoint(menu) {
        width: 60%;
      }
    }
    
    
    .headline__prefix,
    .headline__suffix{
      font-size: 3.5rem;
      vertical-align: middle;
    }
    
    .headline__prefix {
      margin-right: -15px;
    }
    
    .headline__suffix{
      margin-left: -15px;
    }
    
    .stat--horizontal:not(.element--flex-center) {
    
      &.bg-pattern--brain-reversed,
      &[class*=bg--gold],
      .bg-pattern--brain-reversed &,
      [class*=bg--gold] & {
        .stat__content {
          @include breakpoint(container) {
            border-top: 8px solid $secondary;
          }
        }
      }
    
    
      .stat__title {
        font-size: 3.1rem;
    
        @include breakpoint(menu) {
          padding: 0 $lg $xsm 0;
          border-bottom: none;
        }
    
        @include breakpoint(container) {
          flex-basis: 50%;
        }
    
      }
    
      &.element--flex-left {
        flex-flow: wrap;
      }
    
      .stat__content {
        font-size: 1.1rem;
    
        @include breakpoint(menu) {
          padding-top: .5rem;
          margin-top: .75rem;
          border-top: 8px solid $primary;
          flex-basis: 100%;
        }
    
      }
    
      .headline__prefix,
      .headline__suffix{
        font-size: 2.1rem;
        vertical-align: middle;
      }
    
      .headline__prefix {
        margin-right: -10px;
      }
    
      .headline__suffix{
        margin-left: -10px;
      }
    
    
      .stat__description {
        width: 100%;
        font-size: 1.3rem;
        margin: 0.625rem 0 0;
    
        @include breakpoint(menu) {
          flex-basis: 50%;
          margin: 0;
        }
      }
    
    }
    
    .stat__grid.stat--horizontal {
      margin-bottom: 0rem;
      display: flex;
      flex-wrap: wrap;
      cursor: pointer;
      transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
    
      &.stat--transform {
        &:hover {
          @include breakpoint(menu) {
            transform: translateY(-10px) scale(1.02);
          }
        }
      }
    }
    
  • URL: /components/raw/stat/stat.scss
  • Filesystem Path: src/components/stat/stat.scss
  • Size: 4.2 KB