Cards

A cards component is a versatile user interface element used to organize and present content in a visually engaging format. Cards can be displayed in either horizontal or vertical layouts, typically combining images or illustrations with related text. This flexible structure allows for clear separation of information and supports a variety of content types, making it easy for users to scan, compare, and interact with distinct sections of information.

Horizontal Cards

Horizontal Cards are visual elements that supports aligning text elements like title and description side-by-side with an image. On larger displays like tablets and desktop, the horizontal card component is presented with its content in a row with image either to the left or right of the text. On mobile screens, the images will be positioned above the text content.

Horizontal Cards with Left Image Placement

First Horizontal Card with Left Image Placement

Here, the image will appear to the left of the text content of the card.

Horizontal Card with Left Image Placement

Cards also supports links!

Link to NG Nordic

Horizontal Card with Right Image Placement

Here, the image will appear to the right of the text content of the card.

Tip: It's possible to render a single card using the Cards component. To do this, only provide a single Card element in the list of Cards and control the image position to either the left or right.

Horizontal Cards with Alternating Image Placement

First Horizontal Card with Alternating Image Placement

Setting the "alternating" option for image placement will render the set of cards with every other card having a left and right image placement.

Second Horizontal Card with Alternating Image Placement

So, regardless of the length of the Cards list and if the content is reordered, the layout will always present the first card with a left image placement, then the second will have a right image placement and so on.

Third Horizontal Card with Alternating Image Placement

Horizontal Cards without images

Cards does not require images

In the case where a card is missing an image, it is rendered with a placeholder image to maintain the layout and visual balance of the page.

Vertical Cards

Important: When selecting the Vertical layout for Cards, the image placement will be ignored.

A Single Vertical Card

Vertical Cards supports links

A Vertical Card

Cards with Vertical layout are displayed with images above the text content. When only providing a single card, this will be rendered using the whole width of page.

Two Vertical Cards

First Vertical Card

Second Vertical Card

Three Vertical Cards

First Vertical Card

Second Vertical Card

Third Vertical Card

Four Vertical Cards

First Vertical Card

Second Vertical Card

Third Vertical Card

Fourth Vertical Card

Five or more Vertical Cards

First Vertical Card

Second Vertical Card

Third Vertical Card

Fourth Vertical Card

Fifth Vertical Card

Vertical Cards without images

When all vertical cards are lacking images, only the title and description will be rendered.

This can be used to present text in a column layout

These text cards will behave in the same way that the cards with images.

Vertical Cards with some cards missing images

If one or more cards have an image, those cards lacking images will get an image placeholder to maintain the layout and visual balance.

Vertical Card with image

Vertical Card without image

Vertical Card with image

Properties

Card
Title	The main text content of the card
Description	Rich text content, supporting basic text formatting.
Image	The image to be displayed in the component.
Internal Link	The Internal Link consist of two elemenst: - Label: The link label to be displayed. - Link: The relative path to another page in the CMS. To create an Internal Link, drag and drop an Organizational folder to the Link section in the Internal Link.
External Link	The External Link consist of two elemenst: - Label: The link label to be displayed. - Link: The absolute path to another website. Provde the complete URL including potential "https://" and "www".

Cards
Cards	A repeating chunk of Card elements
Layout	Toggle "Horizontal" (default) or "Vertical" layout for all cards
Image Placement	Toggle "Left" (default), "Right" or "Alternating" image placements