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

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

Feedback