dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Tags

v3.1.4

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

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:  <ul class="au-tags">
  Dark:   <ul class="au-tags au-tags--dark">
-->

<h2>Tags:</h2>
<ul class="au-tags">
  <li><a href="#">foo</a></li>
  <li><a href="#">bar</a></li>
  <li><a href="#">baz</a></li>
</ul>
/*
  Light:  <AUtags tags={[
  Dark:   <AUtags dark tags={[
*/

import AUtags from '@gov.au/tags';

<AUtags tags={[
  {
    link: '#',
    text: 'foo',
  },
  {
    link: '#',
    text: 'bar',
  },
  {
    link: '#',
    text: 'baz',
  },
]} />

A list of related tags without links.

Example

<!--
  Light:  <ul class="au-tags">
  Dark:   <ul class="au-tags au-tags--dark">
-->

<h2>Tags:</h2>
<ul class="au-tags">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
/*
  Light:  <AUtags tags={[
  Dark:   <AUtags dark tags={[
*/

import AUtags from '@gov.au/tags';

<AUtags tags={[
  {
    text: 'foo',
  },
  {
    text: 'bar',
  },
  {
    text: 'baz',
  },
]} />