Infostat: Demo: in Slab

WIP

Notes
HTML
View
Assets
Info

No notes defined.


        
        <div class="slab  slab--bg-img  slab--has-ripples  slab--has-overlay  align-full">
    <div class="slab__bg">
        <img class="slab__bgImg  slab__bgImg--tint" src="https://designs.hs.to/ssw/img/banner/6.jpg" />
    </div>
    <div class="wrap">
        <div class="slab__inner">
            <div class="slab__overlay">

                <header class="tickertape">
                    <h2 class="tickertape__highlight">
                        Leading the way
                    </h2>
                </header>

                <div class="infostatGroup">
                    <div class="infostat  has-gradient-style-1  is-transparent">
                        <div class="infostat__content">
                            <div class="infostat__icon  icon" aria-hidden="true">

                                <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="#FFCB05" />
                                </svg>
                            </div>
                            <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  has-gradient-style-2  is-transparent">
                        <div class="infostat__content">
                            <div class="infostat__icon  icon" aria-hidden="true">

                                <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.775 5.4C9.775 4.75652 9.65505 4.11935 9.42199 3.52485C9.18894 2.93036 8.84734 2.39018 8.41671 1.93518C7.98608 1.48017 7.47484 1.11924 6.91219 0.87299C6.34955 0.626742 5.7465 0.5 5.1375 0.5C4.52849 0.5 3.92545 0.626742 3.36281 0.87299C2.80016 1.11924 2.28892 1.48017 1.85829 1.93518C1.42766 2.39018 1.08606 2.93036 0.853009 3.52485C0.619952 4.11935 0.5 4.75652 0.5 5.4C0.5 6.3709 0.770963 7.2739 1.23206 8.0355H1.22676L5.1375 14.5L9.04824 8.0355H9.0436C9.52118 7.24911 9.77503 6.33437 9.775 5.4ZM5.1375 7.5C4.61038 7.5 4.10485 7.27875 3.73212 6.88492C3.3594 6.4911 3.15 5.95695 3.15 5.4C3.15 4.84305 3.3594 4.3089 3.73212 3.91508C4.10485 3.52125 4.61038 3.3 5.1375 3.3C5.66462 3.3 6.17015 3.52125 6.54287 3.91508C6.9156 4.3089 7.125 4.84305 7.125 5.4C7.125 5.95695 6.9156 6.4911 6.54287 6.88492C6.17015 7.27875 5.66462 7.5 5.1375 7.5Z" fill="#FFCB05" />
                                </svg>
                            </div>
                            <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  has-gradient-style-3  is-transparent">
                        <div class="infostat__content">
                            <div class="infostat__icon  icon" aria-hidden="true">

                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.8183 0.879089C1.56375 0.879599 1.31976 0.980947 1.13977 1.16095C0.959768 1.34094 0.85842 1.58493 0.85791 1.83948V12.4501C0.85791 18.8412 6.03787 24.0211 12.4289 24.0211C18.82 24.0211 23.9999 18.8412 23.9999 12.4501C23.9999 6.05905 18.82 0.879089 12.4289 0.879089H1.8183ZM12.589 4.33304C14.7197 4.35315 16.7552 5.21878 18.2478 6.73954C19.7403 8.26031 20.5677 10.3117 20.5479 12.4424C20.5273 14.5728 19.6614 16.6078 18.1407 18.0999C16.62 19.5921 14.569 20.4192 12.4386 20.3994C8.0059 20.356 4.43914 16.7256 4.47964 12.29C4.52303 7.85448 8.15344 4.29061 12.589 4.33304ZM12.5591 6.52189C10.9995 6.50955 9.49863 7.11646 8.38596 8.20943C7.27329 9.30239 6.63966 10.7921 6.62413 12.3518C6.61026 13.9132 7.21695 15.4163 8.31086 16.5307C9.40477 17.645 10.8964 18.2794 12.4579 18.2944C13.2304 18.3014 13.9968 18.1561 14.7131 17.8668C15.4295 17.5776 16.0819 17.15 16.6329 16.6085C17.184 16.067 17.623 15.4222 17.9248 14.711C18.2266 13.9998 18.3853 13.2362 18.3919 12.4636C18.406 10.9036 17.8005 9.40179 16.7084 8.28779C15.6163 7.17379 14.1268 6.53868 12.5668 6.52189H12.5591ZM12.5398 9.42718C13.3304 9.43608 14.0852 9.75805 14.6389 10.3225C15.1925 10.887 15.4997 11.6479 15.4933 12.4385C15.4898 12.83 15.4091 13.2169 15.2559 13.5771C15.1027 13.9373 14.88 14.2638 14.6004 14.5379C14.3209 14.8119 13.9901 15.0282 13.6269 15.1742C13.2637 15.3203 12.8753 15.3933 12.4839 15.3891L12.4858 15.3882C11.6953 15.381 10.9401 15.0601 10.3862 14.4961C9.8323 13.9321 9.52515 13.1712 9.53231 12.3807C9.53948 11.5902 9.86036 10.8349 10.4244 10.2811C10.9884 9.72717 11.7493 9.42002 12.5398 9.42718Z" fill="#FFCB05" />
                                </svg>
                            </div>
                            <span class="infostat__stat infostat__stat--lg">300+</span> <span class="infostat__desc">Scholarship opportunities for MSW students</span>
                        </div>
                    </div>

                    <div class="infostat  has-gradient-style-4  is-transparent">
                        <div class="infostat__content">
                            <div class="infostat__icon  icon" aria-hidden="true">

                                <svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.775 5.4C9.775 4.75652 9.65505 4.11935 9.42199 3.52485C9.18894 2.93036 8.84734 2.39018 8.41671 1.93518C7.98608 1.48017 7.47484 1.11924 6.91219 0.87299C6.34955 0.626742 5.7465 0.5 5.1375 0.5C4.52849 0.5 3.92545 0.626742 3.36281 0.87299C2.80016 1.11924 2.28892 1.48017 1.85829 1.93518C1.42766 2.39018 1.08606 2.93036 0.853009 3.52485C0.619952 4.11935 0.5 4.75652 0.5 5.4C0.5 6.3709 0.770963 7.2739 1.23206 8.0355H1.22676L5.1375 14.5L9.04824 8.0355H9.0436C9.52118 7.24911 9.77503 6.33437 9.775 5.4ZM5.1375 7.5C4.61038 7.5 4.10485 7.27875 3.73212 6.88492C3.3594 6.4911 3.15 5.95695 3.15 5.4C3.15 4.84305 3.3594 4.3089 3.73212 3.91508C4.10485 3.52125 4.61038 3.3 5.1375 3.3C5.66462 3.3 6.17015 3.52125 6.54287 3.91508C6.9156 4.3089 7.125 4.84305 7.125 5.4C7.125 5.95695 6.9156 6.4911 6.54287 6.88492C6.17015 7.27875 5.66462 7.5 5.1375 7.5Z" fill="#FFCB05" />
                                </svg>
                            </div>
                            <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>
        </div>
    </div>
</div>


        <div class="slab  slab--bg-img  slab--has-ripples  slab--has-overlay  align-full">
	<div class="slab__bg">
		<img class="slab__bgImg  slab__bgImg--tint" src="https://designs.hs.to/ssw/img/banner/{{ random(7) }}.jpg"/>
	</div>
	<div class="wrap">
		<div class="slab__inner">
			<div class="slab__overlay">
				{% include '@tickertape' with {
					text: 'Leading the way'
				} %}

				<div class="infostatGroup">
					<div class="infostat  has-gradient-style-1  is-transparent">
						<div class="infostat__content">
							<div class="infostat__icon  icon" aria-hidden="true">
								{% include '@icon' with { icon: 'phone', fill: 'secondary' } %}
							</div>
							<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  has-gradient-style-2  is-transparent">
						<div class="infostat__content">
							<div class="infostat__icon  icon" aria-hidden="true">
								{% include '@icon' with { icon: 'pin', fill: 'secondary' } %}
							</div>
							<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  has-gradient-style-3  is-transparent">
						<div class="infostat__content">
							<div class="infostat__icon  icon" aria-hidden="true">
								{% include '@icon' with { icon: 'social', fill: 'secondary' } %}
							</div>
							<span class="infostat__stat infostat__stat--lg">300+</span> <span class="infostat__desc">Scholarship opportunities for MSW students</span></div>
					</div>

					<div class="infostat  has-gradient-style-4  is-transparent">
						<div class="infostat__content">
							<div class="infostat__icon  icon" aria-hidden="true">
								{% include '@icon' with { icon: 'pin', fill: 'secondary' } %}
							</div>
							<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>
		</div>
	</div>
</div>

File:

Content:


                                .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};
	}
}

URL: /components/raw/infostat/_infostats.scss
Filesystem Path: web/themes/custom/um-ssw/components/infostat/_infostats.scss
Size: 3.6 KB

Handle: @infostat--demo-slab
Variants (4): Default , Gradients , Demo , Demo: in Slab
Preview:
- With layout
- Component only
Filesystem Path: web/themes/custom/um-ssw/components/infostat/infostat--demo-slab.twig
References (2): @tickertape, @icon