No notes defined.
<section>
<header class="tickertape">
<h2 class="tickertape__highlight">
Card: Figure Icon - FigureFrame background variants
</h2>
</header>
<div class="grid-3-cols">
<div>
<div class="card">
<div class="card__flex">
<figure class="card__figure card__figure--icon" aria-hidden="true">
<div class="card__figureFrame card__figureFrame--primary">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="neutral-primary" />
</svg>
</i>
</div>
</figure>
<div class="card__content">
<div class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Primary
</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">
<div class="card__flex">
<figure class="card__figure card__figure--icon" aria-hidden="true">
<div class="card__figureFrame card__figureFrame--secondary">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="neutral-primary" />
</svg>
</i>
</div>
</figure>
<div class="card__content">
<div class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Secondary
</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">
<div class="card__flex">
<figure class="card__figure card__figure--icon" aria-hidden="true">
<div class="card__figureFrame card__figureFrame--tertiary">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="neutral-primary" />
</svg>
</i>
</div>
</figure>
<div class="card__content">
<div class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Tertiary
</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">
<div class="card__flex">
<figure class="card__figure card__figure--icon" aria-hidden="true">
<div class="card__figureFrame card__figureFrame--neutral">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="neutral-primary" />
</svg>
</i>
</div>
</figure>
<div class="card__content">
<div class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Neutral
</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">
<div class="card__flex">
<figure class="card__figure card__figure--icon" aria-hidden="true">
<div class="card__figureFrame">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="neutral-primary" />
</svg>
</i>
</div>
</figure>
<div class="card__content">
<div class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Default
</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>
<section>
<header class="tickertape">
<h2 class="tickertape__highlight">
Card: Icon - icon background variants
</h2>
</header>
<div class="grid grid-2-cols@mobile-wide grid-3-cols@tablet-wide grid-4-cols@desktop">
<div>
<div class="card card--has-small-content">
<div class="card__flex">
<figure class="card__icon" aria-hidden="true">
<i class="icon icon--bg-primary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="white" />
</svg>
</i>
</figure>
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Primary
</a>
</h3>
</div>
</div>
</div>
</div>
<div>
<div class="card card--has-small-content">
<div class="card__flex">
<figure class="card__icon" aria-hidden="true">
<i class="icon icon--bg-secondary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="white" />
</svg>
</i>
</figure>
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Secondary
</a>
</h3>
</div>
</div>
</div>
</div>
<div>
<div class="card card--has-small-content">
<div class="card__flex">
<figure class="card__icon" aria-hidden="true">
<i class="icon icon--bg-tertiary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="white" />
</svg>
</i>
</figure>
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Tertiary
</a>
</h3>
</div>
</div>
</div>
</div>
<div>
<div class="card card--has-small-content">
<div class="card__flex">
<figure class="card__icon" aria-hidden="true">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.92308 12.0039C8.92308 12.1865 8.86894 12.3649 8.76751 12.5167C8.66608 12.6685 8.52192 12.7868 8.35325 12.8567C8.18458 12.9266 7.99898 12.9449 7.81992 12.9092C7.64086 12.8736 7.47638 12.7857 7.34729 12.6566C7.21819 12.5275 7.13028 12.363 7.09466 12.184C7.05904 12.0049 7.07732 11.8193 7.14719 11.6507C7.21706 11.482 7.33537 11.3378 7.48717 11.2364C7.63897 11.135 7.81743 11.0808 8 11.0808C8.24482 11.0808 8.4796 11.1781 8.65271 11.3512C8.82583 11.5243 8.92308 11.7591 8.92308 12.0039ZM8 3.69621C6.30308 3.69621 4.92308 4.93852 4.92308 6.46544V6.77314C4.92308 6.93635 4.98791 7.09287 5.10332 7.20828C5.21873 7.32368 5.37525 7.38852 5.53846 7.38852C5.70167 7.38852 5.8582 7.32368 5.97361 7.20828C6.08901 7.09287 6.15385 6.93635 6.15385 6.77314V6.46544C6.15385 5.61929 6.98231 4.92698 8 4.92698C9.01769 4.92698 9.84615 5.61929 9.84615 6.46544C9.84615 7.3116 9.01769 8.0039 8 8.0039C7.83679 8.0039 7.68027 8.06874 7.56486 8.18415C7.44945 8.29955 7.38462 8.45608 7.38462 8.61929V9.23467C7.38462 9.39788 7.44945 9.55441 7.56486 9.66982C7.68027 9.78522 7.83679 9.85006 8 9.85006C8.16321 9.85006 8.31974 9.78522 8.43514 9.66982C8.55055 9.55441 8.61539 9.39788 8.61539 9.23467V9.17929C10.0185 8.9216 11.0769 7.80237 11.0769 6.46544C11.0769 4.93852 9.69692 3.69621 8 3.69621ZM16 8.0039C16 9.58615 15.5308 11.1329 14.6518 12.4485C13.7727 13.7641 12.5233 14.7894 11.0615 15.3949C9.59966 16.0004 7.99113 16.1589 6.43928 15.8502C4.88743 15.5415 3.46197 14.7796 2.34315 13.6608C1.22433 12.5419 0.462403 11.1165 0.153721 9.56463C-0.15496 8.01278 0.00346628 6.40425 0.608967 4.94244C1.21447 3.48063 2.23985 2.2312 3.55544 1.35215C4.87103 0.473098 6.41775 0.00390625 8 0.00390625C10.121 0.00614611 12.1546 0.84972 13.6544 2.34953C15.1542 3.84933 15.9978 5.88286 16 8.0039ZM14.7692 8.0039C14.7692 6.66508 14.3722 5.35632 13.6284 4.24312C12.8846 3.12993 11.8274 2.2623 10.5905 1.74995C9.35356 1.23761 7.99249 1.10355 6.67939 1.36474C5.36629 1.62594 4.16013 2.27064 3.21343 3.21734C2.26674 4.16403 1.62203 5.37019 1.36084 6.68329C1.09965 7.9964 1.2337 9.35746 1.74605 10.5944C2.2584 11.8313 3.12603 12.8885 4.23922 13.6323C5.35241 14.3761 6.66117 14.7731 8 14.7731C9.79469 14.7711 11.5153 14.0573 12.7843 12.7882C14.0534 11.5192 14.7672 9.79859 14.7692 8.0039Z" fill="white" />
</svg>
</i>
</figure>
<div class="card__content">
<h3 class="h5 card__title">
<a href="" class="pointyLink link--stretched-before">
Default
</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
{% include '@tickertape' with {
text: 'Card: Figure Icon - FigureFrame background variants'
} %}
<div class="grid-3-cols">
<div>
{% include '@card--figure-icon' with {
flagText: false,
title: 'Primary',
link: '#',
icon: 'question',
figureFrameBackground: 'primary'
} %}
</div>
<div>
{% include '@card--figure-icon' with {
flagText: false,
title: 'Secondary',
link: '#',
icon: 'question',
figureFrameBackground: 'secondary'
} %}
</div>
<div>
{% include '@card--figure-icon' with {
flagText: false,
title: 'Tertiary',
link: '#',
icon: 'question',
figureFrameBackground: 'tertiary'
} %}
</div>
<div>
{% include '@card--figure-icon' with {
flagText: false,
title: 'Neutral',
link: '#',
icon: 'question',
figureFrameBackground: 'neutral'
} %}
</div>
<div>
{% include '@card--figure-icon' with {
flagText: false,
title: 'Default',
link: '#',
icon: 'question',
} %}
</div>
</div>
</section>
<section>
{% include '@tickertape' with {
text: 'Card: Icon - icon background variants'
} %}
<div class="grid grid-2-cols@mobile-wide grid-3-cols@tablet-wide grid-4-cols@desktop">
<div>
{% include '@card--icon' with {
title: 'Primary',
link: '#',
icon: 'question',
iconBackground: 'primary',
} %}
</div>
<div>
{% include '@card--icon' with {
title: 'Secondary',
link: '#',
icon: 'question',
iconBackground: 'secondary',
} %}
</div>
<div>
{% include '@card--icon' with {
title: 'Tertiary',
link: '#',
icon: 'question',
iconBackground: 'tertiary',
} %}
</div>
<div>
{% include '@card--icon' with {
title: 'Default',
link: '#',
icon: 'question',
iconBackground: false,
} %}
</div>
</div>
</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);
}
}
}