Link lists are a structured way of displaying links to content with a common theme.
<div class="ds-block">
<p class="ds-link-list__lead-in">Browse by topic:</p>
<ul class="ds-link-list">
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Arts, social sciences and communications</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Education and teaching</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">IT and engineering</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Science</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Business and commerce</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Health</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Law and criminology</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="https://www.latrobe.edu.au/courses/help">Need help deciding?</a>
</li>
</ul>
</div>Use modifier `ds-link-list--2-cols` for two columns.
<div class="ds-block">
<p class="ds-link-list__lead-in">Browse by topic:</p>
<ul class="ds-link-list ds-link-list--2-cols">
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Arts, social sciences and communications</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Education and teaching</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">IT and engineering</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Science</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Business and commerce</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Health</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Law and criminology</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="https://www.latrobe.edu.au/courses/help">Need help deciding?</a>
</li>
</ul>
</div>Use modifier `ds-link-list--image-left` and include image link in style=background-image: url([link]) for image on left of list.
<div class="ds-block">
<ul class="ds-link-list ds-link-list--image-left"
style="background-image: url({{ site.url }}/ltu-components/src/link-list/snippets/images/students-working-together.jpg);">
<li class="ds-link-list__item"><a class="ds-link-list__link"
href="https://www.latrobe.edu.au/courses/master-of-engineering-civil"
data-component="ds-link-list">Master of Engineering (Civil)</a></li>
<li class="ds-link-list__item"><a class="ds-link-list__link"
href="https://www.latrobe.edu.au/courses/master-of-engineering-electronics"
data-component="ds-link-list">Master of Engineering (Electronics)</a></li>
<li class="ds-link-list__item"><a class="ds-link-list__link"
href="https://www.latrobe.edu.au/courses/master-of-engineering-manufacturing"
data-component="ds-link-list">Master of Engineering (Manufacturing)</a></li>
<li class="ds-link-list__item"><a class="ds-link-list__link"
href="https://www.latrobe.edu.au/courses/master-of-telecommunication-and-network-engineering"
data-component="ds-link-list">Master of Telecommunication and Network Engineering</a></li>
</ul>
</div>Link lists are a structured way of displaying links to content with a common theme.
<div class="ds-block">
<ul class="ds-link-list ds-link-list--2-cols ds-link-list--image-left" style="background-image: url({{ site.url }}/ltu-components/src/link-list/snippets/images/LTU_Media_22133.jpg);">
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Arts, social sciences and communications</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Education and teaching</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">IT and engineering</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Science</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Business and commerce</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Health</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="#">Law and criminology</a>
</li>
<li class="ds-link-list__item">
<a class="ds-link-list__link" href="https://www.latrobe.edu.au/courses/help">Need help deciding?</a>
</li>
</ul>
</div>