Editable component blocks

Accordions turn sections of content into a scannable list, allowing the audience to view only the content they need and ignore what they don’t.

See and interact with the Accordion component block demo on this page.

A WYSIWYG (What You See Is What You Get) editor allows CMS editors to create and edit content in a visual way. The content appears in the WYSIWYG as it will appear on the published page.  

A button should only be used when you want the audience to take action, for example, 'Apply now' or 'Register'.

Use the Automated events component to visually showcase upcoming events on landing pages. Automated events will showcase events with their titles, images and dates in a scrolling carousel. 

The app list can be used on both landing and standard pages and should be used to display apps that relate to the page content. The audience have the option to go the app stores to download the app.

See and interact with the App list component block demo on this page.

Headings are essential to good page structure and help the audience scan the content to find what they need.

See and interact with headings on this page.

Use this component to showcase on landing pages the grants that are open for applications. Automated grants will display grants with their name, summary and close dates in a scrolling carousel. 

Have a stylised listing of the latest news content auto-populate when you use the Automated latest news component. Use the component to promote one story with an image and summary, list others and link to an all news stories page.

Create a stylised listing of the latest resource publications that auto-populates on landing pages with the Automated publications component. Use the component to promote a publication with an image and summary, list others and link to more publications.

Use the Links component to show a group of links in an organised, stylised way that makes it easier for use to scan. The links may go to other internal pages, external websites or to media files.

Add the Blockquote component to highlight a quote, alongside the name and image of the person being quoted. The Blockquote is a visual element to draw attention to key information. 

See and interact with the Blockquote component block demo on this page.

Cards give a brief summary of content and display information in an organised way, making it easier for the audience to find information.

Content blocks are used to display groups of related content and/or links. This block includes 3 variants – Icon blocks, Image blocks and Text blocks. 

The Floating button banner displays to ensure the button is always visible as the audience scroll down the page. 

A callout is a short piece of information that draws attention to important content.

See and interact with the Callout component block demo on this page.

The Hero banner is used to introduce a page by creating a focal point for the page title and summary.

The contact information block provides a simple, consistent, reusable format for including contact details like phone, email, address or social media links, for NSW Government departments, agencies or services.

Custom blocks allow editors to add more specialised or advanced functions to a standard page. Some examples include direct children as cards and dialog pop-up boxes. 

A feature block is a visually distinct area that highlights a specific piece of content or call to action for the audience. The latest news variant is designed to highlight media releases relevant to the content of the page.

See and interact with the Feature component block demo on this page.

In-page notices are used to contextually inform users of important information on a content page.

See and interact with the In-page notice component block demo on this page.

Profiles can depict a group of people with images and bios. Profiles can be helpful for displaying groups of people such as boards, committees, ministers, or senior executives. 

A sequence can be used for short blocks of content that need to be viewed in a linear or sequential order.

See and interact with the Sequences component block demo on this page.

The Content expander is designed to save space by hiding content and takes up less visual prominence than an accordion.

See and interact with the Content expander component block demo on this page.

The subscriptions block provides a simple, consistent format for including an external link to mail list forms, for example Mailchimp, where the audience can subscribe to newsletters or updates.

See and interact with the Subscriptions component block demo on this page.

The sub-navigation links list can only be used on landing pages in an edge-to-edge section.

Tabs make it easy for the audience to move between related content sections and displays the content at the same level of hierarchy.

See and interact with the Tabs component block demo on this page.

The gallery component block is used to create an interactive visual story telling element to a page. Images are stacked in a 3 column grid and when the image is clicked it displays in a light box with further description.

See and interact with the Gallery component block demo on this page.

Tables are used for displaying data in a structured, grid-like format. They are particularly useful for presenting complex information, such as numerical data, comparisons or schedules in a way that is easy to read and understand.

Use this component to feature important dates. The key dates component creates a visual focus for events and other instances.

The media download component can be used to feature downloadable PDFs or image files.

The Quick Exit button displays a button that is always visible as the audience scrolls down the page and is use for an urgent matter. For example, domestic abuse quick exit click to another website.

See and interact with the Quick Exit Button component block on this page