Component Library

Stat 

<div class="statistic">
    <h2 class="statistics__label">Class of 2025 Profile</h2>
    <ul>
        <li>
            <h3 class="statistic__title">X,XXX</h3>
            <div class="statistic__text">Enrolled Students</div>
        </li>
        <li>
            <h3 class="statistic__title">XX%</h3>
            <div class="statistic__text">Out of State or International Students</div>
        </li>
        <li>
            <h3 class="statistic__title">1 in 4</h3>
            <div class="statistic__text">Students are Black, Asian, Hispanic or Multiracial</div>
        </li>
    </ul>
</div>
 
<div class="statistic">
  {% if statistics_label %}<h2 class="statistics__label">{{ statistics_label }}</h2>{% endif %}
  <ul>
    {% for statistic in statistics %}
    <li>
      <h3 class="statistic__title">{{ statistic.statistic_title }}</h3>
      <div class="statistic__text">{{ statistic.statistic_text|raw }}</div>
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "statistics_label": "Class of 2025 Profile",
  "statistics": [
    {
      "statistic_title": "X,XXX",
      "statistic_text": "Enrolled Students"
    },
    {
      "statistic_title": "XX%",
      "statistic_text": "Out of State or International Students"
    },
    {
      "statistic_title": "1 in 4",
      "statistic_text": "Students are Black, Asian, Hispanic or Multiracial"
    }
  ]
}
  • Content: 
    .statistic {
  background-color: $iastate-red;
  padding: rem(65) rem(40);
  position: relative;
  &:before {
    content: "";
    border-bottom: rem(8) solid $iastate-gold;
    top: rem(-4);
    left: 50%;
    margin-left: rem(-28);
    width: rem(56);
    height: rem(8);
    position: absolute;
  }

  ul {
    li {
      margin-bottom: rem(29);
      padding-top: rem(36);
      position: relative;
      &:last-child {
        margin-bottom: 0;
        &:after {
          display: none;
        }
      }
      &:first-child {
        padding-top: 0;
      }
      &:after {
        content: "";
        border-bottom: rem(1) solid $iastate-gold;
        position: absolute;
        left: 50%;
        width: rem(78);
        margin-left: rem(-39);
        bottom: rem(-32);
      }
      &:before {
        display: none;
      }
    }
  }
}

.statistics__label {
  color: $white;
  text-align: center;
  margin: 0 0 rem(15) 0;
  margin-bottom: rem(36);
  padding: 0;
}

.statistic__title {
  color: $iastate-gold;
  font-family: $typeface-serif;
  font-weight: 700;
  text-align: center;
  font-size: rem(55);
  line-height: (68 / 55);
  margin: 0;
  padding: 0;
  &:after {
    display: none;
  }
}

.statistic__text {
  margin: 0;
  text-align: center;
  color: $white;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(18);
  line-height: (30 / 18);

  a {
    color: $white;

    &:hover,
    &:focus {
      color: $yellow;
    }
  }
}
  • URL: /components/raw/stat/_stat.scss
  • Filesystem Path: src/components/stat/_stat.scss
  • Size: 1.5 KB

Stat

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • Contains room for the statistic title (the statistic itelf) and supporting text
  • There is a companion component associated called statistic which outputs the statistic with room for text (and floats the statistic box left or right) - this should typically be used for output globally
  • The custom styles are imported into the index.scss file as @import "../components/stat/stat";