Multisolution component

The multisolution component allows you to create a tab kind of structure using blocks and the respective content for each block.

Variants
Layout options
Themes

Variants

Image variant

We cannot retrieve your data. Please make your own choice.

Default

You have this

Default

You have this

Height

The image variant has a variable height. This is based on the height of the image and the height of the title.

Width

The width of the image variant is based on the set amount of columns in the grid. Starting from 2 columns up to 6 columns.

Max-width

6 columns

Min-width

2 columns

The width

The width is set by the author and can range from 2 up to 6 columns.

The width is defined at the component level. So every element will have the same width. When there are more elements in the component that could fit on one line, they will appear on a second line.

The height

The height is defined by the image. So all images in the same component, must be uploaded with the same height.

Mobile behaviour

On mobile breakpoints, every element is shown full width, without the images & underneath eachother. Only the text is visible.

Icon variant

We cannot retrieve your data. Please make your own choice.

Default

You have this

Default

You have this

Height

The icon variant has a fixed height of 88px.

Width

The width of the icon variant depends on the length of the text or the specified number of columns.

Max-width

556px

Min-width

172px

The height

We foresee a fixed height of 88px. In the case of a long title, the text will jump on two lines, but it will still fit in the component.

When there is a small title, the height of the component will remain the same 88px. The text will be middle vertically aligned.

The width

Ideally we have two variants of this component where we can define the width based on the length of the text, where the maximum and minimum width is guaranteed.

And a variant where we can define the width based on a specified number of columns.

Mobile behaviour

On mobile breakpoints, every element is shown full width & underneath eachother. The icon as well as the text is shown.

Text variant

We cannot retrieve your data. Please make your own choice.

Default

You have this

Default

You have this

Height

The text variant has a fixed height of 88px.

Width

The width of the text variant depends on the length of the text or the specified number of columns.

Max-width

556px

Min-width

76px

The width

Ideally we have two variants of this component where we can define the width based on the length of the text, where the maximum and minimum width is guaranteed.

And a variant where we can define the width based on a specified number of columns.

The height

We foresee a fixed height of 88px. In the case of a long title, the text will jump on two lines, but it will still fit in the component.

When there is a small title, the height of the component will remain the same 88px. The text will be middle vertically aligned.

Mobile behaviour

Default

You have this

Themes

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution image variant has a width of 2 grid and does not have a flexible grid option.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution icon variant has a flexible width.

We cannot retrieve your data. Please make your own choice.

This tab contains text

You have this

Default

You have this

This tab contains text

You have this

Default

You have this

This multisolution text variant has a flexible width.

Multisolution component

Variants

Image variant

Measurements

Height

Width

Max-width

Min-width

Behaviour

The width

The height

Mobile behaviour

Icon variant

Measurements

Height

Width

Max-width

Min-width

Behaviour

The height

The width

Mobile behaviour

Text variant

Measurements

Height

Width

Max-width

Min-width

Behaviour

The width

The height

Mobile behaviour

Layout options

Flex

Grid two

Grid three

Grid four

Grid five

Grid six

Themes

Light UI

Dark UI

Streamz UI

Play Sports UI

Play More UI

Telenet TV UI

You are using an outdated browser.