Slab: Default

Ready

Notes
HTML
View
Assets
Info

No notes defined.


        
        <div class="slab">
    <div class="slab__inner">
        <div class="wrap">
            <h2 class="slab__title">Slab: Default</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">
    <div class="slab__inner">
        <div class="wrap">
            <h2 class="slab__title">Slab: Default</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">
	<div class="slab__inner">
		<div class="wrap">
			<h2 class="slab__title">{{ _self.title ? _self.title : 'Slab' }}</h2>

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

<div class="slab">
	<div class="slab__inner">
		<div class="wrap">
			<h2 class="slab__title">{{ _self.title ? _self.title : 'Slab' }}</h2>

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

File:

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

Handle: @slab--default
Variants (8): Default , BG: Grey Gradient , BG: Image , w/ Overlay Left , w/ Overlay Right , Rainbow Ripple , Skyline Mask , Demo
Preview:
- With layout
- Component only
Filesystem Path: web/themes/custom/um-ssw/components/slab/slab.twig