<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">+</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>
.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); } }
@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);
}
}
}
}