Click HERE to Apply for Your Pension Benefit

Hero example

Style Guide

CSI Is the Best (Color options: Blue/Red/Yellow/Green)

Copy Block Example

Now we can have some intro copy - Text can be set to align (left/center/right).

Subtitle (Background options: Brand-Blue/ Teal/Dark Blue )

Vertical Timeline Example

1
Hero example
Sub Heading 1

Heading 1

Copy 1 - Click "Add to the Timeline" to start a new section

2
About us bg
Sub Heading 2

Heading 2

Adding to the Timeline will change the background color (every other). When clicking the top number, the user will automatically scroll to the correct section.

3
Comprehensive health care
Sub Heading 3

Heading 3

Try Clicking "3" in the banner to see how the scrolling works.

4
sub Heading

Heading With No Copy and No Image

Image with Video/ Copy Block

External Video Example

Here you can upload an Image or a Video. Additionally you can upload an external video such as Youtube or Vimeo (make sure that the video has the proper permissions enabled, common for Vimeo to have them off).

For External Video -> Get the Video ID and choose which platform the Video if coming from. The Video ID is found in the URL for Youtube it is after v=. With Vimeo the Video ID can can found after the / at the end of the URL.

About us bg
Additional Settings

Image Example

Text can be above the Video/Image or it can be below. Additional settings can be found in the "Column Settings" -> Block Width / Text Alignment / Content Location / Setting the backdrop design.

Brand Blue LinkRed LinkAqua Link

Accordion Links

Heading for Accordion

Copy

Content Can Continue

This is more Copy

Accordion Links can be Brand Blue / Green / Red / Aqua.

With the option to change the width.

CTA Grid

This is an example for CTA Grid block type, Click the tab "Grid Items" to add to the block.

Heading

When Logo "None" is Selected

Heading 2

When a Logo is Selected

Decorative Image Block

Below are Decorative Image Blocks. Select an Image and then toggle if you wish to have the decorative background. Also having the option to select a block color and block width.

Laura landstra
Laura landstra

CTA Contact Example

Sub Heading

The CTA Contact is separated into 2 parts. Column Image and Column Settings.

The Image Settings set the image for the contact card as well as the link and heading.

The Column Settings give control to swap which side the contact information/ image is on. As well as changing the color of the card.

Laura landstra

Laura landstra

Column Image

Link

Image Row Example

About us bg

Image Title

Testimonials bg

Image Title 2

Pattern light

Image Title 3

Contact Cards Example

Laura landstra

HHeading

Sub Heading

Copy under contact Cards

Add a Link
Testimonials bg

Another Card

Sub Heading 2

Add Cards as Needed (No Link on this Card)

No Image

Example

Example of no Image

Link

Decorator Block Example

This is a style only block (not input content needed). With 2 options for the Decorator Type and then having the option of Block Width. Left is Type 1, Right is Type 2 and both are set to 50%.

Row Background options

Row Background can be White / Cream-Mint / Header Background Color.

Horizontal Alignment -> Left / Center / Right. *Note if the block is 100% width it will take up the full row*

Vertical Alignment -> Top / Middle / Bottom.

Aligning Text

To align text highlight the text in the copy field and click how you wish to align the text (farthest right button).

Example

This is an example of multiple blocks in 1 row. (By lowering the Block Width)

Narrow Row Example

Settings

In the "Settings" tab after "Content", there is the option to turn off/on the Footer Banner for each page.