dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Keyword list

v3.0.2

The keyword list style helps to emphasise and draw the user's eye to phrases that are repeated in a list.

Released

History
View changes
Install
npm i @gov.au/keyword-list
Tags
Requires
Contributors
  • Julian Fleetwood avatar picture
  • Alexander Sadleir avatar picture
  • Petra Gulicher avatar picture
  • Simon Pascal Klein avatar picture
  • Dominik Wilkowski avatar picture
  • Hannah J. Nicdao avatar picture
  • Gary Broadbent avatar picture
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Trevor Brennan avatar picture

Default

A key and value pair used to display a small subtitle above a larger title.

Example

<!--
  Light:  <ul class="au-link-list au-keyword-list">
  Dark:   <ul class="au-link-list au-keyword-list au-keyword-list--dark">
-->

<ul class="au-keyword-list au-link-list">
  <li>
    <small class="au-keyword-list__small">Department of </small>
    Agriculture and Water Resources
  </li>
  <li>
    <small class="au-keyword-list__small">Department of </small>
    Communications and the Arts
  </li>
</ul>
/*
  Light:  <AUkeywordList repeatedName='repeated text'
  Dark:   <AUkeywordList dark repeatedName='repeated text'
*/

import AUkeywordList from '@gov.au/keyword-list';

<AUkeywordList repeatedName='Department of' items={[
  {
    name: 'Agriculture and Water Resources',
  },
  {
    name: 'Communications and the Arts',
  },
]} />

The keyword list also supports links which span both the key and value pair in the text.

Example

<!--
  Light:  <ul class="au-link-list au-keyword-list">
  Dark:   <ul class="au-link-list au-keyword-list au-keyword-list--dark">
-->

<ul class="au-keyword-list au-link-list">
  <li>
    <a href="#">
      <small class="au-keyword-list__small">Department of </small>
      Agriculture and Water Resources
    </a>
  </li>
  <li>
    <a href="#">
      <small class="au-keyword-list__small">Department of </small>
      Communications and the Arts
    </a>
  </li>
</ul>
/*
  Light:  <AUkeywordList repeatedName='repeated text'
  Dark:   <AUkeywordList dark repeatedName='repeated text'
*/

import AUkeywordList from '@gov.au/keyword-list';

<AUkeywordList repeatedName='Department of' items={[
  {
    link: '#url',
    name: 'Agriculture and Water Resources',
  },
  {
    link: '#url',
    name: 'Communications and the Arts',
  },
]} />