Hoppa till innehåll

A hero block. This is the title

This is an example of an image-hero

A hero block. This is the title

This is a hero block with background color Green

How about a link?

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 like any 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:

Pug

A h4 in the block

This is just plain text, as you can see.

Now lets test an image:

A hedgehog
Is it you, Sonic?

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 like any text

Box heading

This is a white box. It can contain a lot of different blocks itself

For example an image:

Pug

A h4 in the block

This is just plain text, as you can see.

Now lets test an image:

A hedgehog
Is it you, Sonic?

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 like any text

Box heading

This is a teal box. It can contain a lot of different blocks itself

For example an image:

Pug

A h4 in the block

This is just plain text, as you can see.

Now lets test an image:

A hedgehog
Is it you, Sonic?

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 like any text

Box heading

This is a black box. It can contain a lot of different blocks itself

For example an image:

Pug

A h4 in the block

This is just plain text, as you can see.

Now lets test an image:

A hedgehog
Is it you, Sonic?

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 like any text

Box heading

This is a white box. It can contain a lot of different blocks itself

For example an image:

Pug

A h4 in the block

This is just plain text, as you can see.

Now lets test an image:

A hedgehog
Is it you, Sonic?

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.

  • Checkmark List item #1
  • Checkmark List item #2
  • Checkmark 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.

And a link

A column with an image

Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.

And a link

A column with an image

Consectetur verdo simprese justenes agastes liberdo juste velor etiam junto ase justenes pellesque dolore.

And a link

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.

Button

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.

Another button

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