UIDS - UI Design System

Stat

Stat: Collection

Component Preview 
<div class="stat__wrapper">
    <div class="grid--3-2 grid--3-2-stacked bg-pattern--brain">

        <div class="stat__grid uids-component--center bg-pattern--brain">
            <img class="stat__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/stat-1.jpg" alt="Alt Text">
        </div>

        <div class="stat__grid element--flex-center bg-pattern--brain">
            <div>
                <h2 class="headline stat__title">
                    <span class="headline__text">15:1</span>
                    <span class="headline__suffix">&#65291;</span>
                </h2>
            </div>
            <p class="stat__description">student-to-faculty ratio</p>
        </div>

        <style>
            .stat__grid.stat--horizontal {
                padding: 3rem;
            }
        </style>

        <div class="stat__grid uids-component--center bg-pattern--brain">
            <img class="stat__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/stat-2.jpg" alt="Alt Text">
        </div>

        <div class="stat__grid element--flex-center stat--transform bg-pattern--brain">
            <div>
                <h2 class="headline stat__title">
                    <span class="headline__text">78</span>
                    <span class="headline__suffix">%</span>
                </h2>
            </div>
            <p class="stat__description">of classes have fewer than 30 students</p>
            <p class="stat__content">Engineering 96%<br /> Liberal Arts and Sciences 94%<br /> Nursing 99%<br /> Pharmacy 97%</p>
        </div>

        <style>
            .stat__grid.stat--horizontal {
                padding: 3rem;
            }
        </style>

        <div class="stat__grid uids-component--center bg-pattern--brain">
            <img class="stat__img" src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/stat-3.jpg" alt="Alt Text">
        </div>

        <div class="stat__grid element--flex-center stat--transform bg-pattern--brain">
            <div>
                <h2 class="headline stat__title">
                    <span class="headline__prefix">#</span>
                    <span class="headline__text">34</span>
                </h2>
            </div>
            <p class="stat__description">best public university, u.s. news & world report</p>
            <p class="stat__content">Meet just a few current students and find out why Iowa was the right choice for them.</p>
        </div>

        <style>
            .stat__grid.stat--horizontal {
                padding: 3rem;
            }
        </style>

    </div>
</div>

<style>
    .grid--3-2> :nth-child(1) {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .grid--3-2> :nth-child(2) {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .grid--3-2> :nth-child(3) {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }

    @media (min-width: 768px) {
        .grid--3-2> :nth-child(3) {
            -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
            order: 3;
        }
    }

    .grid--3-2> :nth-child(4) {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    @media (min-width: 768px) {
        .grid--3-2> :nth-child(4) {
            -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
            order: 4;
        }
    }

    .grid--3-2> :nth-child(5) {
        -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
        order: 5;
    }

    .grid--3-2> :nth-child(6) {
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
    }

    .grid--3-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
    }

    @media (min-width: 768px) {
        .grid--3-2 {
            grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
        }
    }

    .grid--3-2.grid--3-2-stacked {
        display: block;
    }

    .grid--3-2.grid--3-2-stacked> :nth-child(3) {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }

    @media (min-width: 84.375em) {
        .grid--3-2.grid--3-2-stacked> :nth-child(3) {
            -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
            order: 3;
        }
    }

    .grid--3-2.grid--3-2-stacked> :nth-child(4) {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    @media (min-width: 84.375em) {
        .grid--3-2.grid--3-2-stacked> :nth-child(4) {
            -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
            order: 4;
        }
    }

    @media (min-width: 600px) {
        .grid--3-2.grid--3-2-stacked {
            display: grid;
        }
    }

    @media (min-width: 768px) {
        .grid--3-2.grid--3-2-stacked {
            grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
        }
    }

    @media (min-width: 84.375em) {
        .grid--3-2.grid--3-2-stacked {
            grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr));
        }
    }

    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {

        .grid--3-2,
        .grid--3-2.grid--3-2-stacked {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .grid--3-2>div {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
            width: 33.3%;
        }
    }
</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: 980px) {
    .stat__grid.stat--transform:hover {
      transform: translateY(-10px); } }
  @media (min-width: 980px) {
    .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", "Antonio-fallback", 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: 980px) {
      .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: 980px) {
      .element--flex-center .stat__content {
        margin: 0 10%; } }
  .stat__description {
    position: relative;
    font-family: "Antonio", "Antonio-fallback", 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: 980px) {
      .stat__description {
        font-size: 1.5rem; } }
    @media (min-width: 980px) {
      .grid--3-2 .stat__description {
        width: 60%; } }

@media (min-width: 980px) {
  .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: 980px) {
    .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: 980px) {
    .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: 980px) {
    .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: 980px) {
    .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(md) {
        transform: translateY(-10px);
      }
    }
  }

  &:hover .stat__content {
    @include breakpoint(md) {
      @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(md) {
      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(md) {
        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(md) {
      font-size: 1.5rem;
    }

    .grid--3-2 & {
      @include breakpoint(md) {
        width: 60%;
      }
    }
  }
}

.grid--3-2 .stat__description {
  @include breakpoint(md) {
    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(page-container) {
        border-top: 8px solid $secondary;
      }
    }
  }


  .stat__title {
    font-size: 3.1rem;

    @include breakpoint(md) {
      padding: 0 $lg $xsm 0;
      border-bottom: none;
    }

    @include breakpoint(page-container) {
      flex-basis: 50%;
    }

  }

  &.element--flex-left {
    flex-flow: wrap;
  }

  .stat__content {
    font-size: 1.1rem;

    @include breakpoint(md) {
      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(md) {
      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(md) {
        transform: translateY(-10px) scale(1.02);
      }
    }
  }
}
  • URL: /components/raw/stat/stat.scss
  • Filesystem Path: src/components/stat/stat.scss
  • Size: 4.2 KB