Vilkår

Introduction

Welcome to the 2021 komponentoversigt. This page will give you an overview of the different components available to you. It will also show you various options for ways to configure the components. Not all variations are shown, but the most common scenarious should be covered.

Banner

The banner now supports native video. It still support using just a color from your pallet, or an image you choose. For the video, you can use multiple file formats. The browser can then use the optimal format available. We recomment .webm and .mp4.

Base settings

All components comes with the same set of base settings.

You can, as always, pick a background color for the component.

On each individual component, you can now adjust the padding at the top and bottom. If you have selected a background color, this color will fill the entire component, including the padded area.

A new addition is the toggles for "Full width content" and "Full width background". If you toggle on "Full width background", the component will span the entire width of the screen, but it will not expand the content within. Use this, when you want to have a nice full width background color, but not break the layout of the page. When you want the content of the component to span the entire width of the page, you toggle on "Full width content". Use this when you want cards all the way across the screen, or for large full-width videos and images. The choise is yours. Remember, that toggleing on "Full width content" naturally expands the background as well, so no need to also toggle on "Full width background" if using it.

Last option is the custom id. Use this to give the component an unique identifier that you can then use for anchor tags and so on.

This component is the "Text in Columns component"

50/50 - Image/Text

Use this component to place a beautiful image besides some interesting text. The component also supports video from Youtube, changing the text color, and adding a button for a nice CTA. By default, the image will be tall and cropped. Like here. If you do not want to have the image be cropped, there is an option for that. This will keep the images original format. We also turned on "Full width background" on this component.

Video and full width

This is the 50/50 - Image/Text component, but it has now been configured with a Youtube video. "Full width content" has also been toggled on, so the video now breaks the layout of the page, making for a more interesting layout. Note that on this component, using "Full width content" wont actually make the content full width, this is a choise we made, to make sure the layout does not get all too funky.

Background color and no crop

For this example, we have picked a background color, but not set the component to use "Full width background". This creates an interesting effect that draws attention to the content of this component. We also turned on "Dont crop image", so the image is keeping it's original format. Great for showing graphics.

Youtube video

This component below is a simple "Youtube video". For this, we added a background color and set it to "Full width background". You could also have the video fill the entire width of the screen, but this can be a very dramatic effect.

Image component

Default image component here. Only the text color has been changed.

Full width image

This image component has the image shown in full width. You can also adjust the location of the text. Default is center, but it could also be left or right.

With parallax effect

Check the "Parallax" checkbox on any Image Component to apply the parallax effect as seen here.

Cards

Cards is a neat way to link to other pages. The settings for each card is set directly on the individual page, so you can use them over and over again, with no need for write the same thing twice.