Link lists

Link lists are a structured way of displaying links to content with a common theme.  

<div class="nsw-container">
    <div class="nsw-link-list">
      <ul class="nsw-link-list__list">
        <li class="nsw-link-list__item">
          <a href="#">
            <span>First home buyer grant and assistance</span>
            <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="#">
            <span>Buying and selling property</span>
            <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="#">
            <span>Building or renovating a home</span>
            <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="#">
            <span>Aged care housing, home living assistance and retirement villages</span>
            <i class="material-icons nsw-material-icons nsw-link-list__icon" focusable="false" aria-hidden="true">east</i>
          </a>
        </li>
      </ul>
    </div>  
</div>

 

Copy

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 to confuse users. 

Do not use a link list in a transactional service or a form. 

Do not use as an on page navigation pattern.