[{"ID":"core","name":"Core","tags":["typography","accessibility"],"metatags":["color","spacing","typography","mixins","variables","functions"],"description":"Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing.\n","state":"published","url":"../core/"},{"ID":"accordion","name":"Accordion","tags":["interactive"],"metatags":["show","hide","expand","collapse"],"description":"Accordions help users see only the content they need. Accordions expand and collapse sections of content.\n","state":"published","url":"../accordion/"},{"ID":"animate","name":"Animate","tags":["interactive"],"metatags":["animation","movement","speed","transition","transform"],"description":"Animations add visual effects to page elements and help users understand what buttons to click or what to do next in a website.\n","state":"published","url":"../animate/"},{"ID":"body","name":"Body","tags":["typography"],"metatags":["tags","no classes","typography","base"],"description":"Body is a collection of styles that apply to common content elements, these styles help users read page body content more easily.\n","state":"published","url":"../body/"},{"ID":"breadcrumbs","name":"Breadcrumbs","tags":["interactive","navigation"],"metatags":["previous page","next page","trail"],"description":"Breadcrumbs are a navigational aid that display a user's location on a website as a row of links, usually located at the top of the page.\n","state":"published","url":"../breadcrumbs/"},{"ID":"buttons","name":"Buttons","tags":["forms","interactive"],"metatags":["links","cta","submit"],"description":"Buttons make common actions more obvious and help users more easily perform them.\nButtons use labels and sometimes icons to communicate the action that will occur when the user touches them.\n","state":"published","url":"../buttons/"},{"ID":"cta-link","name":"Call to action","tags":["interactive","navigation"],"metatags":["buttons","call to action","cta"],"description":"Call to action links are visually distinct instructions to users designed to provoke an immediate response using verbs such as 'call now' or 'find out more'.\n","state":"published","url":"../cta-link/"},{"ID":"callout","name":"Callout","tags":["alert"],"metatags":["error","success","notification"],"description":"Callouts are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text. They are used to help direct a user's attention to important pieces of information.\n","state":"published","url":"../callout/"},{"ID":"control-input","name":"Control input","tags":["forms","interactive"],"metatags":["checkboxes","checkbox","radio","radios"],"description":"Control inputs help users input one or more selections from multiple options. Our control inputs consist of checkboxes and radio buttons.\n","state":"published","url":"../control-input/"},{"ID":"direction-links","name":"Direction links","tags":["interactive"],"metatags":["next","previous","back to top"],"description":"Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.\n","state":"published","url":"../direction-links/"},{"ID":"footer","name":"Footer","tags":["structure"],"metatags":["page end","bottom"],"description":"Footers help users find what they need after scrolling to the bottom of a page. They provide supplementary information such as copyright, ABN details, contact information, links to other pages within the website, and email and social media links.\n","state":"published","url":"../footer/"},{"ID":"grid-12","name":"Grid 12","tags":["structure"],"metatags":["bootstrap","12 col","grid","layout"],"description":"A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure.\n","state":"published","url":"../grid-12/"},{"ID":"header","name":"Header","tags":["structure"],"metatags":["banner","hero","crest","logo"],"description":"Headers help users understand what the content of the page is about. They appear at the top of a page, above the main body text. They are usually styled as level (H1) headings.\n","state":"published","url":"../header/"},{"ID":"headings","name":"Headings","tags":["typography"],"metatags":["typography","headline","h1","h2","h3","h4","h5","h6"],"description":"Headings help to structure content on a page using relative visual prominence.\n","state":"published","url":"../headings/"},{"ID":"inpage-nav","name":"Inpage nav","tags":["navigation","interactive"],"metatags":["inpage","to this section","share","anchors"],"description":"Inpage nav links helps users scan the contents of a page and navigate to different sections of the page.\n","state":"published","url":"../inpage-nav/"},{"ID":"keyword-list","name":"Keyword list","tags":["typography"],"metatags":["departments","key","value"],"description":"The keyword list style helps to emphasise and draw the user's eye to phrases that are repeated in a list.\n","state":"published","url":"../keyword-list/"},{"ID":"link-list","name":"Link list","tags":["navigation","interactive"],"metatags":["inline list","horizontal list"],"description":"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.\n","state":"published","url":"../link-list/"},{"ID":"page-alerts","name":"Page alerts","tags":["alert"],"metatags":["success","warning","error","status","alert"],"description":"Page alerts are used to notify users of important information or changes on a page, in a way that attracts the user's attention without interrupting the user's task. Typically they appear at the top of a page following a submit action.\n","state":"published","url":"../page-alerts/"},{"ID":"progress-indicator","name":"Progress indicator","tags":["interactive"],"metatags":["TODO","done","in progress","status","indicator","progress"],"description":"Progress indicators provide visual feedback to users to let them know and understand their current context at any given time and be assured that they are progressing through the system.\n","state":"published","url":"../progress-indicator/"},{"ID":"responsive-media","name":"Responsive media","tags":["interactive"],"metatags":["ration","black bars","video","image"],"description":"Responsive media helps create a responsive experience for users viewing images and video on different size devices. Specifically it manages video and slideshow dimensions and aspect ratios for various viewports and widths; that is, small screens, large screens and anything in between.\n","state":"published","url":"../responsive-media/"},{"ID":"select","name":"Select","tags":["forms","interactive"],"metatags":["choice","dropdown","picker"],"description":"Select provides a means to select a single item from a collapsible list. Use of select helps to reduce input errors and screen space. It's commonly used to help users enter a value into a form field.\n","state":"published","url":"../select/"},{"ID":"skip-link","name":"Skip link","tags":["accessibility","navigation","interactive"],"metatags":["a11y","skip to content","anchor"],"description":"Skip links are internal page links that aid navigation around a page. They are detected by screen readers and help users quickly jump to and over content on the page.\n","state":"published","url":"../skip-link/"},{"ID":"tags","name":"Tags","tags":["interactive"],"metatags":["related","badges","badge"],"description":"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.\n","state":"published","url":"../tags/"},{"ID":"text-inputs","name":"Text inputs","tags":["forms","interactive"],"metatags":["text","textarea","input"],"description":"Text inputs are input fields typically used in forms that allow the user to enter text data in a structured format. Text inputs should be accompanied by labels.\n","state":"published","url":"../text-inputs/"},{"ID":"table","name":"Table","tags":["data","structure","content"],"metatags":["tabular","data","row","column"],"description":"Used to display tabular data.","state":"published","url":"../table/"},{"ID":"form","name":"Form","tags":["forms"],"metatags":["forms","interactive"],"description":"A collection of styles for labels, hint text, inline error messages, fieldsets and spacing for form controls.\n","state":"published","url":"../form/"},{"ID":"main-nav","name":"Main nav","tags":["navigation","interactive"],"metatags":["mobile menu","nav","links","hamburger","horizontal"],"description":"A horizontal list of links to key areas on the website. Typically placed in the header.\n","state":"published","url":"../main-nav/"},{"ID":"side-nav","name":"Side nav","tags":["navigation","interactive"],"metatags":["mobile menu","nav","links","vertical"],"description":"A vertical list of links for site navigation typically placed next to the body content.\n","state":"published","url":"../side-nav/"},{"ID":"card","name":"Card","tags":["card","container","content","interactive"],"metatags":["content","card","article","horizontal"],"description":"The card component is used to provide a brief summary of content or a task, often with a link to more detail.\nCards are frequently displayed alongside other cards to group related content or tasks.\n","state":"published","url":"../card/"},{"ID":"searchbox","name":"Search box","tags":["search","filter"],"metatags":["search"],"description":"An input that allows users to enter a keyword to filter content on the website.\n","state":"published","url":"../searchbox/"},{"ID":"pagination","name":"Pagination","tags":["search","filter"],"metatags":["search"],"description":"Pagination allows large amounts of content to be separated into multiple pages.\n","state":"suggestion","url":"../pagination/"}]