School of Social Work

Slab: BG: Image

Images will be luminosity filtered in-browser, so you don't have to worry about preprocessing the opacity or tint. As these are displayed at a low opacity, you can overly compress and/or use a smaller image than otherwise needed for performance benefits :) 
<div class="slab  slab--bg-img  slab--has-ripples">
    <div class="slab__bg">
        <img class="slab__bgImg  slab__bgImg--tint" src="https://designs.hs.to/ssw/img/banner/3.jpg" />
    </div>
    <div class="slab__inner">
        <div class="wrap">
            <h2 class="slab__title">Slab: BG: Image (with blue image tint)</h2>

            <div class="text-columns">
                <p>Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination.</p>
                <p>We explore the role of cultural competence in mental health care. Is Culture important? Does it influence mental health? This conversation dives into the importance of cultural competence in mental health care. We will delve into how understanding cultural diversity can improve the quality of mental health services and create a more inclusive and effective support system for all.</p>
                <p>As the leading U.S. school of social work, we are uniquely positioned, and obligated by our social work values, to lead the way in responding to these challenges. Michigan will supply the thought leadership to transform our field in the future. We need to consider how social work will play a role in shaping society’s future, and how do we advocate for sustainable social work careers?</p>
            </div>
        </div>
    </div>
</div>

<div class="slab  slab--bg-img  slab--has-ripple-top">
    <div class="slab__bg  slab__bg--black">
        <img class="slab__bgImg  slab__bgImg--tint" src="https://designs.hs.to/ssw/img/banner/7.jpg" />
    </div>
    <div class="slab__inner">
        <div class="wrap">
            <h2 class="slab__title">Slab: BG: Image (with black bg & image tint)</h2>

            <div class="text-columns">
                <p>Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination.</p>
                <p>We explore the role of cultural competence in mental health care. Is Culture important? Does it influence mental health? This conversation dives into the importance of cultural competence in mental health care. We will delve into how understanding cultural diversity can improve the quality of mental health services and create a more inclusive and effective support system for all.</p>
            </div>
        </div>
    </div>
</div>

<div class="slab  slab--bg-img  slab--has-ripple-bottom">
    <div class="slab__bg">
        <img class="slab__bgImg" src="https://designs.hs.to/ssw/img/banner/1.jpg" />
    </div>
    <div class="slab__inner">
        <div class="wrap">
            <div class="tickertape  tickertape--bg-secondary">
                <h2 class="tickertape__highlight">Slab: BG: Image (no tint)</h2>
            </div>

            <header class="tickertape  tickertape--bg-white  intro-xl">
                <p class="tickertape__highlight">
                    Example with a background image without using the tint utility.
                </p>
            </header>

            <header class="tickertape  tickertape--bg-white  intro">
                <p class="tickertape__highlight">
                    You would need to make sure that the content was readable, or on a solid background!
                </p>
            </header>

        </div>
    </div>
</div>
 
<div class="slab  slab--bg-img  slab--has-ripples">
	<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="slab__inner">
		<div class="wrap">
			<h2 class="slab__title">{{ _self.title ? _self.title : 'Slab' }} (with blue image tint)</h2>

			<div class="text-columns">
				<p>{{ placeholderPara1 }}</p>
				<p>{{ placeholderPara2 }}</p>
				<p>{{ placeholderPara3 }}</p>
			</div>
		</div>
	</div>
</div>


<div class="slab  slab--bg-img  slab--has-ripple-top">
	<div class="slab__bg  slab__bg--black">
		<img class="slab__bgImg  slab__bgImg--tint" src="https://designs.hs.to/ssw/img/banner/{{ random(7) }}.jpg" />
	</div>
	<div class="slab__inner">
		<div class="wrap">
			<h2 class="slab__title">{{ _self.title ? _self.title : 'Slab' }} (with black bg & image tint)</h2>

			<div class="text-columns">
				<p>{{ placeholderPara1 }}</p>
				<p>{{ placeholderPara2 }}</p>
			</div>
		</div>
	</div>
</div>


<div class="slab  slab--bg-img  slab--has-ripple-bottom">
	<div class="slab__bg">
		<img class="slab__bgImg" src="https://designs.hs.to/ssw/img/banner/{{ random(7) }}.jpg" />
	</div>
	<div class="slab__inner">
		<div class="wrap">
			<div class="tickertape  tickertape--bg-secondary">
				<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} (no tint)</h2>
			</div>

			{% include '@tickertape' with {
				text: 'Example with a background image without using the tint utility.',
				textElement: 'p',
				background: 'white',
				extraClasses: ['intro-xl']
			} %}

			{% include '@tickertape' with {
				text: 'You would need to make sure that the content was readable, or on a solid background!',
				textElement: 'p',
				background: 'white',
				extraClasses: ['intro']
			} %}
		</div>
	</div>
</div>
  • Content: 
    @use "sass:math";

.slab {
	$wave-height: 3vw;
	$wave-y-padding: calc(math.div($wave-height, 1) + #{$spacing-xl});
	$slab-padding: $spacing-3xl;
	position: relative;
	--bg-top: white;
	--bg-bottom: white;
	margin-bottom: $wave-height;
	@include clearfix;

	&:where(.slab + .slab:not(:where(.slab--has-ripple-top, .slab--has-ripples, [class*='slab--bg-gradient']))) {
		margin-top: -$spacing-xl;
	}

	&:where(.slab + :where(.slab--has-ripple-top, .slab--has-ripples)) {
		margin-top: -#{math.div($wave-height, 2)};
	}

	&:where(.slab--has-ripple-bottom, .slab--has-ripples) + :where(.slab--has-rainbow-ripple) {
		margin-top: -$wave-height*1.75;
	}

	&:where([class*='slab--bg-img'] + :where([class*='slab--bg-img'])) {
		margin-top: -#{math.div($wave-height, 1)};
	}

	&:where(.slab--has-ripple-bottom, .slab--has-ripples) + :where(.slab--has-ripple-top, .slab--has-ripples) {
		margin-top: -$wave-height*2;
	}

	// Elements

	&__title {
		margin-top: 0;
		margin-bottom: $spacing-xl;
	}

	&__inner {
		position: relative;
		padding: $spacing-3xl 0 0;
		z-index: 1;

		&--padded {
			padding: calc($spacing-3xl + 3vmin) 0 3vmin;
		}
	}

	&__bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		background: rgba(mix($blue--bold, $navy--dark, 25%), 1);

		&--black {
			background: black;
		}
	}

	&__bgImg {
		width: 100%;
		height: 100%;
		object-fit: cover;

		&--tint {
			opacity: 0.15;
			mix-blend-mode: luminosity;
		}
	}

	// Layouts
	@at-root {
		[class*='slab--has-overlay'] {
			.slab__inner {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.slab__overlay {
				width: 100%;
				--text-color: white;
				--link-hover-color: white;
			}

			[class*='slab__bg--has-overlay'] {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(100deg,
						rgba(black, 0.65) 20%,
						rgba(black, 0.5) math.div($wrap-width, 2),
						rgba(black, 0)
					);

					@media (min-width: math.div($wrap-width, 1.5)) {
						background: linear-gradient(100deg,
							rgba(black, 0.65) 20%,
							rgba(black, 0.5) 60%,
							rgba(black, 0)
						)
					}
				}
			}
		}
	}

	&--has-overlay-left {
		// add this to the root to align the content (inner)
		.slab__overlay {
			max-width: math.div($wrap-width, 2);
			margin-right: 10%;
			justify-self: flex-start;
		}
	}

	&__bg--has-overlay-left {
		// also add this for an image overlay (if not using a tint)
	}

	&--has-overlay-right {
		// add this to the root to align the content (inner)

		.slab__inner {
			justify-content: flex-end;
		}

		.slab__overlay {
			max-width: math.div($wrap-width, 2);
			justify-self: flex-end;

			@media (min-width: 30rem) {
				margin-left: 20%;
			}
		}

		[class*='slab__bg--has-overlay'] {
			&::before {
				background: linear-gradient(-100deg,
					rgba(black, 0.65) 20%,
					rgba(black, 0.5) math.div($wrap-width, 2),
					rgba(black, 0)
				);

				@media (min-width: math.div($wrap-width, 1.5)) {
					background: linear-gradient(-100deg,
						rgba(black, 0.65) 20%,
						rgba(black, 0.5) 60%,
						rgba(black, 0)
					)
				}
			}
		}
	}

	&__bg--has-overlay-right {
		// also add this for an image overlay (if not using a tint)
	}

	// Backgrounds

	@at-root {
		[class*='slab--bg-gradient'],
		&--has-skyline-mask {
			background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom, var(--bg-top)) min(15rem, 100%));
			color: var(--color);
		}
	}

	&--bg-gradient-grey,
	&--has-skyline-mask {
		--bg-top: #{$grey--lightest};
		--bg-bottom: white;
	}

	&--bg-grey {
		background: $grey--lightest;
	}

	&--bg-offwhite {
		background: $offwhite;
	}

	&--bg-img {
		--color: white;
		--text-color: white;
		--link-hover-color: white;

		.slab__inner {
			color: var(--color);
			min-height: 50vmin;
		}
	}

	// Ripples

	&--has-ripple-top {
		@include mask-ripple-top();

		.slab__inner {
			padding: $wave-y-padding 0 $slab-padding;
		}
	}

	&--has-ripple-bottom {
		@include mask-ripple-bottom();

		.slab__inner {
			padding: $slab-padding 0 $wave-y-padding;
		}
	}

	&--has-ripples {
		@include mask-ripples();

		.slab__inner {
			padding: $wave-y-padding 0;
		}
	}

	&--has-rainbow-ripple {
		&::before {
			content: '';
			position: absolute;
			top: math.div($wave-height, 6);
			display: block;
			aspect-ratio: 170 / 7;
			width: 100%;
			background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-rainbow-thick.svg');
			z-index: 1;

			@media (min-width: 45rem) {
				background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-rainbow.svg');
			}
		}

		.slab__inner {
			padding: calc(math.div($wave-height, 0.75) + #{$spacing-xl}) 0 $slab-padding;
		}
	}

	&--has-skyline-ripple {
		&::before {
			content: '';
			position: absolute;
			top: math.div($wave-height, 6);
			display: block;
			aspect-ratio: 170 / 29;
			width: 100%;
			background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-skyline.svg');
			z-index: 1;

			@media (min-width: 45rem) {
				background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-skyline.svg');
			}
		}

		.slab__inner {
			padding: calc(math.div($wave-height, 0.5) + #{$spacing-xl}) 0 $slab-padding;
		}
	}

	&--has-skyline-mask {
		mask-image: url('#{$assets-directory}/img/mask-skyline.svg'), linear-gradient(black, black);
		mask-position: top, bottom;
		mask-size: 105% $wave-height*2.5, 100% calc(100% - $wave-height*2.5 + 2px); // 2px is nasty but overlaps rounding errors resulting in a gap in mask images
		mask-repeat: no-repeat;

		.slab__inner {
			padding: calc(math.div($wave-height, 0.5) + #{$spacing-xl}) 0 $slab-padding;
		}
	}
}
  • URL: /components/raw/slab/_slabs.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/slab/_slabs.scss
  • Size: 5.7 KB