Tags
v5.0.0Tags are a means of classifying content, typically using keywords or labels. They are added to a web page, an asset or other content to help users search for and find related content quickly and easily.
Released
- History
- View changes
- Install
- npm i @gold.au/tags
- Tags
- Requires
- Contributors
Tags with links
A list of related tags that use links.
Note: An appropriate heading level should be used to introduce the purpose of the list.
Example
<!--
Light: <span class="au-tag">
Dark: <span class="au-tag au-tag--dark">
-->
<h2>Tags:</h2>
<ul class="au-tag-list">
<li><a href="#" class="au-tag">foo</a></li>
<li><a href="#" class="au-tag">bar</a></li>
<li><a href="#" class="au-tag">baz</a></li>
</ul>
/*
Light: <AUtagList tags={[
Dark: <AUtagList dark tags={[
*/
import AUtagList, {AUtag} from '@gold.au/tags';
<AUtagList tags={[
{
link: '#',
text: 'foo',
},
{
link: '#',
text: 'bar',
},
{
link: '#',
text: 'baz',
className: ''
attributeOptions: {
onClick: () => {console.log('clicked')},
}
},
]} />
Tags without links
A list of related tags without links.
Example
<!--
Light: <span class="au-tag">
Dark: <span class="au-tag au-tag--dark">
-->
<h2>Tags:</h2>
<ul class="au-tag-list">
<li><span class="au-tag au-tag--dark">foo</span></li>
<li><span class="au-tag au-tag--dark">bar</span></li>
<li><span class="au-tag au-tag--dark">baz</span></li>
</ul>
/*
Light: <AUtagList tags={[
Dark: <AUtagList dark tags={[
*/
import AUtagList, {AUtag} from '@gold.au/tags';
<AUtagList tags={[
{
text: 'foo',
},
{
text: 'bar',
},
{
text: 'baz',
},
]} />