Link list

v4.0.0

The link list style is a simple list of vertical or horizontal links used for site navigation. It is used to order information for users.

Released

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

Default

The default link list component removes the normal bullets and spacing associated with a list.

Example

<!--
  Light:  Inherited from .au-body
  Dark:   Inherited from .au-body.au-body--dark
-->
<ul class="au-link-list">
  <li><a href="#">Options</a></li>
  <li><a href="#">Help</a></li>
  <li><a href="#">Sign Out</a></li>
</ul>

import AUlinkList from '@gold.au/link-list';
<AUlinkList items={[
  {
    link: '#',
    text: 'Options',
  },
  {
    link: '#',
    text: 'Help',
  },
  {
    link: '#',
    text: 'Sign Out',
  },
]} />

Inline

The Inline link list is simply a modifier to the default link list which makes the links run inline/horizontally.

Example

<!--
  Light:  Inherited from .au-body
  Dark:   Inherited from .au-body.au-body--dark
-->
<ul class="au-link-list au-link-list--inline">
  <li><a href="#">Options</a></li>
  <li><a href="#">Help</a></li>
  <li><a href="#">Sign Out</a></li>
</ul>

import AUlinkList from '@gold.au/link-list';
<AUlinkList inline items={[
  {
    link: '#',
    text: 'Options',
  },
  {
    link: '#',
    text: 'Help',
  },
  {
    link: '#',
    text: 'Sign Out',
  },
]} />

Related components

Feedback