Content Manager Documentation

This documentation showcases each component and the varieties that it’s able to achieve. Every component has its settings (colours, themes, font size, etc) that could be adjusted according to your needs.

P.S. Any theme that are not mentioned in this documentation is currently unused, unless they’re needed for future improvements. Choosing these themes won’t break the page - just produces plain style.

Brand Color

#dcdaf1

Accent

#f8f8f9

Secondary

#ffffff

Light

#53367a

Dark

#dcdaf1

Accent

Text Primary

#4a4a49

Text Secondary

#737b7d

Text Light

#ffffff

Text Dark

#523579

Text Accent

#8a85bf

Content Block - Theme 1

This is Content Block - Theme 1.

Content blocks are essentially contents in columnal layout. You can choose from two up to 5 columns, and all of them can be styled with any theme that you need. For example, this is theme 1.

The theme 1 content block is more focus on the originality layout of Dory’s Ocean with some padding

This is the text in small size

This is the footnote in extra small size

Can add buttons here

Link Here

Content Block - Theme 2

This is content block theme 2.

Aligned in left

Has narrower gaps from each column and to each item in the column
Has wider gap to the section before and after
Recommended to add column background color; it’s styled to have rounded corners
Please refer to other themes as a comparison.

Content Block - Theme 2

This is content block theme 2.

Aligned in right

Has narrower gaps from each column and to each item in the column
Has wider gap to the section before and after
Recommended to add column background color; it’s styled to have rounded corners
Please refer to other themes as a comparison.

Content Block - Theme 2

This is content block theme 2.

Aligned in right

Has narrower gaps from each column and to each item in the column
Has wider gap to the section before and after
Recommended to add column background color; it’s styled to have rounded corners
Please refer to other themes as a comparison.

Content Block - Theme 3

This is content block theme 3.

Has wider gaps from each column and to each item in the column
Has narrower gap to the section before and after

Please refer to other themes as a comparison.

Content Block - Theme 3

This is content block theme 3.

Has wider gaps from each column and to each item in the column
Has narrower gap to the section before and after

Please refer to other themes as a comparison.

Content Block - Theme 3

This is content block theme 3.

Has wider gaps from each column and to each item in the column
Has narrower gap to the section before and after

Please refer to other themes as a comparison.

Content Block - Theme 4

This is content block theme 4.

Recommended to add column background color; it’s styled to have rounded corners (border style, not filled)
Image will animate on hover when there’s link associated to it

Content Block - Theme 4

This is content block theme 4.

Recommended to add column background color; it’s styled to have rounded corners (border style, not filled)
Image will animate on hover when there’s link associated to it

Content Block - Theme 4

This is content block theme 4.

Recommended to add column background color; it’s styled to have rounded corners (border style, not filled)
Image will animate on hover when there’s link associated to it

Content Block - Theme 4

This is content block theme 4.

Recommended to add column background color; it’s styled to have rounded corners (border style, not filled)
Image will animate on hover when there’s link associated to it

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Video in ContentBlock

Buttons - Small Size

Primary Btn Primary Outline Btn Secondary Btn Secondary Outline Btn Link Style Btn

Buttons - Medium Size

Primary Btn Primary Outline Btn Secondary Btn Secondary Outline Btn Link Style Btn

Buttons - Large Size

Primary Btn Primary Outline Btn Secondary Btn Secondary Outline Btn Link Style Btn

Heading - Extra Large

This is the medium text size. You can use it as a paragraph. You can also configure the the section height to adjust your padding between section.

Settings:

Heading - Extra Large
Paragraph - Medium
Section Height - Small
Theme - 1

Use label if you want to set small font in medium or large size

Heading Large

This is the small text size. You can use it as a paragraph. You can also configure the the section height to adjust your padding between section.

Settings:

Heading - Large
Paragraph - Small
Section Height - Medium
Theme - 2

Use label if you want to set small font in medium or large size

Heading Medium

This is the extra small text size. You can use it as a paragraph. You can also configure the the section height to adjust your padding between section. This theme comes with Border Bottom.

Settings:

Heading - Medium
Paragraph - Extra Small
Section Height - Large
Theme - 3

Use label if you want to set small font in medium or large size

Primary Color

Heading Extra Small

Heading Small

Heading Medium

Heading Large

Heading Extra Large

Secondary Color

Heading Extra Small

Heading Small

Heading Medium

Heading Large

Heading Extra Large

Accent Color

Heading Extra Small

Heading Small

Heading Medium

Heading Large

Heading Extra Large

Dark Color

Heading Extra Small

Heading Small

Heading Medium

Heading Large

Heading Extra Large

And this is how a regular paragraph looks like. You can also adjust the sizing and the colors too, just like the heading ones. This paragraph using a dark color.

This is extra small size, accent color

This is small size, primary color

This is medium size, secondary color

This is large size, accent color

This is extra large size, primary color

Textblock - One Content Column Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

And this is how a regular paragraph looks like. This paragraph using default text color.

We have list:

List 1
List 2
Plain Link

Textblock - Two Content Column Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

And this is how a regular paragraph looks like. This paragraph using default text color.

We have list:

List 1
List 2
Plain Link

You can also create table using html table 🤩

Visiolite^®Edition	Visiolite^®Premium
Visual acuity test – letters, numbers, Landolt	Visual acuity test – letters, numbers, Landolt and Raskin E
Amsler	Amsler
Astigmatism	Astigmatism
Low vision – (monocular)	Low vision – (monocular)
Hypermetropia	Hypermetropia
Mesopic	Mesopic
Full visual field (peripheral, nasal and central)	Full visual field (peripheral, nasal and central)
Duochrome red/green	Duochrome red/green
Fusion	Fusion
Hyperopia	Hyperopia
Phoria	Phoria
Standard colour perception	Standard colour perception
Depth perception	Depth perception
Contrast sensitivity	Contrast sensitivity
-	Glare resistance
-	Glare sensitivity
-	Random acuity test

This is Accordion 1 column in extra small text size

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
Et quasi architecto beatae vitae dicta sunt explicabo

This is Accordion 1 column in small text size

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur

This is Accordion 1 column in medium text size

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

This is Accordion 1 column in large text size

how-to-perform-a-stenger-test

This is Accordion 1 column in extra large text size

the-impact-of-noise-in-the-workplace
which-lung-diseases-can-spirometry-help-diagnose

This is accordion 2 columns extra small text size

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is accordion 2 columns small text size

Yes you can. Just toggle to the “columns” option and choose “two”. Voila!

This is accordion 2 columns medium text size

Blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
Excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi
Id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
Impedit quo minus id quod maxime placeat facere

This is accordion 2 columns large text size

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem