This component defines the containers used in the VI design. All templates within this styleguide are build with the these containers.

Note that they are defined separately from the BS containers. We want to safely overlay legacy styling based on BS.

Wrap content inside the .vi-container to maintain a centered container with a max-width of 1920px. Without any modifiers it is used to define the outer edges of the VI design.

Use modifier --column to maintain a centered container with a max-width of 1024px.

On smaller devices left and right space between container and viewport is 30px. From a viewport width of 768px and up this space is 50px until max-width is reached.

Most of the times this container is used to define the outer edges of the content or components inside the VI design.

Use modifier --column-visual to maintain a centered container with a max-width of 1124px.

There is no left or right space between container and viewport until max-width is reached.

Use to wrap visuals near a --column container. On smaller devices the visuals are full width.

Use modifier --screen for fullscreen pages (as required by TWS)

Specificly the min-width is required for sticky position trickery.

Following modifiers are for very specific use cases. Never use them in the wild.

Use modifier --slider-align-start or --slider-align-end inside Card Slider when in aligned mode.

Padding has very specific adjustments.

Use modifier --table-align-start or --table-align-end inside Table when in aligned mode.

Padding has very specific adjustments.

The following stylesheet is required to display this component.