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

Component checklist

This is a list of component for accessibility review.

Accordion

Accordion item title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Pellentesque sit amet porttitor eget. Leo integer malesuada nunc vel risus commodo.

Go back to design system homepage.

Accordion item title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Pellentesque sit amet porttitor eget. Leo integer malesuada nunc vel risus commodo.

Go back to design system homepage.

Accordion item title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Pellentesque sit amet porttitor eget. Leo integer malesuada nunc vel risus commodo.

Go back to design system homepage.

Back to top

Please inspect the element at the bottom of the page

Breadcrumb

Please inspect the element at the top of the page

Callout

Callout headline

Callout supportive text, add a relevant page is optional.

Cards

This image is an illustration of website component.
Max 60 characters
Max 100 characters
This image is an illustration of website component.
Max 60 characters
Max 100 characters
This image is an illustration of website component.
Max 60 characters
Max 100 characters

Footer

Please inspect the element at the bottom of the page.

Global alert

Please inspect the element at the top of the page.

Global search

Please inspect the element at the top of the page

Header and main navigation

Please inspect the element at the top of the page.

Hero banner

Please inspect the element at the top of the page.

Image with caption

This is an illustration image to explain template
A set of illustration to demonstrate what template means.

In-page alert

Information alert
Information - title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Pellentesque sit amet porttitor eget. Leo integer malesuada nunc vel risus commodo.

Go back to design system homepage.

In-page navigation (on this page)

Please inspect the component using content page.

Masthead

Please inspect the element at the top of the page.

Metadata display

Please inspect the component using content page.

Pagination

Please inspect the component using global search.

Quick exit

Quick exit is enable on the top of this page.

Related content

H2, H3, H4 title

Description text for the component goes here. This introduces the data in the table. Maximum character limit is 180 characters. (optional)

Title Author Date
Page/asset title link 1 Author 1 08 March 2024
Page/asset title link 2 Author 2 08 March 2024
Page/asset title link 3 Author 3 08 March 2024

Skip link

Please inspect this component at the top of the page.

Step

Step

  1. Step heading limit is 60.

    Summary character limit is 100.

    Link text limit is 30.

  2. Step heading limit is 60.

    Summary character limit is 100.

    Link text limit is 30.

  3. Step heading limit is 60.

    Summary character limit is 100.

    Link text limit is 30.

TUTD

Please inspect this element at the bottom of the page.

Video lightbox

  • Video lightbox summary is 150.

    Video lightbox headline limit is 40

    Video lightbox summary is 150.

    The button text limit is 30.

    Transcript

    This is video transcript.

Last updated:

08 Nov 2024