The card component is used to provide a brief summary of content or a task, usually with a link to more detail.
Cards are usually displayed alongside other cards in a card set to group related content or tasks.
<div class="ds-block">
<div class="ds-card-set">
<!-- ds-card -->
<div class="ds-card">
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
</div>
</div>
</div>
</div><div class="ds-block">
<div class="ds-card-set">
<!-- ds-card with image -->
<div class="ds-card">
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
</div>
</div>
</div>
</div>Cards are usually linked. Modifier ds-card--linked required. Anchor tag with class ds-card__link and text equal to Cart title or CTA tag line placed inside the card. Cards are NOT wrapped in anchor tag so as to avoid screen readers uncessarily reading out the entire card contents.
<div class="ds-block">
<div class="ds-card-set">
<div href="" class="ds-card ds-card--linked">
<a href="http://example.org" class="ds-card__link">Card title</a>
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
</div>
</div>
<div href="" class="ds-card ds-card--linked">
<a href="http://example.org" class="ds-card__link">Card title</a>
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
<p><span class="ds-card__link-text">Optional CTA tag line</span></p>
</div>
</div>
</div>
</div><div class="ds-block">
<div class="ds-card-set">
<div href="" class="ds-card ds-card--linked">
<a href="http://example.org" class="ds-card__link">Card title</a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
</div>
</div>
<div href="" class="ds-card ds-card--linked">
<a href="http://example.org" class="ds-card__link">Card title</a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://via.placeholder.com/600x400);"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Card title</h3>
<p>Additional text relating to the card.</p>
<p><span class="ds-card__link-text">Optional CTA tag line</span></p>
</div>
</div>
</div>
</div>Card sets are layout cards in a 4 columns grid by default.
<div class="ds-block">
<h2 style="text-align: center;">Your study experience</h2>
</div>
<div class="ds-block ds-block--wide">
<div class="ds-card-set">
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/scholarships" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Science-study-in-the-lab.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Scholarships</h3>
<p>We offer a range of scholarships to help you succeed. Find the right one for you.</p>
<p><span class="ds-card__link-text">Find your scholarship</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/study/apply" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Student-support-and-resources.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">How to apply</h3>
<p>Find the right way to apply for study at La Trobe.</p>
<p><span class="ds-card__link-text">Get started</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/study/apply/pathways" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Campuses-at-La-Trobe.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Pathways</h3>
<p>If you don't meet the requirements of your preferred course then a pathway option might be the answer.</p>
<p><span class="ds-card__link-text">Explore your options</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/students/opportunities" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Students-walking-through-the-halls.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Career readiness</h3>
<p>Develop the skills and experience employers want with placements and practicals.</p>
<p><span class="ds-card__link-text" style="display: inline-block;">Unlock career opportunities</span></p>
</div>
</div>
</div>
</div>used modifier class ds-card-set--3max for a 3 column layout
<div class="ds-block">
<h2 style="text-align: center;">Your study experience</h2>
</div>
<div class="ds-block ds-block--wide">
<div class="ds-card-set ds-card-set--3max">
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/scholarships" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Science-study-in-the-lab.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Scholarships</h3>
<p>We offer a range of scholarships to help you succeed. Find the right one for you.</p>
<p><span class="ds-card__link-text">Find your scholarship</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/study/apply" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Student-support-and-resources.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">How to apply</h3>
<p>Find the right way to apply for study at La Trobe.</p>
<p><span class="ds-card__link-text">Get started</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/study/apply/pathways" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Campuses-at-La-Trobe.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Pathways</h3>
<p>If you don't meet the requirements of your preferred course then a pathway option might be the answer.</p>
<p><span class="ds-card__link-text">Explore your options</span></p>
</div>
</div>
</div>
</div>used modifier class ds-card-set--expand, to make cards in a set with only 2 cards expand to fill block width. If only one card, card will will be centered.
<div class="ds-block">
<h2 style="text-align: center;">Your study experience</h2>
<p style="text-align: center;"></p>
</div>
<div class="ds-block">
<div class="ds-card-set ds-card-set--expand">
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/scholarships" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Science-study-in-the-lab.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">Scholarships</h3>
<p>We offer a range of scholarships to help you succeed. Find the right one for you.</p>
<p><span class="ds-card__link-text">Find your scholarship</span></p>
</div>
</div>
<div href="" class="ds-card ds-card--linked" style="order: ">
<a href="https://www.latrobe.edu.au/study/apply" class="ds-card__link"></a>
<header class="ds-card__header">
<div class="ds-card__image" style="background-image: url(https://www.latrobe.edu.au/study/images/images-undergraduate/Student-support-and-resources.jpg/preview.jpg)"></div>
</header>
<div class="ds-card__body">
<h3 class="ds-card__heading">How to apply</h3>
<p>Find the right way to apply for study at La Trobe.</p>
<p><span class="ds-card__link-text">Get started</span></p>
</div>
</div>
</div>
</div>Dev note: Further test pages here.