No notes defined.
<div class="slab slab--bg-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<h2 class="slab__title">Slab: Demo</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-ripples">
<div class="slab__bg slab__bg--black">
<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: Demo</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-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape">
<h2 class="tickertape__highlight">Slab: Demo - this one has quite a long title</h2>
</div>
<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--has-rainbow-ripple">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">Slab: Demo - this one has quite a long title</h2>
</div>
<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-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">Slab: Demo - this one has an extremely long title for the purposes of demonstrating line wraps</h2>
</div>
<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-ripples ">
<div class="slab__bg">
<img class="slab__bgImg slab__bgImg--tint" 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: Demo</h2>
</div>
<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-ripples slab--has-rainbow-ripple">
<div class="slab__bg">
<img class="slab__bgImg slab__bgImg--tint" 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: Demo</h2>
</div>
<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--has-rainbow-ripple">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">Slab: Demo - this one has an extremely long title for the purposes of demonstrating line wraps</h2>
</div>
<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-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape">
<h2 class="tickertape__highlight">Slab: Demo - this one has quite a long title</h2>
</div>
<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--has-skyline-mask">
<div class="slab__inner">
<div class="wrap">
<header class="tickertape">
<h2 class="tickertape__highlight">
Slab: Skyline Mask
</h2>
</header>
<div class="tic">
<div class="tic__title">
<h3 class="text-color-tertiary">TIC: Title, Image, Content!</h3>
<p class="strong">Garry Winogrand | American, 1928-1984</p>
</div>
<figure class="tic__figure">
<img class="tic__img" src="https://designs.hs.to/ssw/img/card/0.jpg" alt="" />
</figure>
<div class="tic__content">
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p><strong>Note that</strong> the content area is contained but <strong>not floated</strong>, so if longer than the image, it will <strong>wrap around the image like this</strong> (resize to smaller screen to see more accentuated), but still be subject to the standard <strong>maximum
line-length</strong>.</p>
<a href="#" class="button button--xs button--tertiary">All SSW artwork</a>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-img slab--has-skyline-mask">
<div class="slab__bg">
<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">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">Slab: Demo with background image</h2>
</div>
<p class="intro">This is feasibly possible as an option, as even, is an image without a tint with the skyline mask. Whether this is a bit over the top though? Who can say.</p>
<div class="grid grid--spaced grid-3-cols">
<div>
<div class="card ">
<div class="card__flag">
January 26, 2019
</div>
<div class="card__flex">
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Community Conversation: The Role of Cultural Competence in Mental Health Care
</a>
</h3>
</div>
</div>
</div>
</div>
<div>
<div class="card ">
<div class="card__flag">
January 3, 2024
</div>
<div class="card__flex">
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
A Collective of Researchers, Teachers and Practitioners
</a>
</h3>
</div>
</div>
</div>
</div>
<div>
<div class="card ">
<div class="card__flag">
November 4, 2020
</div>
<div class="card__flex">
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Community Conversation: The Role of Cultural Competence in Mental Health Care
</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-gradient-grey slab--has-ripple-top">
<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 slab--bg-img slab--has-ripples">
<div class="slab__bg slab__bg--black">
<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' }}</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>
<div class="slab slab--bg-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} - this one has quite a long title</h2>
</div>
<div class="text-columns">
<p>{{ placeholderPara1 }}</p>
<p>{{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
</div>
</div>
<div class="slab slab--has-rainbow-ripple">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} - this one has quite a long title</h2>
</div>
<div class="text-columns">
<p>{{ placeholderPara1 }}</p>
<p>{{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} - this one has an extremely long title for the purposes of demonstrating line wraps</h2>
</div>
<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-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">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }}</h2>
</div>
<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-ripples slab--has-rainbow-ripple">
<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">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }}</h2>
</div>
<div class="text-columns">
<p>{{ placeholderPara1 }}</p>
<p>{{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
</div>
</div>
<div class="slab slab--has-rainbow-ripple">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} - this one has an extremely long title for the purposes of demonstrating line wraps</h2>
</div>
<div class="text-columns">
<p>{{ placeholderPara1 }}</p>
<p>{{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
</div>
</div>
<div class="slab slab--bg-gradient-grey slab--has-ripple-top">
<div class="slab__inner">
<div class="wrap">
<div class="tickertape">
<h2 class="tickertape__highlight">{{ _self.title ? _self.title : 'Slab' }} - this one has quite a long title</h2>
</div>
<div class="text-columns">
<p>{{ placeholderPara1 }}</p>
<p>{{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
</div>
</div>
{% include '@slab--skyline-mask' %}
@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;
}
}
}