Cards

Content

Cards page component has one mandatory content parameter:

• Cards - list of customizable action cards.

Cards

List of customizable action cards which can be built using Card Items. It needs a minimum of three and unlimited maximum number of Card Items.

Card Item

Cards building element which has five content parameters:

• Title - the title of the Card Item which is displayed below the Picture or Date if present.
• Description (optional) - text description which is displayed below the Title.
• Date (optional) - date in dd/mm/yy format which is displayed below the Picture.
• Picture - a Picture element which is displayed at the top of the card. Image supports a variety of media formats and image transparency. Also, it is very important to add a detailed image content description for the website to be accessible.
• Button (optional) - a URL to another page or website. This will create a button at the bottom of the card.

Also, it has three settings:

• Hide - hides the element in Cards component.
• Button Color - sets the card button color and overwrites Cards Button Color setting if present.
• Card Color - sets the card color and overwrites Cards Card Color setting if present.

Settings

Cards page component has the following settings:

• Hide - hides the component.
• Content Scroll - places all the cards in one row and makes the Cards container scrollable.
• Mobile Content Scroll - does the same as Content Scroll but active only on mobile devices (device width less than 992px).
• Content Horizontal Position - sets the Cards horizontal position on the page.
• Card Size - sets the size for the cards.
• Card Image Size - sets the card image size.
• Card Image Type - sets the card image shape type.
• Button Color - sets the card button color.
• Card Color - sets the card color.

Content Scroll

Toggling this setting will place all the cards in one row and make the Cards container scrollable.

This setting is very useful to prevent the page being too long when there are a lot of cards on the page. The setting will only be active if there are at least 4 elements in the block.

Mobile Content Scroll

Does the same as Content Scroll but active only on mobile devices (device width less than 992px). The Cards will look the same on desktop and tablet devices with or without this toggle active.

This setting is very useful to prevent the page on mobile devices being too long when there are a lot of cards on the page. It is recommended to always have this toggle on for cards, however, the setting will only be active if there are at least 3 elements in the block.

Content Horizontal Position

Sets the Cards horizontal position on the page. Aligns only the row of cards that don't fill the whole width of the layout column.

Card Size

Sets the size for the cards. Table below displays how many different size cards fit on various width devices in a single row.

Card Image Size

Sets the cards image size. It is only recommended to use it when the image has transparency, otherwise, it won't look great on the cards.

Card Image Type

Sets the card image shape type. By default the card image is 3:2 image aspect ratio, this setting changes the form factor of the image. However, it is only recommended to use it when the image has transparency, otherwise, it won't look great on the cards.

This setting can be combined with the Card Image Size setting to display different size and shape card Images.

Button Color

Sets the card button color. The button colors are the same as showcased in the Button Color section in the Button page.

Card Color

Sets the card color.