No notes defined.
<div class="infostatGroup">
<div class="infostat">
<div class="infostat__content">
<span class="infostat__stat">93%</span> <span class="infostat__desc">of 2019 SSW graduates</span> <span class="infostat__stat">employed</span> <span class="infostat__desc">after graduation</span>
</div>
</div>
<div class="infostat is-style-secondary">
<div class="infostat__content">
<span class="infostat__desc">Ranked</span>
<span class="infostat__stat infostat__stat--xl">#1</span>
<span class="infostat__desc">Top U.S. Public Universities since 2012</span>
</div>
</div>
<div class="infostat is-style-tertiary">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--xl">93%</span>
<span class="infostat__desc">of 2019 SSW graduates employed after graduation</span>
</div>
</div>
<div class="infostat is-style-grey">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--lg">300+</span> <span class="infostat__desc">Scholarship opportunities for MSW students</span>
</div>
</div>
<div class="infostat is-style-white">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--xl">100</span>
<span class="infostat__desc">graduate programs in the</span>
<span class="infostat__stat infostat__stat">top 10</span>
</div>
</div>
</div>
<div class="infostatGroup">
<div class="infostat">
<div class="infostat__content">
{% if desc_1 %}<span class="infostat__desc">{{ desc_1 }}</span>{% endif %}
{% if num_1 %}<span class="infostat__stat">{{ num_1 }}</span>{% endif %}
{% if desc_2 %}<span class="infostat__desc">{{ desc_2 }}</span>{% endif %}
{% if num_2 %}<span class="infostat__stat">{{ num_2 }}</span>{% endif %}
{% if desc_3 %}<span class="infostat__desc">{{ desc_3 }}</span>{% endif %}
</div>
</div>
<div class="infostat is-style-secondary">
<div class="infostat__content">
<span class="infostat__desc">Ranked</span>
<span class="infostat__stat infostat__stat--xl">#1</span>
<span class="infostat__desc">Top U.S. Public Universities since 2012</span>
</div>
</div>
<div class="infostat is-style-tertiary">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--xl">93%</span>
<span class="infostat__desc">of 2019 SSW graduates employed after graduation</span>
</div>
</div>
<div class="infostat is-style-grey">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--lg">300+</span> <span class="infostat__desc">Scholarship opportunities for MSW students</span></div>
</div>
<div class="infostat is-style-white">
<div class="infostat__content">
<span class="infostat__stat infostat__stat--xl">100</span>
<span class="infostat__desc">graduate programs in the</span>
<span class="infostat__stat infostat__stat">top 10</span>
</div>
</div>
</div>
.infostatGroup {
display: flex;
flex-wrap: wrap;
column-gap: $grid-gutter;
justify-content: space-around;
//@supports (grid-template-columns: repeat(auto-fill, minmax(15em, 1fr))) {
// display: grid;
// grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
//}
> * {
align-self: center;
flex: 15em 1 0;
max-width: 20em;
}
figure {
margin: auto;
}
}
.infostat {
position: relative;
display: flex;
align-self: center;
flex: 1 0 15em;
max-width: 20em;
margin: $spacing-2xs auto;
border-radius: 100%;
border: $border-accent-width solid transparent;
background: $navy;
--color: #{choose-contrast-color-prefer-white($navy)};
color: var(--color, white);
@include typescale('xs');
@media (min-width: 30rem) {
flex: 1 0 40%;
min-width: 35%;
}
@media (min-width: 70rem) {
flex: 1 0 17.5em;
min-width: auto;
}
//@media (min-width: 70rem) {
// @include typescale('sm');
//}
&::before {
content: '';
padding-bottom: 100%;
}
:where(span) {
margin: $spacing-2xs 12.5%;
display: block;
}
&__content {
width: 100%;
min-width: 10em;
align-self: center;
padding: 1em 2em 1em;
margin: auto;
text-align: center;
@include line-height('compact');
}
&__icon {
font-size: 1.5em;
margin-top: -2em;
margin-bottom: $spacing-xs;
@media (min-width: 40rem) {
font-size: 2em;
}
}
&__stat {
font-size: 2em;
font-weight: 200;
margin: 0;
opacity: 0.9;
letter-spacing: -0.05em;
@media (min-width: 40rem) {
font-size: 3em;
}
&--lg {
font-size: 2.5em;
line-height: 1;
@media (min-width: 40rem) {
font-size: 4.5em;
}
}
&--xl {
font-size: 4em;
line-height: 1;
@media (min-width: 40rem) {
font-size: 6em;
}
}
}
&__desc {
color: (--color);
}
}
// Backgrounds
.infostat.is-style-secondary {
background: $secondary;
--color: #{choose-contrast-color-prefer-white($secondary)};
}
.infostat.is-style-tertiary {
background: $tertiary;
--color: #{choose-contrast-color-prefer-white($tertiary)};
}
.infostat.is-style-grey {
background: $grey--light;
--color: #{$text-color};
}
.infostat.is-style-white {
background: $offwhite;
--color: #{$primary};
}
.infostat.is-transparent {
background: transparent;
}
// Gradients
.infostat {
&[class*='has-gradient-style'] {
--gradient-start-color: #{$secondary};
--gradient-end-color: #{$primary};
&::after {
content: '';
position: absolute;
top: -$border-accent-width;
left: -$border-accent-width;
right: -$border-accent-width;
bottom: -$border-accent-width;
padding: $border-accent-width;
border-radius: 100%;
background: linear-gradient(110deg,
var(--gradient-start-color) 25%,
var(--gradient-end-color) 75%,
);
mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.infostat__stat {
background: linear-gradient(110deg,
var(--gradient-start-color) 25%,
var(--gradient-end-color) 75%,
);
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
}
&.has-gradient-style-1 {
--gradient-start-color: #{#AF82B9};
--gradient-end-color: #{#0190A7};
}
&.has-gradient-style-2 {
--gradient-start-color: #{#0169A4};
--gradient-end-color: #{#3AAE72};
}
&.has-gradient-style-3 {
--gradient-start-color: #{#59AB53};
--gradient-end-color: #{#CDAD10};
}
&.has-gradient-style-4 {
--gradient-start-color: #{#CCAE10};
--gradient-end-color: #{#BF4B2D};
}
}