Link list
v4.0.0The 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
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',
},
]} />