@@ -149,11 +149,16 @@ var headerRowCode = 'Row { \n\
149149 %3 \n\
150150 }\n';
151151
152+// %1 is used as first child of the column
153+// %2 is used as second child of the column
152154var headerColumnCode = 'Column { \n\
153155 anchors.verticalCenter: parent.verticalCenter; \n\
154156 spacing: units.dp(2); \n\
155157 width: parent.width - x;\n\
156− %1 \n\
158+ data: [ %1\n\
159+ ,\n\
160+ %2 \n\
161+ ] \n\
157162 }\n';
158163
159164var mascotShapeLoaderCode = 'Loader { \n\
@@ -402,15 +407,17 @@ function cardString(template, components) {
402407 }
403408
404409 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
405− titleSubtitleCode += titleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
406−
410+ var titleCode = titleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
411+ var subtitleCode = "";
407412 if (hasSubtitle) {
408− titleSubtitleCode += subtitleLabelCode.arg(subtitleAnchors).arg(color);
413+ subtitleCode += subtitleLabelCode.arg(subtitleAnchors).arg(color);
409414 }
410415
411416 if (hasMascot && hasSubtitle) {
412417 // If using row + column wrap the code in the column
413− titleSubtitleCode = headerColumnCode.arg(titleSubtitleCode);
418+ titleSubtitleCode = headerColumnCode.arg(titleCode).arg(subtitleCode);
419+ } else {
420+ titleSubtitleCode = titleCode + subtitleCode;
414421 }
415422 }
416423