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.
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.
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"
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.
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.
Using the form component, you can embed an Umbraco Forms form on your page, along with some text.
The form can be shown to the left of the text, like here, or below the text. All the base component settings are of course available to you.