Card Lists

12421242

Default card view with image url and defined groupcolumn

10801080

Heroimage card template

752752

Backgroundimage card template

Card views are like a grid view. They share the basic definitions with them. You can activate the card view by setting the item definition contenttype="cardlist".
The available columns are also defined via the listcolumns definition.
The first column will be the header line, the second column the middle line and the third column the last line of a card. If links to online available image files are included in the source file, these images are displayed on the right side of the card.

DefinitionDescriptionValuesExample
height=;Sets the height of the whole card list element (in "pixel" or as a percentage of the display).px or as % of the displayheight=80%;
height=400;
categorycolumn=;The category column is used to create the color markers on the left side of the card.

You cannot define a color for a single value inside this column! The system will create the categories based on occurrence and a given color palette.
Column list indexcategorycolumn=1;
categorywidth=;Sets the width of the left color tag. This color tag can be defined using the flag "categorycolumn".px
default: 15
categorywidth=15;
categorycolorpalette=,,,;This color palette will be used for the category colors. The first entry is , the second , the third , the fourth and then again.hex code
default: #EDAD52,#21BADA,#3CC795,#EC7063
categorycolorpalette=#EDAD52,#21BADA,#3CC795,#EC7063;
cardtemplate=;Sets the template of the card list.

heroimage: When using the hero image template, the height of the image can be controlled with definition imageheight=150 (default = 150). This is similar to the imagewidth=60 definition that is used with the default template.

backgroundimage: When using the background image template, the image is stretched. If there is no image available, the card background is set to the color used for the category column.
default, heroimage, backgroundimage
default: default
cardtemplate=heroimage;
imagewidth=;Sets the width of the right image in default card template.
The image will be automatically added when there is a listcolumn with a valid url defined.
px
default: 60
imagewidth=60;
imageheight=;Sets the height of the image in heroimage card template.
The image will be automatically added when there is a listcolumn with a valid url defined.
px
default: 150
imageheight=150;
imagefillmode=;The imagefillmode definition determines how the image is stretched.

The width for the image is set to 60px.

"Aspect fit" scales the image until the biggest side fits flush with the target area. This may cause blank spaces.

"Aspect fill" scales the image until the smallest side fits flush with the target area. (Height of the card, 60px width.)
When using aspect fill your image may be cropped.

"Fill" will stretch and/or scale the image as needed to fill the desired space, what will often lead to a distorted image.
aspectfit, aspectfill, fill
default: aspectfill
imagefillmode=aspectfill;
cardpadding=,,,;cardpadding=,,,;Comma separated px values.

You can specify 1, 2 or 4 values:
cardpadding=10; for uniform padding,
cardpadding=10,20; for left=10,right=10,top=20,bottom=20
cardpadding=10,20,30,40; for left=10,top=20,right=30,bottom=40 (starting left going clockwise)
cardpadding=10,20,30,40;
cardcolor=;Sets the background color of the card. This does not tangent the category labels on the left.hex codecardcolor=#FF5600;
titletextcolor=;Sets the text color of the first row in the card.hex codetitletextcolor=#FF5600;
infotextcolor=;Sets the text color of the 2nd and 3rd row.hex codeinfotextcolor=#FF5600;