Get Help Quick Close

Component demo

Get Help Quick Close

Welcome to the kitchen sink

A hands-on reference for every component available on the VCCMHW website. Click Edit on any component below to inspect its fields.

Heading Intro

A large heading block with an optional call-to-action button. Useful for introducing a new content section.

Required fields: headingText (max 50 chars), bodyText (max 150 chars).

Other fields: btnText, btnVariant, link (internal / external / phone / email).

Explore our components

Click Edit on this component to see its dialog fields. Try changing the heading, body text, and button.

Rich Text

The most versatile content component. Supports full formatting including headings, bold, italic, lists, tables, links, and embedded images from the DAM.

Required fields: text (rich text editor).

Other fields: sectionTheme, containerClass, flowClass, proseClass (enables readable typography).

Rich Text Formatting Demo

Heading Level 3

This paragraph demonstrates bold text, italic text, and a hyperlink.

Heading Level 4

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
Column AColumn BColumn C
Row 1, Cell ARow 1, Cell BRow 1, Cell C
Row 2, Cell ARow 2, Cell BRow 2, Cell C

Rich Text Override Demo

In the 'Override Section' tab you can set how much top and bottom padding there is, how narrow the content area is, the background colour and whether the section has curved corners.

This section has got small top and bottom padding, the narrowest content area setting ('Container'), a pink background and curved corners.

Quote

A themed quote component with two variants: Quote Section (full-width background with image) and Quote Block (image alongside quote text).

Required fields: quoteText.

Other fields: quoteImage (DAM), authorName, authorTitle. Variant selection: Quote Section or Quote Block.

Two demos below show each variant.

Banner Image

A full-width image banner available in two heights: Short and Tall.

Required fields: image (DAM).

Other fields: alt (accessibility text), style (Short Banner / Tall Banner).

Note: Both demos below have no image set. Add a DAM image via Edit to see the banner render.

CTA Banner

A call-to-action banner with heading, description, and button. Commonly used for event registration or key actions.

Required fields: headingText (max 25 chars), bodyText (max 15 chars), btnText (max 20 chars).

Other fields: bannerTheme, btnVariant, sectionTheme, link.

How to register

via Humanitix

Columns

A two-column layout that holds Divless Text components. Designed for text-heavy content split into two readable columns.

Required fields: none (container component).

Other fields: columnSize (Medium / Compact), sectionTheme, containerClass, flowClass.

The child component Divless Text is a minimal rich-text wrapper available inside Columns. Required fields: text.

Left Column

This is a Divless Text component inside the left column. Unlike standard Rich Text, it renders without extra container divs.

Right Column

Another Divless Text component in the right column. The parent Columns component controls the spacing via the columnSize field.

Content Columns

Similar to Columns but includes a heading area for a Section Introduction above the column content.

Required fields: none (container component).

Other fields: sectionTheme, rowClass, containerClass, flowClass, proseClass.

The child component Section Introduction provides a sub-heading for sections.

Required fields: bodyText (max 100 chars).

Other fields: btnText, btnVariant, link.

This Section Introduction sits in the heading area of Content Columns.

Content placed inside the components area of Content Columns. Multiple Divless Text components can be added here.

Content placed inside the components area of Content Columns. Multiple Divless Text components can be added here.

Info Tile Cards

A card that contains the details about an event.

Required fields: Event link

Note: Requires a linked event to fully render.

Date

Tuesday, 24th March 2026
11 am to 2 pm

Location

In person
Victorian Pride Centre
79-81 Fitzroy St, St Kilda, VIC
Get directions

Hosted by

Other

Cost

Free

Consumers

Tiles

A container component that holds tile items in four switchable layouts: Tile With Actions, Small Tile (standard or image logo), Wider Tile, and Image Tile.

Required fields: switchable (tile type selection).

Other fields: sectionTheme, curveSection, flowClass.

Child components by tile type:

  • Tile With Action — Required: tileTitle. Other: tileDescription, multiButtons.
  • Small Tile — Required: tileTitle. Other: centerTile, variant (Standard: tileDescription, or Image Logo: image + link).
  • Wider Tile — Required: tileTitle. Other: tileDescription.
  • Image Tile — Required: tileTitle. Other: image, btnText, btnVariant, link.

Each tile type also supports a Section Introduction in its heading area. Five demos below show each tile type.

Tile With Actions — each tile has a title, description, and action buttons.

Action Tile One

Each tile can have multiple action buttons. Click Edit to add buttons via the multiButtons field.

Action Tile Two

Buttons inside tiles use the same link field as other components (internal, external, phone, email).

Small Tile — Standard variant with title and body text.

Small Tile One

Standard variant with body text below the title.

Small Tile Two

This tile has centerTile enabled — text is centred within the tile.

Small Tile Three

Small Tile Four

Small Tile — Image Logo variant with logo image and external link.

Wider Tile — each tile shows a title and description.

Wider Tile Line One
Line two provides additional context or a subtitle.

Another Wider Tile
These tiles take up more horizontal space than small tiles.

Image Tile — tiles with a background image, title, and link button.

card-img-1

Image Tile One

card-img-2

Image Tile Two

Accordion

A collapsible container with expandable items. Each Accordion Item has a heading (clickable title) and body (rich text revealed on click).

Required fields: none (container component).

Other fields: groupManagement (only one item open at a time).

Accordion Item — Required fields: heading, body. Other fields: sectionTheme.

What is the Kitchen Sink?

The Kitchen Sink is a learning page that demonstrates every component available on this page type. Content authors can click Edit on any component to inspect its configuration.

How do I add an accordion item?

Click the green + button inside the Accordion's “items” area. Select “Accordion Item” and fill in the heading and body fields.

Can I nest other components inside accordion items?

The accordion item body field is a rich text editor. For more complex content, consider using a different container component such as Tiles or Columns.

Toggle Buttons

A set of toggle buttons that switch between content panels. Each toggle has a button label and associated rich-text content.

Required fields: tabArea (at least one item with btnText and richText).

Other fields: none.

This content is shown when Option A is selected. Toggle buttons work well for comparing two viewpoints or audience types.

Carousel

A slideshow component with three modes: Image Carousel (manual cards), Text Carousel (text slides), and Search Generated (auto-populated from content).

Required fields: switchable (carousel type selection).

Other fields: title (max 30 chars, for text carousel), sectionTheme, rowClass, curveSection.

The child component Slide Text holds slide content. Required fields: slideItem (multi-field with title and body per slide).

The demo below shows a Text Carousel.

Text Carousel

Slide One Title

First slide body text. Each slide has a title and body field.

Slide Two Title

Second slide body text. The carousel auto-rotates and provides navigation arrows.

Slide Three Title

Third slide body text. For the search-generated variant, slides are auto-populated from the content index.

Video

Embeds a video — either a YouTube ID or a DAM video asset. Can include an optional call-to-action button below the player.

Required fields: youtubeId (for YouTube) or source (for Asset).

Other fields: btnText, btnLink, btnVariant, btnOutline

Inline Image Text

A rich-text component with a gradient background. Designed for visually distinct content blocks.

Required fields: text (rich text editor).

Other fields: sectionTheme (default: gradient pink), containerClass, proseClass.

If you add the class inline-img to images in this component, the text will neatly wrap around them.

Ticker

A scrolling text ticker that displays a short message in a continuous loop across the page width.

Required fields: tickerItem (max 20 chars).

Other fields: none.

Kitchen Sink Demo

Divider

A horizontal rule used to visually separate content sections.

Required fields: none.

Other fields: none.

Breadcrumb

Renders an auto-generated breadcrumb trail based on the page's position in the site tree. No content fields needed — it reads the page hierarchy automatically.

Required fields: none (auto-generated).

Other fields: sectionTheme, rowClass, containerClass.