Keyword list

v4.0.0

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 @gold.au/keyword-list
Tags
Requires
Contributors
  • Alexander Sadleir avatar picture
  • Hannah J. Nicdao avatar picture
  • Patrick De Young avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Trevor Brennan avatar picture
  • Alex Page avatar picture
  • Petra Gulicher avatar picture

React Usage

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

<AUkeywordList
  repeatedName='Department of'
  items={[
    {
      link: 'http://www.agriculture.gov.au/',
      name: 'Agriculture and Water Resources',
    },
    {
      link: 'https://www.communications.gov.au/',
      name: 'Communications and the Arts',
      li: {
        className: 'li-wrapping-class',
      },
    },
    {
      link: 'https://www.finance.gov.au/',
      name: 'Finance',
    },
  ]}
/>

Props

Prop name Type Description
repeatedName string Provide the aria label
items object The text That is repeated in each item
linkComponent string The component used for the child links, optional
items[0].link string The link of this item
items[0].name string The name of the item
items[0].li object An object that will be spread onto the <li> tag, optional
items[0].linkComponent string The component used for the link, optional
dark boolean A dark variation of the component

All other props are spread into the component

Exports

Name Type Description
AUkeywordList default The keyword list component

node_modules import

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

pancake import

import AUkeywordList from './keyword-list';

Feedback