A hero block. This is the title
This is an example of an image-hero
A hero block. This is the title
And this is some more text under the main title. It can be styled and contain links. There are many different variants of the hero-block that you can use.
A hero block. This is the title
A hero with background color Accentual1 where the text is not centered on desktop.
A hero block. This is the title
And this is some more text under the main title. There are many different variants of the hero-block that you can use. Background color Primary
A hero block. This is the title
Extra spacing between heroes with the same style is automatically removed. Background color Primary
A hero block. This is the title
This hero has the text set to dark. Could be improved with better styling.
A hero block. This is the title
This is a video hero
A layout content block
This is a typical layout content block. It can contain a number of other blocks. Typically headings, paragraphs, lists, images, quotes etc. You can think of it as a ”wysiwyg” component ut it is a bit more than that.
Another paragraph. Notice that the paragraph can be styled with bold, italic, inline code
, strikethrough etc.
You can also have som preformatted text
- And of course different kindso of list. This is the first item in a bullet-list
- The second item
- Third one
- Every item can be styled just
likeany
text
It can also contain custom blocks, like a ”box”:
Box heading
This is a gray box. It can contain a lot of different blocks itself
For example an image:
A h4 in the block
This is just plain text, as you can see.
Now lets test an image:
Lets finish of with a quote:
Well done is better than well said
Benjamin Franklin
A layout content block with background
This is a typical layout content block. It can contain a number of other blocks. Typically headings, paragraphs, lists, images, quotes etc. You can think of it as a ”wysiwyg” component ut it is a bit more than that.
Another paragraph. Notice that the paragraph can be styled with bold, italic, inline code
, strikethrough etc.
You can also have som preformatted text
- And of course different kindso of list. This is the first item in a bullet-list
- The second item
- Third one
- Every item can be styled just
likeany
text
Box heading
This is a white box. It can contain a lot of different blocks itself
For example an image:
A h4 in the block
This is just plain text, as you can see.
Now lets test an image:
Lets finish of with a quote:
Well done is better than well said
Benjamin Franklin
A layout content block with background and centered
This is a typical layout content block. It can contain a number of other blocks. Typically headings, paragraphs, lists, images, quotes etc. You can think of it as a ”wysiwyg” component ut it is a bit more than that.
Another paragraph. Notice that the paragraph can be styled with bold, italic, inline code
, strikethrough etc.
You can also have som preformatted text
- And of course different kindso of list. This is the first item in a bullet-list
- The second item
- Third one
- Every item can be styled just
likeany
text
Box heading
This is a teal box. It can contain a lot of different blocks itself
For example an image:
A h4 in the block
This is just plain text, as you can see.
Now lets test an image:
Lets finish of with a quote:
Well done is better than well said
Benjamin Franklin
A layout content block with a different max-width setting
This is a typical layout content block. It can contain a number of other blocks. Typically headings, paragraphs, lists, images, quotes etc. You can think of it as a ”wysiwyg” component ut it is a bit more than that.
Another paragraph. Notice that the paragraph can be styled with bold, italic, inline code
, strikethrough etc.
You can also have som preformatted text
- And of course different kindso of list. This is the first item in a bullet-list
- The second item
- Third one
- Every item can be styled just
likeany
text
Box heading
This is a black box. It can contain a lot of different blocks itself
For example an image:
A h4 in the block
This is just plain text, as you can see.
Now lets test an image:
Lets finish of with a quote:
Well done is better than well said
Benjamin Franklin
A layout content block with a different background
This is a typical layout content block. It can contain a number of other blocks. Typically headings, paragraphs, lists, images, quotes etc. You can think of it as a ”wysiwyg” component ut it is a bit more than that.
Another paragraph. Notice that the paragraph can be styled with bold, italic, inline code
, strikethrough etc.
You can also have som preformatted text
- And of course different kindso of list. This is the first item in a bullet-list
- The second item
- Third one
- Every item can be styled just
likeany
text
Box heading
This is a white box. It can contain a lot of different blocks itself
For example an image:
A h4 in the block
This is just plain text, as you can see.
Now lets test an image:
Lets finish of with a quote:
Well done is better than well said
Benjamin Franklin
Split Media Text
Don’t kill all your dark areas – you need them to show the light. We don’t really know where this goes – and I’m not sure we really care. We’re trying to teach you a technique here and how to use it. I will take some magic white, and a little bit of Vandyke brown and a little touch of yellow. Just a little indication.
- List item #1
- List item #2
- List item #3
Columns. Has all bg colors and 2-4 column option. Can have text columns, columns with image and text, columns with icon and text. All can have a link.
A column with an image
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
A column with an image
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
A column with an image
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
Cards with images. Can have all bg colors on both block background and card background
Heading
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
Simple cards with icon instead of image
Card heading
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
Heading
Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.
Some lead text here
Here comes a link