@@ -227,13 +227,14 @@ var kTitleLabelCode = 'Label { \n\
227227 horizontalAlignment: root.headerAlignment; \n\
228228 }\n';
229229
230+// %1 is used as extra anchors of emblemImage
230231var kEmblemImageCode = 'Image { \n\
231232 id: emblemImage; \n\
232233 objectName: "emblemImage"; \n\
233234 anchors { \n\
234235 bottom: titleLabel.baseline; \n\
235236 right: parent.right; \n\
236− rightMargin: units.gu(1); \n\
237+ %1
237238 } \n\
238239 source: cardData && cardData["emblem"] || ""; \n\
239240 width: height; \n\
@@ -394,6 +395,8 @@ function cardString(template, components) {
394395 headerLeftAnchor = 'left: parent.left;\n';
395396 }
396397
398+ var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary;
399+
397400 if (hasHeaderRow) {
398401 code += 'readonly property int headerHeight: row.height;\n'
399402 } else if (hasMascot) {
@@ -459,6 +462,13 @@ function cardString(template, components) {
459462 var titleContainerAnchors;
460463 var titleRightAnchor;
461464
465+ var extraRightAnchor = '';
466+ var extraLeftAnchor = '';
467+ if (!touchdownOnArtShape) {
468+ extraRightAnchor = 'rightMargin: units.gu(1); \n';
469+ extraLeftAnchor = 'leftMargin: units.gu(1); \n';
470+ }
471+
462472 if (hasMascot) {
463473 titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
464474 } else {
@@ -466,15 +476,15 @@ function cardString(template, components) {
466476 titleContainerAnchors += headerLeftAnchor;
467477 titleContainerAnchors += headerVerticalAnchors;
468478 if (!headerLeftAnchorHasMargin) {
469− titleContainerAnchors += 'leftMargin: units.gu(1);\n';
479+ titleContainerAnchors += extraLeftAnchor;
470480 }
471481 }
472482 if (hasEmblem) {
473483 titleRightAnchor = 'right: emblemImage.left; \n\
474484 rightMargin: emblemImage.width > 0 ? units.gu(0.5) : 0; \n';
475485 } else {
476− titleRightAnchor = 'right: parent.right; \n\
477− rightMargin: units.gu(1); \n';
486+ titleRightAnchor = 'right: parent.right; \n'
487+ titleRightAnchor += extraRightAnchor;
478488 }
479489
480490 if (hasTitleContainer) {
@@ -483,8 +493,8 @@ function cardString(template, components) {
483493 titleAnchors += 'left: parent.left; \n\
484494 top: parent.top;';
485495 subtitleAnchors = 'right: parent.right; \n\
486− left: parent.left; \n\
487− rightMargin: units.gu(1); \n';
496+ left: parent.left; \n';
497+ subtitleAnchors += extraRightAnchor;
488498 if (hasSubtitle) {
489499 attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
490500 subtitleAnchors += 'top: titleLabel.bottom;\n';
@@ -508,12 +518,12 @@ function cardString(template, components) {
508518 titleAnchors += headerLeftAnchor;
509519 titleAnchors += headerVerticalAnchors;
510520 if (!headerLeftAnchorHasMargin) {
511− titleAnchors += 'leftMargin: units.gu(1);\n';
521+ titleAnchors += extraLeftAnchor;
512522 }
513523 }
514524 subtitleAnchors = 'left: titleLabel.left; \n\
515− leftMargin: titleLabel.leftMargin; \n\
516− rightMargin: units.gu(1); \n';
525+ leftMargin: titleLabel.leftMargin; \n';
526+ subtitleAnchors += extraRightAnchor;
517527 if (hasEmblem) {
518528 // using container
519529 subtitleAnchors += 'right: parent.right; \n';
@@ -534,7 +544,6 @@ function cardString(template, components) {
534544 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra);
535545 var subtitleCode;
536546 var attributesCode;
537− var emblemCode;
538547
539548 // code for the title container
540549 var containerCode = [];
@@ -546,11 +555,11 @@ function cardString(template, components) {
546555 containerHeight += ' + subtitleLabel.height';
547556 }
548557 if (hasEmblem) {
549− containerCode.push(kEmblemImageCode);
558+ containerCode.push(kEmblemImageCode.arg(extraRightAnchor));
550559 }
551560 if (hasAttributes) {
552561 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
553− containerCode.push(kAttributesRowCode.arg(attributesAnchors).arg(titleColor));
562+ containerCode.push(attributesCode);
554563 containerHeight += ' + attributesRow.height';
555564 }
556565
@@ -607,7 +616,7 @@ function cardString(template, components) {
607616 var touchdownAnchors;
608617 if (hasBackground) {
609618 touchdownAnchors = 'fill: backgroundLoader';
610− } else if (hasArt && !hasMascot && !hasSummary) {
619+ } else if (touchdownOnArtShape) {
611620 touchdownAnchors = 'fill: artShapeHolder';
612621 } else {
613622 touchdownAnchors = 'fill: root'