No notes defined.
<h2>2 cols, only at desktop - image to the right at smaller widths when card is wider</h2>
<section>
<div class="grid grid-2-cols@desktop">
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/5.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/1.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<h2>2 cols, ASAP - image stays above at smaller widths</h2>
<section>
<div class="grid grid-2-cols">
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/1.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/2.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<h2>4 cols</h2>
<section>
<div class="grid grid-2-cols grid-4-cols">
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Anne Shortname
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/4.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs</a>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/4.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Sum Wunn
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/5.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Dr John L. Ongname-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/1.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<h2>3 cols</h2>
<section>
<div class="grid grid-2-cols grid-3-cols">
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/1.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/1.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>Some content to make this card a different height than the cards it sits next to</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/4.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<h2>Demo of (stretched) link variants, including links in meta</h2>
<section>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/4.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
</div>
</div>
</div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/5.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
Director of MSW Programs and Clinical Associate Professor of Social Work </div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card card--tertiary card--has-small-figure">
<div class="card__flag">
<h3 class="h6 strong">
Benjamin H. Internetiquette-Smith
</h3>
</div>
<div class="card__flex">
<figure class="card__figure card__figure--uncropped">
<img class="card__img" src="https://designs.hs.to/ssw/img/people/5.jpg" alt="" />
</figure>
<div class="card__content">
<div class="h6 card__title">
<a href="" class="pointyLink link--stretched-before">Director of MSW Programs and Clinical Associate Professor of Social Work</a>
</div>
<div class="card__description">
<p>MSW student representatives will be available to share information about the University of Michigan's MSW and PhD programs!</p>
</div>
<div class="card__meta">
<ul class="list--icon-bullets">
<li>
<i class="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="black" />
</svg>
</i>
<a href="mailto:test.email.address@test.com">test.email.address@test.com</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<a href="">Get directions</a>
</li>
<li>
<i class="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="black" />
</svg>
</i>
<span>1 (734) 764-3309</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<h2>2 cols, only at desktop - image to the right at smaller widths when card is wider</h2>
<section>
<div class="grid grid-2-cols@desktop">
<div>
{% include '@card--person-meta' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true,
link: true
} %}
</div>
<div>
{% include '@card--tertiary' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
</div>
</div>
</section>
<h2>2 cols, ASAP - image stays above at smaller widths</h2>
<section>
<div class="grid grid-2-cols">
<div>
{% include '@card--person-meta' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true,
link: true
} %}
</div>
<div>
{% include '@card--tertiary' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
</div>
</div>
</section>
<h2>4 cols</h2>
<section>
<div class="grid grid-2-cols grid-4-cols">
<div>
{% include '@card--person-meta' with {
description: false,
flagText: 'Anne Shortname',
title: 'Director of MSW Programs',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true
} %}
</div>
<div>
{% include '@card--person-meta' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true
} %}
</div>
<div>
{% include '@card--person-meta' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Sum Wunn',
title: 'Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true
} %}
</div>
<div>
{% include '@card--person-meta' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Dr John L. Ongname-Smith',
title: 'Professor of Social Work',
imageUncropped: true,
imageSmall: true,
imageUncropped: true,
imageSmall: true
} %}
</div>
</div>
</section>
<h2>3 cols</h2>
<section>
<div class="grid grid-2-cols grid-3-cols">
<div>
{% include '@card--tertiary' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
</div>
<div>
{% include '@card--tertiary' with {
description: '<p>Some content to make this card a different height than the cards it sits next to</p>',
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
</div>
<div>
{% include '@card--tertiary' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
</div>
</div>
</section>
<h2>Demo of (stretched) link variants, including links in meta</h2>
<section>
{% include '@card--tertiary' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true
} %}
{% include '@card--person-meta' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
link: false
} %}
{% include '@card--person-meta' with {
flagText: 'Benjamin H. Internetiquette-Smith',
title: 'Director of MSW Programs and Clinical Associate Professor of Social Work',
imageUncropped: true,
imageSmall: true,
link: true
} %}
</section>
.card {
$card__internal-spacing: $spacing-xs;
$card__internal-padding: calc($spacing-2xs + $spacing-multiplier);
--accent: #{$secondary};
--accent-contrast: #{choose-contrast-color-prefer-white($secondary)};
position: relative;
margin-bottom: $spacing-xl;
@include typescale('sm');
border-left: $border-accent-width solid;
border-image:
linear-gradient(
to bottom,
var(--accent) 50%,
rgba(white, 0)
) 1 100%;
&__flag {
display: inline-block;
margin-bottom: calc($spacing-2xs + math.div($spacing-multiplier, 4));
background: var(--accent);
color: var(--accent-contrast);
padding: $spacing-4xs $spacing-sm $spacing-4xs $card__internal-padding;
> * {
margin: 0;
}
}
&__flex {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
column-gap: $spacing-sm;
padding-top: calc($spacing-2xs + math.div($spacing-multiplier, 4));
}
&__figure {
flex: 3 99 17.5%;
margin: 0 0 $card__internal-padding;
padding: 0 0 0 $card__internal-padding;
img {
border-bottom-right-radius: $border-radius-lg;
aspect-ratio: 2 / 1;
height: 100%;
width: 100%;
object-fit: cover;
}
&--uncropped {
img {
width: auto;
height: auto;
max-height: 90vh;
margin-left: auto;
margin-right: auto;
aspect-ratio: auto;
}
}
&--shadow {
img {
box-shadow: 0 0 $border-accent-width rgba($grey--borders, 0.75);
}
}
&--icon {
.card__figureFrame {
padding: calc(5% + #{$spacing-lg}) 5%;
border-bottom-right-radius: $border-radius-lg;
}
}
}
&__figureFrame {
background: linear-gradient(to bottom, $offwhite, rgba(white, 0));
padding: 5%;
box-sizing: border-box;
text-align: center;
img, svg {
max-width: 100%;
box-sizing: border-box;
margin: auto;
}
.icon {
font-size: 5em;
svg, path {
fill: var(--svg-fill, $neutral--primary);
}
}
&--primary {
--svg-fill: white;
background: linear-gradient(to bottom, $primary, lighten($primary, 15%));
}
&--secondary {
--svg-fill: white;
background: linear-gradient(to bottom, $secondary, lighten($secondary, 15%));
}
&--tertiary {
--svg-fill: white;
background: linear-gradient(to bottom, $tertiary, lighten($tertiary, 15%));
}
&--neutral {
--svg-fill: white;
background: linear-gradient(to bottom, $neutral--primary, lighten($neutral--primary, 15%));
}
}
&__img {
&--bordered {
border: $border-accent-width solid $offwhite;
}
&--no-radius {
border-radius: 0 !important;
}
}
&__imageGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2.5%;
aspect-ratio: 2 / 1;
img {
aspect-ratio: auto;
width: auto;
height: auto;
}
}
&__imgPlaceholder {
background: $offwhite;
border-bottom-right-radius: $border-radius-lg;
}
&__videoShort {
@include video-container('portrait');
border-bottom-right-radius: $border-radius-lg;
}
&__icon {
flex: 1 99 1em;
margin: 0 0 $card__internal-padding;
display: inline-flex;
align-self: flex-start;
align-items: center;
justify-content: center;
text-align: center;
.icon {
font-size: 1.5em;
background: $neutral--primary;
border-radius: 100%;
padding: 0.35em;
svg, path {
fill: var(--svg-fill, white);
}
&--bg-primary {
background: $primary;
}
&--bg-secondary {
background: $secondary;
}
&--bg-tertiary {
background: $tertiary;
}
}
}
&__content {
flex: 99 1 30rem;
padding: 0 $card__internal-padding $card__internal-padding;
}
&__title {
margin: 0 0 $card__internal-spacing;
font-weight: bold;
&--light {
font-weight: normal;
}
}
&__description,
:where(p) {
margin-bottom: $card__internal-spacing;
}
&__quote {
margin: 0 0 $spacing-md;
@include typescale('md');
}
&__section {
.card__flex {
flex-direction: row;
column-gap: $grid-gutter-large;
}
&Title {
margin: $spacing-lg 0 $spacing-sm;
padding: $spacing-xs 0;
border-top: 1px solid $grey--borders;
border-bottom: 1px solid $grey--borders;
border-image:
linear-gradient(
to right,
#{$grey--borders},
rgba(white, 0)
) 1;
}
}
&__meta {
flex: 99 1 30rem;
align-self: flex-start;
margin-top: $spacing-sm;
margin-bottom: $card__internal-spacing;
@include typescale('xs');
color: var(--text-color, $grey--mid-dark);
a {
color: $grey--mid-dark;
}
> *:where(p, ul, dl) {
margin-bottom: $spacing-sm;
}
> *:last-child {
margin-bottom: 0;
}
}
&__actions {
flex: 1 1 10rem;
margin-top: $spacing-md;
}
.pointyLink {
color: var(--text-color, black);
&:hover,
&:focus {
color: var(--link-hover-color, $tertiary);
}
}
[class*='link--stretched'] {
&:focus {
outline: none;
&::before {
outline: 0.15em solid rgba($grey, 0.75);
outline-offset: $card__internal-spacing;
}
}
}
a:where(:not([class*='link--stretched']):not([class*='button'])) {
position: relative;
z-index: 1;
color: var(--text-color, auto);
}
// Layout Variants
&--has-small-figure {
.card__content {
flex: 10 1 18rem;
}
.card__figure {
flex: 3 99 30%;
}
}
&--has-small-content {
.card__content {
flex: 5 1 10rem;
}
.card__figure {
flex: 3 99 30%;
}
}
&--publication {
> .card__flex {
flex-direction: row;
column-gap: $card__internal-spacing;
}
//.card__content {
// flex: 99 1 18rem;
//}
}
// Theme Variants
&--tertiary {
--accent: #{$tertiary};
--accent-contrast: #{choose-contrast-color-prefer-white($tertiary)};
}
&--bg-gradient-grey {
border-color: transparent;
border-image: none;
background: linear-gradient(to bottom, $grey--lightest, transparent);
padding-top: $spacing-xs;
.card__flag {
display: block;
width: fit-content;
margin-top: -#{$spacing-xs};
margin-left: -#{$border-accent-width};
padding-left: calc($spacing-xs + $spacing-multiplier);
}
}
}