Modules

Editor module (Heading 1 for titles)

Heading 2 (For subtitles)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

To insert a featured paragraph shortcode, simply click on the square bracket icon ([/]) in the editor toolbox. Then, place the desired paragraph between (sc name=”intro”) and (/sc). This allows you to easily incorporate a featured paragraph into your content.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

To insert a quotation, highlight the text you want to feature as a quote, and then click on the quote button in the editor toolbox or, viceversa. Add the author of the quote or place where the quote was taken from, below with a “-“.
-Name, City

To add a button in either aqua, red, or yellow, click on the bracket icon ([/]) in the editor toolbox. Then, insert the URL and text for the button under your preferred color option.

Button (Aqua) Red Yellow

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Heading 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

  • List item
  • List item
  • List item

Accordion module

It consists of a series of collapsible items stacked on top of each other. Each item typically has a title or heading and a content area hidden by default.When a user clicks on the title of an accordion item, it expands to reveal the associated content.

Question 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Question 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Question 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Columns module

A columns module is a layout component that allows you to organise content side by side in multiple columns. You can select the amount of columns needed. You can also add an overarching title and introductory text to all columns.

H2 introduction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Cards 1 module

A cards module  consists of individual “cards,” each containing specific elements such as a heading, paragraph, image, and a link.

Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Link Text right arrow

Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Link Text right arrow

Checklist module

A checklist module is used to display a list of items, tasks, or points in a systematic manner. This module typically includes checkboxes or icons alongside each item to indicate significance. The checklist module provides the flexibility to use any icon, not limited to traditional checkboxes.

H2 introduction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

icon
Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?
icon
Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?
icon
Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Downloads module

A download module simplifies access to downloadable content on a website. It includes a title, a brief description, and a direct link for users to download the content easily. This module is ideal for presenting documents, reports, or other materials users may want to save or reference offline.

Feature module

A feature module highlights content with an impactful image, a brief description, and a clickable link for users to explore further.

Icons module

An icons module is used to convey information with a concise and recognisable symbol positioned to the left of the content. When using a snow or white, yellow, or aqua background in the icons module, it’s recommended to utilise CPRC’s teal color for the icons to maintain a cohesive and branded appearance. However, if a red background is chosen, white icons are preferred to ensure optimal visibility and contrast.

H2 introduction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

icon
Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora.
icon
Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora.

Team module

A team module features a team member’s image, optional role, and a brief bio. It may also include optional links to their LinkedIn and Twitter profiles for additional engagement.

dummy

John Smith

CEO

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

dummy

Jane Doe

Job Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

Report modules

While the modules below are designed specifically for report content, their versatile features can also enhance the presentation of statistics and key findings in other types of submissions, blog posts, or media releases.

Stats module

Each stat typically includes an optional icon, a numerical value or percentage, accompanied by relevant text. This module is designed to convey key metrics in a clear and engaging manner. Regarding colour choices, when using a snow or white, yellow, or aqua background, it’s recommended to use CPRC’s teal color for the icons. However, if a red background is chosen, white icons are preferred for enhanced visibility and contrast. Introduction to the stats module is optional, as well as headings for each stat.

H2 introduction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

icon

0%

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias.

icon

0

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias.

Steps module

Each step includes an optional byline and heading, accompanying text, and is automatically numbered for easy reference. The byline and heading provide additional context, while the numbered steps ensure a clear and organised presentation. This module is particularly useful for creating tutorials, guides, or any content that requires a step-by-step explanation.

H2 introduction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, ut. Dolores consequuntur voluptas distinctio obcaecati reprehenderit aspernatur commodi molestias, et tempora. Neque officiis placeat, adipisci corrupti laborum commodi culpa alias?

1

Byline

Neque officiis placeat, adipisci corrupti laborum commodi culpa alias.

2

Byline

Heading

Neque officiis placeat, adipisci corrupti laborum commodi culpa alias.

Animation (Bars)

1 in 5

Here, you can input content that corresponds to the circle graph above. You can select the background colour, the bar colour and the icon (but always in circle format with CPRC’s Teal background).  You can add as many graphs as you’d like below.

icon

Animation (Circle graph)

%

Here, you can input content that corresponds to the circle graph above. Choose the colour for the graph that represents the percentage, in this instance, teal. Feel free to include as many graphs as needed.

%

Here, you can input content that corresponds to the circle graph above. Choose the colour for the graph that represents the percentage, in this instance, red. Feel free to include as many graphs as needed.

Animation (Line)

icon

%

Here, you can input content that corresponds to the circle graph above. You can select the background colour, the progress line colour and the icon (but always in circle format with CPRC’s Teal background). You can add as many graphs as you’d like below.

Animation (semicircle)

%

Here, you can input content that corresponds to the circle graph above. Choose the colour for the graph that represents the percentage, in this instance, teal. Feel free to include as many graphs as needed.

Newsletter sign-up

This field is for validation purposes and should be left unchanged.
Skip to content