Convivial for NSW

NSW Digital Design System for Drupal 9.

Convivial for NSW DDS overview

Aim

Build a starter site which will deliver best of breed tools and design for the NSW DDS, delivering value quickly to NSW government agencies.

Approach

Implement the NSW DDS on top of Drupal 9 and build a component driven system which provides flexibility in sitebuilding and expressiveness to editors.

Outcome

A platform which has been used by many agencies including DPIE and Trustee and Guardian.

Convivial for NSW DDS and Drupal

Convivial for NSW is a Drupal 9 starter site which implements the New South Wales Digital Design System (NSW DDS). It provides a set of editor friendly tools which faithfully implement the components and patterns defined in the NSW DDS.

List of features

The following table provides some details on how the various "patterns" of the NSW Digital 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
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 variability 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 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 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.

Visit the demo site

Insights