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.
Use the modifier class ds-card-set--comparison, wrapped in ds-card-set--comparison-container to create a scrollable list of comparison cards. Use sparingly.
<div class="ds-block ds-block--wide">
<h2 style="text-align: center;">Your study experience</h2>
</div>
<div class="ds-block ds-block--wide">
<p class="ds-small ds--text-align-right swipe-to-view">Swipe to view more →</p>
<div class="ds-block ds-card-set--comparison-container">
<button type="button" class="ds-card-set-scroll-button ds-icon-chevron-left ds-scroll-left"><span class="sr-only">Scroll left</span></button>
<div class="ds-card-set ds-card-set--comparison" data-currentpos="0" data-atlast="false">
<div class="ds-card" style="order: 1">
<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">
<div class="ds-card__status" data-status="closed">2022 applications closed</div>
<h3 class="ds-card__heading"><a href="#">Heading 1</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 3 October 2022</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 2">
<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">
<div class="ds-card__status" data-status="closed">2022 applications closed</div>
<h3 class="ds-card__heading"><a href="#">Heading 2</a></h3>
<p class="ds-card__status-info"><b>Applications closed</b></p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
A really, really, really long item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 3">
<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">
<div class="ds-card__status" data-status="open">Applications now open</div>
<h3 class="ds-card__heading"><a href="#">A really, really, really, really, really, really, really, really long heading</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 12 October 2022</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 4">
<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">
<div class="ds-card__status" data-status="prepare">Early university experience</div>
<h3 class="ds-card__heading"><a href="#">A heading</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 5 April 2023</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 5">
<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">
<div class="ds-card__status" data-status="advance">Early university experience</div>
<h3 class="ds-card__heading"><a href="#">A heading</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 16 August 2022</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 6">
<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">
<div class="ds-card__status" data-status="advance">Early university experience</div>
<h3 class="ds-card__heading"><a href="#">A really, really, really, really long heading</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 16 August 2022</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
<div class="ds-card" style="order: 7">
<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">
<div class="ds-card__status" data-status="advance">Early university experience</div>
<h3 class="ds-card__heading"><a href="#">A heading</a></h3>
<p class="ds-card__status-info"><b>Applications open:</b> 16 August 2022</p>
<button class="ds-card__cta ds-btn-secondary ds-icon-chevron-right">View program details</button>
<div class="ds-card__info">
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="ds-card__checklist">
<h4>Heading</h4>
<ul class="ds-tick-list">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect1trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect1">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect1" class="ds-accordion__content" role="region" aria-labelledby="sect1trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect2trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect2">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect2" class="ds-accordion__content" role="region" aria-labelledby="sect2trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="ds-block ds-block-accordion">
<div class="ds-accordion">
<h3>
<button id="sect3trigger" class="ds-accordion__trigger" aria-expanded="false" aria-controls="sect3">
<span class="ds-accordion__title">
Item
</span>
</h3>
<div id="sect3" class="ds-accordion__content" role="region" aria-labelledby="sect3trigger">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<button class="ds-btn-primary ds-icon-chevron-right">Apply now</button>
<p><span class="ds-card__link-text"><a href="#">A link</a></span></p>
</div>
</div>
</div>
<button type="button" class="ds-card-set-scroll-button ds-icon-chevron-right ds-scroll-right"><span class="sr-only">Scroll right</span></button>
</div>
</div>