NIBE NB Card Layout
Hållbarhet ligger i vår natur

Content Modules

– How to use our new content modules in SiteVision –

NB Card Layout

This new NB Card Layout module is to be used instead of all other types of standard card modules(including MultiList) in Sitevision as support for them will be removed by the end of 2022.

Settings

You add the module to the page via the Modules icon (cube) in the tool bar. Enter "NB Card Layout" in the module search bar and select it to add it to your page. Right-click the module on the page and choose "Settings" to get access to the module settings.


Color theme

A selected color theme is required and the choice between Blue, Green or transparent is given and will affect headings, background color, link colors, column borders and the color of optional use of buttons.


Columns

Choose to show cards by between one and four per row and new row automatically created if module contains more cards than selected number of columns.

The cards are always horizontally centered in a row if fewer than four columns are selected and the size of the cards adapts to the available row-width and the amount of content in the cards themselves. The height of the cards in a single row is always matches the card with the most content.


Column width

This option is only available when one or two columns per row is selected, selecting Fullwidth makes the cards stretch to fit the available space in a row.


Background color

It's possible to, even when having a selected color theme, choose to use a transparent background for the module and keep color theme for content.


Border

The module kan have a border around all of it's content if desired, The choices are Yes or No.


Text align

Content can be aligned to the left (default) or center.


Link

The choice to use a text- or a button link is optional. There can only be one text- or button link in each card and this button i always placed after all the text content. The button color will follow the selected color theme. The button has internal or external link options.


Media

The module kan have an optional image or icon at the top of each card. The choices are None, Image or Icon. Supported file formats for images are .jpg and .png. For icons - use the supplied svg-icons in the media library.
*Usage of our supplied icons in .svg-format is recommended as their size will adjust automatically and colors will honor selected color theme.


Image fit

Standard setting is "cover" which makes the image cover the entire container it lives in. The image automatically fits the width of the container and, if too large, is cropped by the container width or height limit. The focus of the image is always centered in the container.

It's also possible to choose the setting "contain" which forces the entire image to fit within the image container, centered and with some margin to all four sides of the container. This option is suitable for cut out images, like for example product images, magazine covers, logos etc.