List item

Display a list of results to users surfacing key information.

BETA Component

This component has just been released in BETA, please share your feedback with us on the Community.

Title and copy - with title link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <h3 class="nsw-list-item__title">
          <a href="#">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
    </div>

 

Copy

Title and copy - with block link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <h3 class="nsw-list-item__title">
          <a href="#" class="nsw-list-item__link">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
    </div>

 

Copy

URL - with block link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <h3 class="nsw-list-item__title">
          <a href="#" class="nsw-list-item__link">Creating a Digital Design System for NSW Government</a>
        </h3>
        <div class="nsw-list-item__info">https://www.digital.nsw.gov.au/article/creating-digital-design-system-for-nsw-government</div>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
    </div>

 

Copy

Label and Date - with title link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <div class="nsw-list-item__label">Stories</div>
        <div class="nsw-list-item__info">13 March 2019</div>
        <h3 class="nsw-list-item__title">
          <a href="#">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
    </div>

 

Copy

Multiple categories - with title link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <div class="nsw-list-item__label">Stories</div>
        <h3 class="nsw-list-item__title">
          <a href="#">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
        <div class="nsw-list-item__tags">
          <div class="nsw-tags">
            <span class="nsw-tag">Digital Design System</span>
            <span class="nsw-tag">Transformation</span>
          </div>
        </div>
      </div>
    </div>

 

Copy

Image - with block link

    <div class="nsw-list-item">
      <div class="nsw-list-item__content">
        <div class="nsw-list-item__label">Stories</div>
        <div class="nsw-list-item__info">13 March 2019</div>
        <h3 class="nsw-list-item__title">
          <a href="#" class="nsw-list-item__link">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
      <div class="nsw-list-item__image-area">
        <img src="https://picsum.photos/id/3/400/200" alt="" class="nsw-list-item__image">
      </div>
    </div>

 

Copy

Image on the left - with block link

    <div class="nsw-list-item nsw-list-item--reversed">
      <div class="nsw-list-item__content">
        <div class="nsw-list-item__label">Stories</div>
        <div class="nsw-list-item__info">13 March 2019</div>
        <h3 class="nsw-list-item__title">
          <a href="#" class="nsw-list-item__link">Creating a Digital Design System for NSW Government</a>
        </h3>
        <p class="nsw-list-item__copy">A lot of exciting things are happening across the NSW Government in the digital space, but there’s currently no consistent approach for how we design digital services, reusable…</p>
      </div>
      <div class="nsw-list-item__image-area">
        <img src="https://picsum.photos/id/3/400/200" alt="" class="nsw-list-item__image">
      </div>
    </div>

 

Copy

When displaying results, consider what information is important to the user and display what they require to make an informed decision. This will depend largely on your product or service and your user needs. 

Do: 

  • ensure results are tested and return accurate and relevant results
  • truncate descriptions as appropriate, recommend 150 words
  • use results bar above a listing to indicate the number of results in a list and allow a user to sort by their preferred option
  • use pagination when more than 10 results are returned if there are no results, clearly communicate if there are no matching results and provide suggestions or follow up actions

Content in result listings can include: 

  • Headline - use to identify the title of page or result
  • Description - use to give the user a snapshot to the content
  • URL - use to indicate when content is located on a different site
  • Label/Category - use to indicate the result topic or identifier when this will give greater context over the result type or content. 
  • Date - use when it brings value to the user to know this information and be clear on their relation to the content (for example “Last updated”).
  • Image - use when the image directly represents the listing content or can convey content that text cannot. Avoid using for decorative purposes and hide on smaller screens.

No results

If no results are returned, clearly communicate there are no matching results and allow the user to continue their journey by providing tips to improve or widen their results.

Some ways to do this are by:

  • Suggest alternative keyword if current keyword is not found or a spelling mistake is detected (if possible)
  • Tips to improve or widen the results
  • Contact information or other ways to navigate the site