The left hand navigation is removed for demonstrating this component as a home page.

Overview

There is sometimes a need to present content in columns on a page.

This component allows you to have:

  • 1 to 4 columns of content
  • borders
  • background colours
  • adjustable spacing between columns
  • definable margins for top and bottom

Feature showcase

2 columns, 24px spacing, secondary colour border, 1px border thickness with double border style:

Here you can pop in some text.

Heading

Heading 3

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna. Aliquam placerat ac tortor at ullamcorper. Fusce quis magna facilisis, volutpat nisl in, imperdiet eros. Donec ultrices, mauris at lacinia semper, urna magna molestie dui, vel pellentesque dolor lorem aliquam eros.

Or images:

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna. Aliquam placerat ac tortor at ullamcorper. Fusce quis magna facilisis, volutpat nisl in, imperdiet eros. Donec ultrices, mauris at lacinia semper, urna magna molestie dui, vel pellentesque dolor lorem aliquam eros.

3 columns, 48px spacing, light blue background colour:

Here you can pop in some text.

Heading

Heading 3

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

Or images:

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna. Aliquam placerat ac tortor at ullamcorper. Fusce quis magna facilisis, volutpat nisl in, imperdiet eros. Donec ultrices, mauris at lacinia semper, urna magna molestie dui, vel

2 columns, 24px spacing, tertiary colour border, 2px border thickness, double border style, grey background colour:

SAGOV Online Accessibility Toolkit

Co-designed with the community and industry experts. Watch our short introduction video about how (and why) we created our toolkit.

Audio transcript and description of visuals

4 columns, 24px spacing, blue border, 5px border thickness, dotted border style, light yellow background colour:

1

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

2

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

3

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

4

Nulla enim ante, placerat id libero sed, eleifend tincidunt tellus. In ultrices luctus lectus, ac mollis mi porttitor a. Aliquam vel ultricies mauris, sit amet congue magna.

1 column with default settings applied

SAGOV Online Accessibility Toolkit

Co-designed with the community and industry experts. Watch our short introduction video about how (and why) we created our toolkit.

Audio transcript and description of visuals

Add this feature to your site

Guide to adding the multi column content component (requires log-in)

Top accessibility tip

Create link text that’s as specific as possible. Don't just use 'click here' or 'find out more'' (which may not make sense for people using screen readers or people from non-English speaking backgrounds): accessibility.sa.gov.au/your-role/content/links