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 class="nsw-link-list__link" href="#">Link one
                <svg class="nsw-icon nsw-link-list__icon" focusable="false" aria-hidden="true">
              <use xlink:href="#arrow"></use>
            </svg>
              </a>
            </li>
            <li class="nsw-link-list__item" >
              <a class="nsw-link-list__link" href="#">Link two
                <svg class="nsw-icon nsw-link-list__icon" focusable="false" aria-hidden="true">
              <use xlink:href="#arrow"></use>
            </svg>
              </a>
            </li>
            <li class="nsw-link-list__item" >
              <a class="nsw-link-list__link" href="#">Link three
                <svg class="nsw-icon nsw-link-list__icon" focusable="false" aria-hidden="true">
              <use xlink:href="#arrow"></use>
            </svg>
              </a>
            </li>
            <li class="nsw-link-list__item" >
              <a class="nsw-link-list__link" href="#">Last link which supposed to be very long
                <svg class="nsw-icon nsw-link-list__icon" focusable="false" aria-hidden="true">
              <use xlink:href="#arrow"></use>
            </svg>
              </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 confuse users. 

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

Do not use as an on page navigation pattern.