Component Fundamentals

Components are building blocks that can be inserted by an editor in one or more zones on the website pages. There is a substantial number of different component types available for use, and every type has unique functionality and layout.

Each component is a ribbon spanning across the entire width of the screen - with a few exceptions, e.g. footer components, which fill the width of the containing zone.

Component content and configuration

Simple content like text, rich text or images is usually editable directly in Edit Mode. Some module types do have additional content or layout configuration options that are not available for editing directly in the module view. These option are accessed by clicking the Module Configuration button.

General Module Display Options

All modules share the same set of general layout options for configuring background color scheme, background image and background image behavior. These options are accessed by clicking the Module Display Options button. Remember to save the page in order for the changes to apply.

Available settings

• Color Scheme
  This defines the background and potentially the text color of the module. The default value is empty, giving a white background and default text color. Grey 1 and Grey 2 are light grey variants with dark text and the Grey 3 is a dark grey with white text. The Brandcolor variants are selections of official colors for the specific skin. Note that applying a brandcolor as well as a background image applies a semitransparent overlay with the selected brandcolor tint to the image.
• Apply background To Module Inner Body Only
  If unchecked, the background color or image will span the entire width of the screen. If checked, the background will only affect the inner part of the module, creating a box-like layout with spacing on each side.
• Background Image
  This adds a background image to the module. It can be used both as a banner image, spanning across the entire module and as a watermark or icon somewhere within the module. Use both image and brandcolor color scheme to add a tint to the image. Images used as banner background images require a large format to display well on large screens and retina devices. The system handles the downscaling automatically, so use high quality images as the source. Note that the images have to work well in both portrait and landscape mode, as modules are typically wide on desktop computers and tall on smaller devices.
• Background Image Position
  By default images are centered horizontally and vertically within the module. Selecting a position forces the image to align differently. For instance, selecting “top left” on a banner image will make the top left corner visible at all times and show as much of the rest as possible within the area available. If selecting “right center” on a watermark image, the image will be placed in the right side of the module and center itself regardless of the height of the module.
• Background Image Behaviour
  This is used to define the nature of the background image. “Cover” is used for banner layout. It makes the image cover the entire width and height, scaling itself to always show as much as possible within the available space. Image cropping will occur. “Contain” makes sure that the image is visible and fills as much of the background as possible without cropping or distorting the image. “Normal” is used for watermark layout. It inserts the background image in the actual size with no image manipulation. Cropping can occur when using large images.

Module Variants

Modules may have variants available. A variable can be a different layout or presentation of content within the same module type. Module variants are available by clicking the Switch button. The button is only available if there are variants available for the specific module type.

Datasources

Almost all modules have an associated datasource. The datasource is where the information about the specific module is stored. All datasources are located in a Datasources folder directly below the page on which they are inserted – organized in subfolders based on module types.

When creating a module, a corresponding datasource is automatically created and associated with the module. When deleting a module, the corresponding datasource is automatically deleted with it.

The use of datasources makes it possible to use multiple modules of the same type on a page without restrictions. The understanding of datasources is not relevant in the everyday editing of editors, but it is important to know that they exist.