| Feature |
Implementation |
Use |
| Hero |
Component |
Hero components can be added on pages as needed. They can be configured to be light or dark. |
| Hero Search |
Component |
This is a complex component with many aspects and the potential for variablity in structure. |
| Cards |
View Mode |
The Cards display option can be selected by editors when building landing pages. |
| Styles |
WYSIWYG |
The core styles defined by the NSW DDS are available as options in the WYSIWYG editor. |
| Accordion |
Component |
Accordion components can be adde don pages as needed. |
| Blockquote |
Content |
Blockquotes give prominence to a section of text quoted from another source. |
| Breadcrumb |
Component |
A breadcrumb displays a hierarchical series of links to help orient a user. |
| Buttons |
WYSIWYG |
Buttons provide users with the ability to submit an action or follow a link to another location. |
| Callout |
Content |
Callouts are a snippet of information that draws attention to important content. |
| Direction links |
Views |
Direction links show users how to navigate through a page or process. The direction of the arrow provides a visual cue as to the direction, which is supported by the text. |
| Footer |
Component |
The footer displays across the bottom of all NSW Government websites. |
| Forms |
Component |
Forms are used to capture data from users. |
| Global alerts |
Content |
Global alerts display across the top of the entire site to convey important information to the users. |
| Header |
Component |
Displays across the top of all NSW Government sites. |
| In-page nav |
Component |
The in-page nav (or page contents as it is sometimes called) is placed above main content of a page and provides navigation to individual anchor links located in the main content. |
| In-page notifications |
Component |
In-page notifications are used to contextually inform users of important information or status of an interaction. |
| Link lists |
Component |
Link lists are a structured way of displaying links to content with a common theme. |
| Main navigation |
Component |
The main navigation shows users the key areas of your site and helps them to find what they are looking for. |
| Pagination |
Component |
Pagination indicates to a user that a list of items has been split in to multiple pages. |
| Progress indicator |
Component, Form |
Coming soon! The progress indicator component shows the user where they are in a process. The component is design to work across different pages. Multistep forms have also been updated to use this component. |
| Side navigation |
Component |
A vertical list of links that shows the user their current position in the site hierarchy and enables them to navigate to other pages. |
| Social bar |
Content |
The social bar is designed to allow users to share something of interest via social media. |
| Tables |
WYSIWYG |
Tables provide a structured way to display information in rows and columns. This makes it easier for users to scan, sort and compare information. |
| Tabs |
Component |
Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space. |
| Tags |
Content |
A tag is an interactive element similar to a button. Tags contains a keyword or phrase that helps categorises your content. |
