NB Card Layout

Text align 

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

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.

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.

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.