Default layout

The default layout is designed to optimally present your website's primary content. The layout offers flexibility, allowing you to combine various components to create a customised structure that best serves your specific needs. Read on to explore the available components for your customisation.

"On this page"

The "On this page" or table of content component is automatically generated! It will appear when there are two or more section headings or blocks added onto a page.

Accordion

The Accordion component is for supplementary content that may not be critical for all users but is relevant to specific audience segments.

Callout

Use the callout to highlight important information. For example, updates! Here's an example:

Cards (2 columns)

The Cards component offers versatile functionality, serving multiple purposes such as displaying events and facilitating navigation to related content.

100 characters in this title

150 characters in this optional description

Aspect ratio is 3:2

That's the size or aspect ratio of a card

Cards (3 columns)

When you choose 3 Columns for your cards, a different safe zone applies.

This shows default image display

By default, images will fill the entire card

This shows an image that is "resized to fit"

Alternatively, you can opt to have the image "resized to fit". However it may introduce a white background depending on device size

Image "safe zones" in infocards

Images are 1:1 on desktop screens but 3:2 in tablet and below.

Image with text

Use Image with text component to put image next to a text. For example, show someone's profile image or perhaps a cover of an online report.

Use image with aspect ratio of 5:6.

Embeds

The Embeds component supports the integration of map and video links.

Image

When you add an image, it will fill the page's width. If your image is too tall, we recommend cropping it.

Add an alt text for accessibility. You can also add an optional caption.

You can add an optional caption like this

You can resize the image to be smaller

Text

Format your text using the editor.

Headings (Large)

Headings (Medium)

Headings (Small)

Paragraphs or normal text

Text can be written in bold

Text can be written in italics

Text can be written or in underline

Text can be written in strikethrough

Doing math? ^{we can also do superscript}

Additionally _{we can do subscript too!}

Hyperlinks

Hyperlinks are also possible to a page externally

Hyperlinks are also available to a page internally

Tables

Lists

1. Ordered lists

   1. You can indent them too.

• Unordered list

  • Same goes for unordered list.

Dividers