Card Lists


Default card view with image url and defined groupcolumn


Heroimage card template


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.

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%;
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
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
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
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.
default: 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.
default: 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
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)
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;