Department of Communities and Justice Digital Design
System
DCJ Digital Design System

Components

Not all components featured in the NSW Government DDS are applicable to DCJ. Refer to this list to identify available components for your project.

Design your web page with components

Accordion
Use expandable vertical panels to save space on a page.
Back to top
An easy way to return to the top of the page.
Block link
A visually engaging space to showcase a campaign content.
Breadcrumb
Display a hierarchical structure and user's current location within the website.
Button
Encourage user engagement and interaction.
Button link list
Reduce the number of clicks required to reach specific information.
Callout
A visually distinct way of highlighting key points.
Cards
Group content or tasks to make it easier for users to scan, read, and find information.
Content block
Present multiple piece of information or actions to users.
Footer
Provide links to explore the Government's profile and useful information.
Global alert (site wide alert)
Display across the top of an entire site to show important information to users.
Header and main navigation
Provide branding, navigation option, search functionality and translation.
Hero banner
A full width colour background to display a concise message.
Image with caption
Explain information in a visually compelling way.
In-page alert
Notify users about important messages within the current page context.
In-page navigation
Direct users to specific section within a content page.
Link list
Link lists surface and group related content.
Masthead
A clear indicator of the site's affiliation with the NSW Government.
Quick exit
Help users securely close sensitive information on the website.
Side navigation
Show users' current position in the content hierarchy beyond the main navigation.
Skip link
Assists users in skipping to the main content on a page or directly to the search input.
Steps
Visually indicate the process or status of a series of tasks.
Text and title V1
Text formatting tools.
Video lightbox
An accessible player for controlling video playback on a web page.
Last updated:

14 Oct 2024