♻️ Made use of n8n-card in existing components.

packages/editor-ui/src/components/Card.vue

@@ -1,20 +1,19 @@
 <template>
-	<div
+	<n8n-card
 		:class="$style.card"
-		@click="(e) => $emit('click', e)"
+		v-on="$listeners"
 	>
-		<div :class="$style.container">
+		<template #header v-if="!loading">
 			<span
-				v-if="!loading"
 				v-text="title"
 				:class="$style.title"
 			/>
-			<n8n-loading :loading="loading" :rows="3" variant="p" />
-			<div :class="$style.footer">
-				<slot name="footer"></slot>
-			</div>
-		</div>
-	</div>
+		</template>
+		<n8n-loading :loading="loading" :rows="3" variant="p" />
+		<template #footer v-if="!loading">
+			<slot name="footer" />
+		</template>
+	</n8n-card>
 </template>
 
 <script lang="ts">
@@ -38,11 +37,7 @@ export default mixins(genericHelpers).extend({
 .card {
 	width: 240px !important;
 	height: 140px;
-	border-radius: var(--border-radius-large);
-	border: $--version-card-border;
 	margin-right: var(--spacing-2xs);
-	background-color: var(--color-background-xlight);
-	padding: var(--spacing-s);
 	cursor: pointer;
 
 	&:last-child {
@@ -64,17 +59,4 @@ export default mixins(genericHelpers).extend({
 	overflow: hidden;
 	white-space: normal;
 }
-
-.container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-
-.footer {
-	display: flex;
-	justify-content: space-between;
-}
 </style>

packages/editor-ui/src/components/VersionCard.vue

@@ -1,4 +1,4 @@
-<template>
+ <template>
 	<!-- eslint-disable-next-line vue/no-mutating-props -->
 	<a v-if="version" :set="version = version" :href="version.documentationUrl" target="_blank" :class="$style.card">
 		<div :class="$style.header">

packages/editor-ui/src/plugins/components.ts

@@ -48,7 +48,7 @@ import {
 	N8nAvatar,
 	N8nActionToggle,
 	N8nButton,
-	N8nHeading,
+	N8nCard,
 	N8nIcon,
 	N8nIconButton,
 	N8nInfoTip,
@@ -84,6 +84,7 @@ Vue.use(N8nActionBox);
 Vue.use(N8nActionToggle);
 Vue.use(N8nAvatar);
 Vue.use(N8nButton);
+Vue.component('n8n-card', N8nCard);
 Vue.component('n8n-form-box', N8nFormBox);
 Vue.component('n8n-form-inputs', N8nFormInputs);
 Vue.component('n8n-icon', N8nIcon);