hero h1
Section type: "Hero" or "Small hero". Section text color: "White".
Add parallax effect to the section image.
Add fade in animation to the block.
The breadcrumbs will automatically get the same text color as the hero.
Styles
Preamble
This a preamble. Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Beatae praesentium tempora, ipsa in, sequi voluptate rerum possimus assumenda distinctio iusto, ullam quo, dolore temporibus! Aperiam recusandae, placeat ex harum magni?
Links
Quote
Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Beatae praesentium tempora, ipsa in, sequi voluptate rerum possimus assumenda distinctio iusto
Numbered lists
Default
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
Roman letters
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
Capital letters
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
Bullet lists
Default
- Item 1
- Item 2 - som har en lite längre text och ska ha ett indrag
- Item 2.1
- Item 2.1.1
- Item 2.1
Square
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
Dash
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
Check
- Item 1
- Item 2
- Item 2.1
- Item 2.1.1
- Item 2.1
H2 Section label
Section label
Add "Section label" style to a heading 2.
Section style: Padded blocks
If there are multiple blocks that need some space between each other, the section type: "Padded blocks" can be set on the section
Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Labore, maiores, iure. Commodi molestias, animi. Obcaecati numquam dolorum laborum, placeat maxime neque nihil nobis? Nobis ab quibusdam quos consequatur, excepturi, sequi!
Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Labore, maiores, iure. Commodi molestias, animi. Obcaecati numquam dolorum laborum, placeat maxime neque nihil nobis? Nobis ab quibusdam quos consequatur, excepturi, sequi!
Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Labore, maiores, iure. Commodi molestias, animi. Obcaecati numquam dolorum laborum, placeat maxime neque nihil nobis? Nobis ab quibusdam quos consequatur, excepturi, sequi!
Block interaction: Animation: Fade in block
To make a block fade in, add the "Fade in" animation to the block:
Section type: Market logos
Section type: Market logos. Each block is 4 columns wide. The link is added on the block.
Block type: Offset video
Add block type: Offset video to the block. Make the video 24 columns wide and add a normal paragraph under the video within the same block.
- Create text block (24 columns)
- Write the description that should be next to the video.
- Include a video widget (must be before the text row in the Block!)
- Change Block type to Offset video.
- Done!
A short description of the video and/or image here. Lorem ipsum dolet set amet set at amet
Block type: Has floating image
Add block type: "Has floating image" to the block. Insert the image before the text in the same block. Let the block be 24 columns wide.
Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo. Fusce in turpis in quam porttitor sollicitudin. Maecenas et tincidunt ligula, vehicula sodales odio. Ut vestibulum nunc eu convallis commodo.
Section type: full width
This style is only used for the image + text blocks below.
Add style "Section type: Full width" and "Background color: [The color]" to the section.
Contact
To make the section full width, add the styling "Section type: Full width" to the section.
Drag the text block to be the same height as the image in edit mode to make it center vertically.
This is the "quote with reference widget". The link is added as a regular link with Button styling under the quote widget.
Label
To make the section full width, add the styling "Section type: Full width" to the section.
Drag the text block to be the same height as the image in edit mode to make it center vertically.
Tables
Table styling: Word break
| Header cell styling: | Text align right | Text align left | No background | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
|---|---|---|---|---|---|---|
| Default row: | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
| Data cell styling: | Left aligned text | Right aligned text | ||||
| Grey row: | ||||||
| No background header cell | ||||||
| No background header cell and grey row |
Table styling: Text align right + Word break
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | |
|---|---|---|---|---|---|---|
| Default row: | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
Table styling: No max width + Word break + Gradient Blue table head
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | |
|---|---|---|---|---|---|---|
| Default row: | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
Table styling: No max width + Medium blue table head
| Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | |
|---|---|---|---|---|---|---|
| Default row: | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |