The top-level h1 element is used for web page titles, this component should be used only once per page.

Guidance

A second-level header element. Can be used multiple times per page.

Guidance

A third-level header element.

Guidance

A paragraph of plain text.

Guidance

A generic header, not hierarchical on the page. Can be styled like any hierarchical header element, if needed.

Every line in the list is turned into a bullet point.

• Phasellus dapibus velit at feugiat suscipit.
• Phasellus sagittis neque sit amet ante elementum blandit.
• Quisque sagittis diam sed est blandit sollicitudin.
• Proin consequat augue in est volutpat, eget consequat neque dapibus.
• Donec at lacus accumsan enim dictum egestas.

Every line in the list is numbered.

1. Vivamus congue lacus sed justo bibendum mollis non a risus.
2. Integer quis mauris eleifend, pharetra tellus a, porttitor nibh.
3. Donec id sem dapibus, porta justo ac, dapibus velit.
4. Vestibulum sed massa vehicula lectus feugiat tempor nec sit amet tellus.
5. Vivamus pretium nisi ullamcorper, mattis leo sed, placerat libero.

A question and corresponding answer that is shown when the toggle-arrow is clicked.

Place an image, full-width.

The imagebox can be used in one of two ways, based on the given class.

The 'cover' class will have the image fill the whole box, even if it means that some parts of the image will not be visible.

The 'contain' class makes sure the whole image is visible, but this may lead to whitespace at the edges, either horizontally or vertically.

with class 'cover'

with class 'contain'

Set an image as the background, and overlay other components at will.

Puts a video component on the page, supported types are Youtube and Vimeo.

Note that this is 3rd-party content, and as such is susceptable to the users cookie settings.

Add a download link to a file on the website.

Make a complete folder, including subfolders, available for download.

Place a link to a page elsewhere in the website.

Place a link to an external website. This will be opened in a new tab.

Alternatively you can link to a section in this website that isn't reachable via a regular page, such as part of the catalog.

Place a link on the site, but have it look like a button.

Create an anchor-element, you can link to this specific point on the page. The element itself is invisible.

Create a set of links to a group of pages (they share a parentid).

A predefined card showing title, text, an image with a button and a link.

A predefined card showing title, an image with a button and a link.

Place a card showing a single product. There's a couple of templates to choose from, like showing price and order information.

Shows a card with the address information for your company.

A card showing personal details of a person, e.g. your support staff.

A simple card, just showing a title, description, and an image.

Create a new snippet. It isn't actually saved separately until you click the 'Save & embed' button.

Embeds an existing snippet on the page.

Add a Google map, pick a center and zoom-level, and set a marker that can show some info.

Adds a Google Map, automatically centered on one of your defined company locations.

Add a variable amount of vertical whitespace between components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices eros nec justo sodales, in venenatis enim euismod. Curabitur sit amet nunc id tellus pellentesque iaculis molestie quis nisi. Morbi quis augue a dui sagittis

ursus est. Quisque vel placerat urna, vel iaculis tellus. Sed ut massa felis. Maecenas ornare molestie lorem, maximus convallis massa fermentum ut. Vivamus eget diam massa. Nulla luctus lectus et arcu pharetra, ac rhoncus metus molestie. Aenean molestie euismod sagittis. Suspendisse potenti

A horizontal line can be used as a separator between sections.

Shows the configured social media options.

Show some of the latest news items.

Show the top level of the catalog, and optionally one level below when you use the treeview style.

A tiled view showing manually selected products.

A tiled view showing a random selection of promoted products.

Show all the available brands with their logo and a link to the catalog page showing everything for the selected brand.

Change your cookie settings.

Group a set of components.

Shows a property list, which is a simple two-column table.

Create a slideshow of different components.

Create a gallery of different component, each with their own thumbnail.

Put any number of items in a container, and use the arrows to navigate between them.

Highlight a specific section of the page.

Shows only the top part of the contents initially, but there's a button to show the rest.

The contents are initially hidden on small and medium devices, but can be shown by clicking the button.

Control who has access to the contents of this components. Differentiate between guests and users, or specify specific roles.

Set a date/time slot during which the contents are visible. Will come in handy when announcing holidays when the company is closed for business.

A simple table. Define the number of header-rows, the number of columns, and start adding cells.

This is plain text, you'll use this component mainly in table cells. Any cell supports all components though.

Add a sidebar to the main content area.

All added tiles are distributed over the number of columns you can specify per device-size, from left to right. If there's more tiles than columns, new rows are added automatically.

All items in the rows component are placed vertically. You can specify a specific style per row, and you can order the rows using drag and drop.

Adds a contact form.

Adds a feedback form.

Adds a newsletter subscription form.

Adds an office-locator form. Supports fetching your current location. Shows the closest offices to the given location.

Adds a direct-order form, where you type an article number and a quantity and quickly adds it to your basket.