Discover all the Agriculture Design System components here including visual examples, component props, and live code examples.

Brand

Content

Forms

Foundations

Layout

Navigation

A11y

A colour palette and logo set for Agriculture

AG branding

An accordion lets users show and hide sections of related content.

Accordion

The app layout provides a consistent way for users to navigate around a web application and access their account settings.

App layout

Autocomplete, also known as type-ahead, uses predictive text to help select options as a user types.

Autocomplete

User avatars help to quickly identify people in the system.

Avatar

Breadcrumbs show a user their location on a website so they can easily navigate to find what they need.

Breadcrumbs

A button communicates an action to a user and indicates what will happen next.

Button

Call to action links are interactive UI cues that direct users to other pages.

Call to action

Callouts are an excerpt of text used to draw attention to important or interesting information. They should not be confused with Page alerts.

Callout

Also known as Tiles, Cards are a layout component that link to more information on a topic.

Card

Checkboxes allow users to select one or more options from a list.

Checkbox

Columns allows you to create a responsive layout grid.

Columns

This component allows users to select from a list of options. It’s especially useful when there are many options to choose from.

Combobox

A collection of simple layout containers to wrap content.

Control groups allow related checkboxes and radios to be grouped together.

Control group

Core includes a range of styles, variables and code that form the foundations of how the Design System works, including colour, typography and spacing.

Core

The Date picker component allows users to select a single date via a calendar or text input.

Date picker

The Date range picker component allows users to select a range of dates via a calendar or text input.

Date range picker

The Details component hides non-essential content unless a user explicitly chooses to view it.

Details

Direction links are links which communicate flow to other parts of a page or process.

Direction link

A horizontal rule that separates blocks of content.

Divider

A drawer is a panel that slides in from the right side of the screen. The Drawer is overlayed on top of the main area of the page to capture the user’s attention while keeping the context of the current task.

Drawer

A dropdown menu displays a list of actions when a trigger is pressed.

Dropdown menu

The field package exposes the elements around form inputs, and an API to compose them.

Field

The Fieldset component is used to group related form fields and includes a descriptive legend to label the group, helping users understand the relationship between these form fields.

Fieldset

The File input component allows users to attach one file to a form field by browsing their device.

File input

The File upload component allows users to attach multiple files to a form via drag-and-drop or by browsing the device.

File upload

Filter sidebar is used for displaying filtering options in a search result or catalogue page.

Filter sidebar

A CSS flexbox version of the Box component.

Flex

Footers live at the bottom of a page and help users find supplementary information relevant to their needs.

Footer

The Form stack component is used to apply consistent vertical spacing between elements in forms.

Form stack

Global alerts display prominent service or system wide messages at the top of the screen.

Global alert

The Grouped fields component allows two closely related form inputs to be grouped together.

Grouped fields

The Header is the masthead of our applications. It incorporates the Department of Agriculture, Fisheries and Forestry Coat of Arms logo and provides a user context on where they are.

Header

Headings are a typographic component that create semantic structure, allow users to scan content by creating relative visual prominence and support search engine optimisation.

Heading

The hero banner sits at the top of the page under the Main nav and is used to grab a user’s attention.

Hero banner

The Agriculture Design System supports the use of universal system icons. The icon component is used to apply our set of universal icons to more complex components of the system.

Icon

Indicator dots are small, decorative, badge-like indicators used to call attention to an item, such as an unread message.

Indicator dot

Also known as Page contents, Inpage nav links help users scan page contents and quickly navigate to different sections.

Inpage nav

Link list is a simple set of vertical or horizontal links used for site navigation and to order information for users.

Link list

Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.

List

Loading indicators inform users their action is being processed.

Loading

The main nav is the primary way users navigate the user interface. It is consistently visible throughout the service.

Main nav

A modal is a dialog box that appears above the parent page and provides advance notice of a destructive action and consequence. They tell users a decision is needed.

Modal

Notification badges are visual indicators for numeric values.

Notification badge

Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.

Page alert

Pagination separates large amounts of content into separate pages, which helps reduce cognitive load.

Pagination

The password input component allows users to securely enter a password. The text is obscured by default, but can be revealed by pressing the ‘Show password’ checkbox.

Password input

Progress indicators show users the number of steps in a task, where they are up to in the process and how much is left to do.

Progress indicator

Provides typographic defaults for vanilla HTML.

Prose

Radios allow users to select one option from a list.

Radio

An input that allows users to enter a keyword to search a website for specific content.

Search box

Search input enables users to enter a word or phrase to find relevant content.

Search input

Section alerts are non-disruptive notifications that provide Success, Error and Warning messages about a state change in a section of a page.

Section alert

Select provides a way for users to choose one item from a collapsible list. It helps reduce input errors and screen space.

Select

A vertical list of links used for site navigation, typically placed beside body content.

Side nav

Skeletons are visual placeholders for information while data is still loading.

Skeleton

Skip links are internal page links that aid navigation around a page. They are accessible by screen reader and keyboard users, and help users quickly jump to and over content on the page.

Skip link

Stack is a primitive layout component used to distribute items vertically with even spacing.

Stack

Status badges are visual indicators used to highlight an item’s status for quick recognition.

Status badge

A horizontal list of links typically placed between the main navigation and page content.

Sub nav

Summary list is used to summarise information such as a user’s responses at the end of a form.

Summary list

A Switch allows a user to immediately toggle interface settings.

Switch

Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.

Table

Tabs are used to categorise content into seperate views. A user can navigate between each section of content, displaying one section at a time.

Tabs

Tags classify content using keywords or labels. They are added to a web page, asset or content to help users search for related content quickly and easily.

Task list

A primitive typographic component for constrained text styles.

Text

This component allows users to enter free-form text.

Text input

A typographic component for creating hyperlinks.

Text link

A text area lets users enter long-form, plain text over multiple lines and is commonly found in forms.

Textarea

The Time input component allows users to enter a time in multiple formats.

Components

All Components (74 items)