From 470876e6f3480d779afceac953564066caf88a03 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sat, 28 Feb 2026 23:31:49 +0100
Subject: [PATCH] update link card

---
 .../core/LinkCard/EditingLinkCard.svelte      | 309 +++++++++++-------
 src/lib/cards/core/LinkCard/LinkCard.svelte   | 208 +++++++-----
 .../core/LinkCard/LinkCardSettings.svelte     |  20 +-
 .../social/SembleCollectionCard/index.ts      |   4 -
 4 files changed, 351 insertions(+), 190 deletions(-)

diff --git a/src/lib/cards/core/LinkCard/EditingLinkCard.svelte b/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
index c6d2707..fc2a098 100644
--- a/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
+++ b/src/lib/cards/core/LinkCard/EditingLinkCard.svelte
@@ -113,160 +113,247 @@
 	onchange={handleImageChange}
 />
 
-<div class="relative flex h-full flex-col justify-between p-4">
-	<div
-		class={[
-			'accent:bg-accent-500/50 absolute inset-0 z-20 bg-white/50 dark:bg-black/50',
-			!hasFetched ? 'animate-pulse' : 'hidden'
-		]}
-	></div>
-
-	<div class={isFetchingMetadata ? 'pointer-events-none' : ''}>
-		<button
-			type="button"
-			class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 hover:ring-accent-500 relative mb-2 inline-flex size-8 cursor-pointer items-center justify-center rounded-xl border transition-all duration-200 hover:ring-2"
-			onclick={() => faviconInputRef?.click()}
-			onmouseenter={() => (isHoveringFavicon = true)}
-			onmouseleave={() => (isHoveringFavicon = false)}
-		>
-			{#if hasFetched && item.cardData.favicon && !faviconHasError}
-				<img
-					class="size-6 rounded-lg object-cover"
-					onerror={() => (faviconHasError = true)}
-					src={getImage(item.cardData, did, 'favicon')}
-					alt=""
-				/>
-			{:else}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="size-4"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 1 1.242 7.244"
-					/>
-				</svg>
-			{/if}
-			<!-- Hover overlay -->
-			<div
-				class={[
-					'absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 transition-opacity duration-200',
-					isHoveringFavicon ? 'opacity-100' : 'opacity-0'
-				]}
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-					class="size-4 text-white"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"
-					/>
-				</svg>
-			</div>
-		</button>
-
+{#if item.cardData.showBackgroundImage}
+	<div class="relative flex h-full flex-col justify-end p-4">
 		<div
 			class={[
-				'-m-1 rounded-md p-1 transition-colors duration-200',
-				hasFetched
-					? 'hover:bg-base-200/70 dark:hover:bg-base-800/70 accent:hover:bg-accent-200/30'
-					: ''
+				'accent:bg-accent-500/50 absolute inset-0 z-30 bg-white/50 dark:bg-black/50',
+				!hasFetched ? 'animate-pulse' : 'hidden'
 			]}
-		>
-			{#if hasFetched}
-				<PlainTextEditor
-					class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold"
-					key="title"
-					bind:contentDict={item.cardData}
-					placeholder="Title here"
-				/>
-			{:else}
-				<span class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold">
-					Loading data...
-				</span>
-			{/if}
-		</div>
-		<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
+		></div>
+
+		{#if item.cardData.image}
+			<img
+				class="absolute inset-0 -z-10 size-full object-cover"
+				src={getImage(item.cardData, did)}
+				alt=""
+			/>
+		{/if}
 		<div
-			class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
-		>
-			{item.cardData.domain}
-		</div>
-	</div>
+			class="from-base-50/90 via-base-50/40 dark:from-base-950/90 dark:via-base-950/40 absolute inset-0 -z-10 bg-linear-to-t to-transparent"
+		></div>
 
-	{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))}
+		<!-- Full card click to change image -->
 		<button
 			type="button"
-			class="hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
+			class="absolute inset-0 z-10 cursor-pointer"
 			onclick={() => imageInputRef?.click()}
 			onmouseenter={() => (isHoveringImage = true)}
 			onmouseleave={() => (isHoveringImage = false)}
 		>
-			{#if item.cardData.image}
-				<img
-					class="h-full w-full object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
-					src={getImage(item.cardData, did)}
-					alt=""
-				/>
-			{:else}
-				<div class="bg-base-200 dark:bg-base-800 flex h-full w-full items-center justify-center">
+			<div
+				class={[
+					'absolute inset-0 flex items-center justify-center bg-black/50 transition-opacity duration-200',
+					isHoveringImage ? 'opacity-100' : 'opacity-0'
+				]}
+			>
+				<div class="text-center text-sm text-white">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-						class="text-base-400 dark:text-base-600 size-8"
+						class="mx-auto mb-1 size-6"
 					>
 						<path
 							stroke-linecap="round"
 							stroke-linejoin="round"
-							d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+							d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
 						/>
 					</svg>
+					<span class="font-medium">{item.cardData.image ? 'Change image' : 'Add image'}</span>
 				</div>
-			{/if}
-			<!-- Hover overlay -->
+			</div>
+		</button>
+
+		<!-- Domain and title at the bottom, above the image button -->
+		<div class="relative z-20">
+			<div class="text-accent-600 dark:text-accent-400 text-xs font-semibold">
+				{item.cardData.domain}
+			</div>
 			<div
 				class={[
-					'absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 transition-opacity duration-200',
-					isHoveringImage ? 'opacity-100' : 'opacity-0'
+					'-m-1 rounded-md p-1 transition-colors duration-200',
+					hasFetched ? 'hover:bg-base-200/70 dark:hover:bg-base-800/70' : ''
 				]}
 			>
-				<div class="text-center text-sm text-white">
+				{#if hasFetched}
+					<PlainTextEditor
+						class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold"
+						key="title"
+						bind:contentDict={item.cardData}
+						placeholder="Title here"
+					/>
+				{:else}
+					<span class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold">
+						Loading data...
+					</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="relative flex h-full flex-col justify-between p-4">
+		<div
+			class={[
+				'accent:bg-accent-500/50 absolute inset-0 z-20 bg-white/50 dark:bg-black/50',
+				!hasFetched ? 'animate-pulse' : 'hidden'
+			]}
+		></div>
+
+		<div class={isFetchingMetadata ? 'pointer-events-none' : ''}>
+			<button
+				type="button"
+				class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 hover:ring-accent-500 relative mb-2 inline-flex size-8 cursor-pointer items-center justify-center rounded-xl border transition-all duration-200 hover:ring-2"
+				onclick={() => faviconInputRef?.click()}
+				onmouseenter={() => (isHoveringFavicon = true)}
+				onmouseleave={() => (isHoveringFavicon = false)}
+			>
+				{#if hasFetched && item.cardData.favicon && !faviconHasError}
+					<img
+						class="size-6 rounded-lg object-cover"
+						onerror={() => (faviconHasError = true)}
+						src={getImage(item.cardData, did, 'favicon')}
+						alt=""
+					/>
+				{:else}
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-						class="mx-auto mb-1 size-6"
+						class="size-4"
 					>
 						<path
 							stroke-linecap="round"
 							stroke-linejoin="round"
-							d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 1 1.242 7.244"
 						/>
+					</svg>
+				{/if}
+				<!-- Hover overlay -->
+				<div
+					class={[
+						'absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 transition-opacity duration-200',
+						isHoveringFavicon ? 'opacity-100' : 'opacity-0'
+					]}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+						stroke="currentColor"
+						class="size-4 text-white"
+					>
 						<path
 							stroke-linecap="round"
 							stroke-linejoin="round"
-							d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+							d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"
 						/>
 					</svg>
-					<span class="font-medium">{item.cardData.image ? 'Change' : 'Add image'}</span>
 				</div>
+			</button>
+
+			<div
+				class={[
+					'-m-1 rounded-md p-1 transition-colors duration-200',
+					hasFetched
+						? 'hover:bg-base-200/70 dark:hover:bg-base-800/70 accent:hover:bg-accent-200/30'
+						: ''
+				]}
+			>
+				{#if hasFetched}
+					<PlainTextEditor
+						class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold"
+						key="title"
+						bind:contentDict={item.cardData}
+						placeholder="Title here"
+					/>
+				{:else}
+					<span class="text-base-900 dark:text-base-50 line-clamp-2 text-lg font-bold">
+						Loading data...
+					</span>
+				{/if}
 			</div>
-		</button>
-	{/if}
-</div>
+			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
+			<div
+				class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
+			>
+				{item.cardData.domain}
+			</div>
+		</div>
+
+		{#if hasFetched && browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4))}
+			<button
+				type="button"
+				class="hover:ring-accent-500 relative mb-2 aspect-2/1 w-full cursor-pointer overflow-hidden rounded-xl transition-all duration-200 hover:ring-2"
+				onclick={() => imageInputRef?.click()}
+				onmouseenter={() => (isHoveringImage = true)}
+				onmouseleave={() => (isHoveringImage = false)}
+			>
+				{#if item.cardData.image}
+					<img
+						class="h-full w-full object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+						src={getImage(item.cardData, did)}
+						alt=""
+					/>
+				{:else}
+					<div class="bg-base-200 dark:bg-base-800 flex h-full w-full items-center justify-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="text-base-400 dark:text-base-600 size-8"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+							/>
+						</svg>
+					</div>
+				{/if}
+				<!-- Hover overlay -->
+				<div
+					class={[
+						'absolute inset-0 flex items-center justify-center rounded-xl bg-black/50 transition-opacity duration-200',
+						isHoveringImage ? 'opacity-100' : 'opacity-0'
+					]}
+				>
+					<div class="text-center text-sm text-white">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="mx-auto mb-1 size-6"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+							/>
+						</svg>
+						<span class="font-medium">{item.cardData.image ? 'Change' : 'Add image'}</span>
+					</div>
+				</div>
+			</button>
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/cards/core/LinkCard/LinkCard.svelte b/src/lib/cards/core/LinkCard/LinkCard.svelte
index 04cf00f..aff1dba 100644
--- a/src/lib/cards/core/LinkCard/LinkCard.svelte
+++ b/src/lib/cards/core/LinkCard/LinkCard.svelte
@@ -14,34 +14,18 @@
 	let did = getDidContext();
 </script>
 
-<div class="flex h-full flex-col justify-between p-4">
-	<div>
+{#if item.cardData.showBackgroundImage && item.cardData.image}
+	<div class="relative flex h-full flex-col justify-end p-4">
+		<img
+			class="absolute inset-0 -z-10 size-full object-cover"
+			src={getImage(item.cardData, did)}
+			alt=""
+		/>
 		<div
-			class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
-		>
-			{#if item.cardData.favicon && !faviconHasError}
-				<img
-					class="size-6 rounded-lg object-cover"
-					onerror={() => (faviconHasError = true)}
-					src={getImage(item.cardData, did, 'favicon')}
-					alt=""
-				/>
-			{:else}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="size-4"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
-					/>
-				</svg>
-			{/if}
+			class="from-base-50/90 via-base-50/40 dark:from-base-950/90 dark:via-base-950/40 absolute inset-0 -z-10 bg-linear-to-t to-transparent"
+		></div>
+		<div class="text-accent-600 dark:text-accent-400 text-xs font-semibold">
+			{item.cardData.domain}
 		</div>
 		<div
 			class={[
@@ -51,55 +35,131 @@
 		>
 			{item.cardData.title}
 		</div>
-		<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
-		<div
-			class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
-		>
-			{item.cardData.domain}
-		</div>
-	</div>
-
-	{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
-		<img
-			class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
-			src={getImage(item.cardData, did)}
-			alt=""
-		/>
-	{/if}
-	{#if item.cardData.href && !isEditing}
-		<a
-			href={item.cardData.href}
-			class="absolute inset-0 h-full w-full"
-			target="_blank"
-			rel="noopener noreferrer"
-			use:qrOverlay={{
-				context: {
-					title: item.cardData.title
-				}
-			}}
-		>
-			<span class="sr-only">
-				{item.cardData.hrefText ?? 'Learn more'}
-			</span>
+		{#if item.cardData.href && !isEditing}
+			<a
+				href={item.cardData.href}
+				class="absolute inset-0 h-full w-full"
+				target="_blank"
+				rel="noopener noreferrer"
+				use:qrOverlay={{
+					context: {
+						title: item.cardData.title
+					}
+				}}
+			>
+				<span class="sr-only">
+					{item.cardData.hrefText ?? 'Learn more'}
+				</span>
 
+				<div
+					class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2.5"
+						stroke="currentColor"
+						class="size-4"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/if}
+	</div>
+{:else}
+	<div class="flex h-full flex-col justify-between p-4">
+		<div>
 			<div
-				class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+				class="bg-base-100 border-base-300 accent:bg-accent-100/50 accent:border-accent-200 dark:border-base-800 dark:bg-base-900 mb-2 inline-flex size-8 items-center justify-center rounded-xl border"
 			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2.5"
-					stroke="currentColor"
-					class="size-4"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+				{#if item.cardData.favicon && !faviconHasError}
+					<img
+						class="size-6 rounded-lg object-cover"
+						onerror={() => (faviconHasError = true)}
+						src={getImage(item.cardData, did, 'favicon')}
+						alt=""
 					/>
-				</svg>
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-4"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+						/>
+					</svg>
+				{/if}
 			</div>
-		</a>
-	{/if}
-</div>
+			<div
+				class={[
+					'text-base-900 dark:text-base-50 text-lg font-bold',
+					(isMobile() && item.mobileH < 8) || (!isMobile() && item.h < 4) ? 'line-clamp-2' : ''
+				]}
+			>
+				{item.cardData.title}
+			</div>
+			<!-- <div class="text-base-800 dark:text-base-100 mt-2 text-xs">{item.cardData.description}</div> -->
+			<div
+				class="text-accent-600 accent:text-accent-950 dark:text-accent-400 mt-2 text-xs font-semibold"
+			>
+				{item.cardData.domain}
+			</div>
+		</div>
+
+		{#if browser && ((isMobile() && item.mobileH >= 8) || (!isMobile() && item.h >= 4)) && item.cardData.image}
+			<img
+				class="mb-2 aspect-2/1 w-full rounded-xl object-cover opacity-100 transition-opacity duration-100 starting:opacity-0"
+				src={getImage(item.cardData, did)}
+				alt=""
+			/>
+		{/if}
+		{#if item.cardData.href && !isEditing}
+			<a
+				href={item.cardData.href}
+				class="absolute inset-0 h-full w-full"
+				target="_blank"
+				rel="noopener noreferrer"
+				use:qrOverlay={{
+					context: {
+						title: item.cardData.title
+					}
+				}}
+			>
+				<span class="sr-only">
+					{item.cardData.hrefText ?? 'Learn more'}
+				</span>
+
+				<div
+					class="bg-base-800/30 border-base-900/30 absolute top-2 right-2 rounded-full border p-1 text-white opacity-50 backdrop-blur-lg group-focus-within:opacity-100 group-hover:opacity-100"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="2.5"
+						stroke="currentColor"
+						class="size-4"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
index 94810da..8c72b0c 100644
--- a/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
+++ b/src/lib/cards/core/LinkCard/LinkCardSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { validateLink } from '$lib/helper';
 	import type { Item } from '$lib/types';
-	import { Button, Input, toast } from '@foxui/core';
+	import { Button, Checkbox, Input, Label, toast } from '@foxui/core';
 
 	let { item, onclose }: { item: Item; onclose: () => void } = $props();
 
@@ -48,3 +48,21 @@
 		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
 	</svg>
 </Button>
+<div class="flex items-center space-x- mt-4">
+	<Checkbox
+		bind:checked={
+			() => Boolean(item.cardData.showBackgroundImage),
+			(val) => (item.cardData.showBackgroundImage = val)
+		}
+		id="show-bg-image"
+		aria-labelledby="show-bg-image-label"
+		variant="secondary"
+	/>
+	<Label
+		id="show-bg-image-label"
+		for="show-bg-image"
+		class="text-sm leading-none ml-2 font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	>
+		Show background image
+	</Label>
+</div>
diff --git a/src/lib/cards/social/SembleCollectionCard/index.ts b/src/lib/cards/social/SembleCollectionCard/index.ts
index d8216b9..f9aea8f 100644
--- a/src/lib/cards/social/SembleCollectionCard/index.ts
+++ b/src/lib/cards/social/SembleCollectionCard/index.ts
@@ -46,8 +46,6 @@ async function loadCollectionData(
 		listRecords({ did, collection: 'network.cosmik.card', limit: 0 }).catch(() => [])
 	]);
 
-	console.log(allLinks);
-
 	if (!collection) return undefined;
 
 	const linkedCardUris = new Set(
@@ -56,8 +54,6 @@ async function loadCollectionData(
 			.map((link: any) => link.value.card?.uri)
 	);
 
-	console.log(linkedCardUris);
-
 	const cards: SembleCard[] = allCards
 		.filter((card: any) => linkedCardUris.has(card.uri))
 		.map((card: any) => {
-- 
2.51.2