Version 3 features
The following table provides some details on how the various "patterns" of the NSW Digitial Design System have been implemented. Where possible we have exposed the features to editors so that they have control over the components.
| Feature | Implementation | Use |
| CSS variables | Theme settings | The new v3 version is driven by CSS variables under the hood. We have exposed the variables in the theme settings, making it easy to experiment and set colours on the fly without the need for a themer. |
| Hero banner | 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. There is full support for vertical and horizontal cards as well as a number of modifiers to configure how they will display. |
| Styles | WYSIWYG | The core styles defined by the NSW DDS are available as options in the WYSIWYG editor. Templates have been added to the WYSIWYG to support callouts and alerts. |
| Accordion | Component | Accordion components can be added on 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 "table of 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. This is configurable and can be turned on for longer pages. |
| 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 | 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. |
Version 2 support
Version 3 of the NSW DDS comes with an updated look and feel for components. These changes have also been back ported into NSW DDS v2.14. Morpht has also updated its v2 implementation of the design system to be up to speed with v 2.14. Our clients which have a site based on v2 can now updgrade to 2.14 to take advantage of this backport and will receive a refresh of the theme to be current with the new design.
Developed by Morpht
Morpht is a Sydney based Drupal agency. We have built sites for a number NSW Government agencies including DPIE, State Archives and NSW Trustee and Guardian. The Convivial for NSW website is a starter site for building sites based on the NSW Design System. We have faithfully implemented the design system and exposed this as editor friendly components. This site is, in effect, the shell for starting builds based on the Drupal content management system. We are availabe for web development projects.
Morpht would like to work with NSW Government Agencies who wish to build Drupal sited base don the NSW Digital Design System. Please get in touch if you are interested.