No notes defined.
<p><strong>Useful Note</strong>: Images are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>
<hr />
<div class="zebra">
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=1" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">Welcome Talks</h2>
</header>
<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? Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination.</p>
<p><a href="#" class="button button--outline-secondary">Demo of a button</a></p>
</div>
</div>
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=2" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">A title that's very long that will probably-need to wrap to two lines</h2>
</header>
<p>Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination. 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 class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=3" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">The Resources of U-M, A Top Academic and Research Institution</h2>
</header>
<p>The zebra rows have been set up so they can accept the <code>link--stretched(/-before)</code> utility on a button, turning the entire row into a single linked area if needed</p>
<p><a href="#" class="button button--outline-secondary link--stretched-before">Demo of a row-stretched button</a></p>
</div>
</div>
</div>
<p><strong>Useful Note</strong>: Images are <code>img</code> elements not backgrounds, sized with object fit so they can take advantage of srcset if possible. Add an inline style [x/y] of <code>object-position</code> to set the focal point for the image, eg. <code>style="object-position: 70% 20%"</code> for an image with a focal point towards the top right.</p>
<hr/>
<div class="zebra">
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=1" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">Welcome Talks</h2>
</header>
<p>{{ placeholderPara3 }} {{ placeholderPara1 }}</p>
<p><a href="#" class="button button--outline-secondary">Demo of a button</a></p>
</div>
</div>
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=2" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">A title that's very long that will probably-need to wrap to two lines</h2>
</header>
<p>{{ placeholderPara1 }} {{ placeholderPara2 }}</p>
<p>{{ placeholderPara3 }}</p>
</div>
</div>
<div class="zebra__row">
<figure class="zebra__figure">
<img src="https://picsum.photos/600/400?random=3" style="object-position: 50% 50%" />
</figure>
<div class="zebra__body">
<header class="tickertape">
<h2 class="h4 tickertape__highlight">{{ placeholderTitle2 }}</h2>
</header>
<p>The zebra rows have been set up so they can accept the <code>link--stretched(/-before)</code> utility on a button, turning the entire row into a single linked area if needed</p>
<p><a href="#" class="button button--outline-secondary link--stretched-before">Demo of a row-stretched button</a></p>
</div>
</div>
</div>
.zebra {
margin: $spacing-md 0 $spacing-xl;
&__row {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: hidden; // required for border-radius
background: linear-gradient(to right, $offwhite 50%, white);
border-bottom-left-radius: $border-radius-lg;
@media (min-width: 40rem) {
border-bottom-left-radius: $spacing-3xl;
}
&:where(:nth-child(even)) {
flex-direction: row-reverse;
background: linear-gradient(to left, $offwhite 50%, white);
border-bottom-left-radius: 0;
border-bottom-right-radius: $border-radius-lg;
@media (min-width: 40rem) {
border-bottom-right-radius: $spacing-3xl;
}
}
}
&__figure {
position: relative;
margin: 0;
flex: 1 0 50%;
align-self: stretch;
z-index: 0;
box-sizing: border-box;
display: flex;
align-items: center;
@supports (object-fit: cover) {
align-items: stretch;
}
img {
@supports (object-fit: cover) {
object-fit: cover;
object-position: center center;
height: 100%;
}
}
}
&__body {
flex: 1 1 20em;
margin: $spacing-md 0 $spacing-xl;
min-width: 50%;
box-sizing: border-box;
@include box__padding;
z-index: 0;
> {
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
}
}