Content tile block - heading (H3)
Intro text
Media hero (H1)
Trumpet text (optional)
The default but optional full-bleed block creates the page's first impression. This module is the most forward-facing Jotun module, so pay special attention to the image, video, and messaging. Multiple layout options (split and stacked view) are available. Logo, CTA links and buttons are available.
The default but optional full-bleed block creates the page's first impression. This module is the most forward-facing Jotun module, so pay special attention to the image, video, and messaging. Multiple layout options (split and stacked view) are available. Logo, CTA links and buttons are available.
Trumpet text (optional)
Page title block (H1/H2)
Page title block is used to introduce the current page's topic. It is often used on sub-pages to introduce the page's topic, without the need to add a media hero. Heading is mandatory while description is optional. It can have a H1 title when the Media hero is not used.
CTA link or button available.
Headline block (H2)
The headline block is designed to introduce or highlight short to medium-sized text within a landing page. The headline is required, while the description text is optional. This serves as a way to provide a visual break in a dense flow of content or subject matter.
The call-to-action (CTA) is optional, and the background has a default white colour, but other colous are available.
Key figures block (H2)
Heading (H3)
Sub-heading optionalThe key figure block displays 2 to 5 illustrations with key information. The Title is mandatory; subheading, body text and CTA are optional.
Heading (H3)
Sub-heading 2If only icon and heading is used, it's possible to apply "dynamic" layout in CMS to have them center-aligned and show 5 cards in a row.
Heading (H3)
Sub-heading 3Default illustration colours are black, Jotun blue and white (dark background). Possible to apply background colour to content cards, or to the entire block area. Default background colours are gray 1 and white. Possible to use Jotun blue as background too.
Heading (H3)
Possible to replace icons with numbers.
Storytelling block (H2)
Feature several paragraphs and add more CTAs
The storytelling module enables editors to incorporate images, videos, and text to craft a dynamic and inspiring layout. Rich text, CTAS, and background colours are available but optional. The image position can be aligned to the left or right, and the text can be centre or top-aligned.
Highlight block (H2)
This block is used to communicate important information about a specific product or solution. Its purpose is to trigger interaction, encouraging users to seek more information.
Use highlight modules sparingly for optimal impact – preferably no more than one per page. To avoid interrupting the user flow, give careful consideration to placement, context and content.
Heading is mandatory, text is optional. CTA is available, and different background is also available.
Section marker block (H2) - to indicate new section
See the content preview block below (H3)
The content preview block is highly versatile and can be utilized in various ways to showcase content tiles and page previews. It supports different formats such as grids with tiles, carousels, and even storytelling grids, both with and without call-to-actions (CTAs).
There are primary and secondary styles available. These styles influence the size and font of the titles displayed within the block. See the examples below.
Content tile block variation - carousel view
Promotion block (H2)
This block is designed to highlight promotional content to attract user attention and drive desired actions. There is also a countdown timer function within this block. CTA available.
Promotion block (H2)
This block is designed to highlight promotional content to attract user attention and drive desired actions. There is also a countdown timer function within this block. CTA available.
yellow 2
blue 138
red 2880
See the image and video block below
Headline accordion block (H2)
Headline accordion block (H2)
Headline accordion block (H2)Headline and accordion block Variation (H2)
A variation of the headline and accordion block with tighter spacing. With options to add intro text and summary. Suited for FAQ section.
-
Accordion block is used to present, for instance, Q&A sections (questions and answers). It needs to be added within the text field of a Headline block. And a link here? Read more
-
You can add as many pairs of headind and body text as you want.
-
Body text 3
Optional to have text here. And a link here? Read more
Quote block (H2) can be used when there is a particular quote you want to highlight, or when you need an element to break up a very long text. Author name and position mandatory, link text and image optional.
Author
Author position
Quote block (H2) can be used when there is a particular quote you want to highlight, or when you need an element to break up a very long text. Author name and position mandatory, link text and image optional.
Author
Author position
-
Content tile block - heading
Intro text goes here. Optional to have CTA link and download button
Content tile block - Heading 2
Each content tile block is added to content preview block, which is then added in expander item block to show on a page.
Content tile block - Heading 3
Intro
-
Heading (H3)
Sub-headingThe key figure block displays 2 to 5 illustrations with key information. The Title is mandatory; subheading, body text and CTA are optional.
Heading (H3)
Sub-heading 2If only icon and heading is used, it's possible to apply "dynamic" layout in CMS to have them center-aligned and show 5 cards in a row.
Heading (H3)
Sub-heading 3Default illustration colours are black, Jotun blue and white (dark background). Possible to apply background colour to content cards, or to the entire block area. Default background colours are gray 1 and white. Possible to use Jotun blue as background too.
Heading (H3)
Possible to replace icons with numbers.
