Useful Resources
Hero Banner Plus
Display a large hero image with text and/or a CTA on top of it. This is usually displayed at the very top of a page. This version of the hero banner has more lay-out options than the hero banner. You can position the header, text and CTA on the left, center or right. In the middle center or top of the hero image.
Hero Banner Plus Default Settings
Add a title and content with the text editor
There are no seperate fields for headings and paragraphs, which means you are free to place any content in here that the editor will allow.
You can Render Container Size (Height) Based On Content Not Image.
Image Sizes
| Max-width | Max-height | |
| Image desktop | 216px | 100px |
| image mobile | ||
| video | 1700px | ∞ |
| video poster | same size as the video |
Hero Plus View
Icon With List
This block shows a list with icons. When a url is added the icon, and text will be clickable. The colums are 4 on desktop 2 on tablet and 1 on mobile.
!Note that the border around the images in this example is part of the image to show the dimentions of this particular image size.
If you are dealing with a variation of icon sizes it can help to make the canvas of the icons all the same size / dimention. In this way you have more control on how big the icons will display.
Bugs okt 2024: If the image has a capion, it will be visible, The title is not in the right shade of red
Image Sizes
The Icons will display with a max height of 100px and fill the available width from the left.
The image will fit the available space maintaining aspect-ratio, the best lay-out results will be achieved when all used icons have the same height and do not exceed the max with of the column (216px)
If a mobile image is uploaded it will be cropped to 100px X 100px
| Max-width | Max-height | |
| Icon desktop | 216px | 100px |
| Icon mobile | 100px | 100px |
Icon with List Mobile View
Image with menu links
Displays an image on the left and selected menu links on the right.It is also possible to add other CTA styles, this can be used to visually guide visitors to the most used/desired destination at a glance.
Image Sizes
Images should be at least 640 x 437px. If an image has another dimention it will be cropped to this size on desktop and 341x155px on mobile.
| width | height | |
| Icon desktop | 640px | 437px |
| Icon mobile | 341px | 155px |
Icon with List Mobile View
Infographic List
You can add multiple items to this block and display them vertically or horizontally
Infographic List Horizontal
Text of the infographic
Text of the infographic
Text of the infographic
Text of the infographic
Text of the infographic
Text of the infographic
Infographic list vertical
Text of the infographic
Text of the infographic
Text of the infographic
LogoFarm 2 rows
Members Component
Member Title
Member Designation
Tabs
Tab 1
Tab 2
Tab 1
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.
Tab 2
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.