Link lists
Link lists are a structured way of displaying links to content with a common theme.
Default
<div class="nsw-container">
<div class="nsw-link-list">
<ul class="nsw-link-list__list">
<li class="nsw-link-list__item" >
<a href="#">Link one
<i class="material-icons nsw-material-icons nsw-link-list__icon" focusable="false" aria-hidden="true">east</i>
</a>
</li>
<li class="nsw-link-list__item" >
<a href="#">Link two
<i class="material-icons nsw-material-icons nsw-link-list__icon" focusable="false" aria-hidden="true">east</i>
</a>
</li>
<li class="nsw-link-list__item" >
<a href="#">Link three
<i class="material-icons nsw-material-icons nsw-link-list__icon" focusable="false" aria-hidden="true">east</i>
</a>
</li>
<li class="nsw-link-list__item" >
<a href="#">Last link which supposed to be very long
<i class="material-icons nsw-material-icons nsw-link-list__icon" focusable="false" aria-hidden="true">east</i>
</a>
</li>
</ul>
</div>
</div>
Link lists show a vertical list of navigation items, providing a quick way for users to navigate a content area.
Navigation items are separated from each other by a fine line, grouping related links, but keeping the individual links separate.
Forward arrows are used to help suggest that each of the list items is a link.
The entire row is clickable.
Link lists let users navigate to related content.
Keep links short and intuitive. Links that are too long (more than 1 line) make it difficult for users to scan.
Use the writing guide to ensure you keep the tone active.
When not to use
Do not use a link list for pages which aren't related as this is likely confuse users.
Do not use a link list in a transactional service or a form.
Do not use as an on page navigation pattern.