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.
Banners
Banner
This is banner.
Remember that even after you choose a theme, you can still style any banner sub-items (paragraph, buttons, background) however you need it to be, with the size and colors provided.
Banner (Theme 2)
This is also a banner.
Theme 2 will have the banner following the height of the background image.
The content will be a layer on-top of the background image.
Content Blocks
Content Block (Theme 4) - Banner Usage
Content Block Theme 4 is primarily designed to serve as a banner layout with supporting content. It offers improved responsiveness, ensuring that both images and text adapt seamlessly across various screen sizes. This makes it ideal for visually engaging sections that require a strong image presence along with contextual messaging.
Content Block - 2-Column Layout (Theme 2)
Content Blocks Theme 2 operates using a two-column layout. When the left column contains only a single image, the image will occupy the full height of that column. On mobile view, the layout becomes responsive by stacking the columns vertically, placing the image on top, followed by the right column content.
Content Block - 2-Column Layout (Theme 3)
Content Block Theme 3 features a two-column layout. When the right column contains only a single image, the image will expand to fill the entire column. In mobile view, the layout becomes responsive by stacking the columns vertically, with the image appearing on top, followed by the left column content.
Content Block
This is content block.
- 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
This is content block theme 2.
- 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
Default content block
- 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 (Round Image)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block (Round Image)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block (Round Image)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 4 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 4 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 4 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 4 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 5 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 5 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 5 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Content Block 5 Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Video in ContentBlock
Video in ContentBlock
Video in ContentBlock
Buttons
Buttons - Small Size
Buttons - Medium Size
Buttons - Large Size
Typography
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
Text Block
Textblock (Theme 1) - 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 with tick as the bullet marker:
- List 1
- List 2
Plain Link
Textblock (Theme 2) - 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 with normal dot as the marker:
- List 1
- List 2
Plain Link
Accordion
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
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
- 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.
Yes you can. Just toggle to the “columns” option and choose “two”. Voila!
- 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
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.
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.
- 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
- 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
- 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
Video Embed
Product Cards Section
Product Cards - Theme 1
View All
Article Cards Section (for Blogs)
Article Card (FEATURED)
View All
Article Card (LATEST)
View All
Events Cards
Office Locator
Our office locator section is configured to produce one search result only. Please send a request if you’d like otherwise.
Google Maps
Office Cards Section
Office Card - Theme 1
View more hakForms
Form
- Plain form with minimal styling & config
Carousel
Quis autem vel eum iure
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Et harum quidem rerum
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur
Nam libero tempore, cum soluta
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Gallery
