diff --git a/packages/documentation/pages/usage/components/card.vue b/packages/documentation/pages/usage/components/card.vue
index 4cfb4cd7c1..64ce93a97a 100644
--- a/packages/documentation/pages/usage/components/card.vue
+++ b/packages/documentation/pages/usage/components/card.vue
@@ -1,7 +1,34 @@
 <template>
 	<div>
 		<ComponentInfo v-bind="{ component }" />
+		<div class="catalog-tile-view-example">
+			<KtCard
+				v-bind="{ imgPosition }"
+				imgUrl="https://picsum.photos/900/300"
+				:isImgLoading="false"
+				:isTextLoading="false"
+				primaryActionLabel="Command"
+				secondaryActionLabel="Cancel"
+			>
+				<h2 slot="card-header">Lorem Ipsum</h2>
+				<p slot="card-body">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+					consequat nisl at nisl condimentum vehicula.
+				</p>
+			</KtCard>
+		</div>
+		<br />
 
+		<div class="catalog-tile-view-example-2">
+			<KtCard v-bind="{ imgPosition }" imgUrl="https://picsum.photos/900/300">
+				<h2 slot="card-header">Lorem Ipsum</h2>
+				<p slot="card-body">
+					Moebius ring by pmaegermanis licensed under CC BY 3.0 (Creative
+					Commons https://www.thingiverse.com/thing:1649028
+				</p>
+			</KtCard>
+		</div>
+		<br />
 		<div class="element-example">
 			<KtCard>
 				<div slot="card-header">
@@ -68,3 +95,16 @@ export default defineComponent({
 	},
 })
 </script>
+
+<style lang="scss" scoped>
+.skeleton {
+	margin: auto;
+	&__header {
+		margin-bottom: var(--unit-2);
+		width: 80%;
+	}
+	&__body {
+		width: 80%;
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-card/KtCard.vue b/packages/kotti-ui/source/kotti-card/KtCard.vue
index 557ded79d3..b3c2d9f342 100644
--- a/packages/kotti-ui/source/kotti-card/KtCard.vue
+++ b/packages/kotti-ui/source/kotti-card/KtCard.vue
@@ -1,16 +1,37 @@
 <template>
-	<div :class="cardClass">
+	<div
+		:class="cardClass"
+		tabindex="0"
+		@click.prevent="handleClick"
+		@keyup.enter="handleClick"
+	>
 		<div v-if="imgUrl" :class="imageRowClass">
-			<img class="kt-card__image-row__image" :src="imgUrl" />
+			<div v-if="isImgLoading" class="skeleton square md" />
+			<img v-else class="kt-card__image-row__image" :src="imgUrl" />
 		</div>
 		<div v-if="$slots['card-header']" class="kt-card__header">
-			<slot name="card-header" />
+			<div v-if="isTextLoading" class="skeleton rectangle md" />
+			<slot v-else name="card-header" />
 		</div>
 		<div v-if="$slots['card-body']" class="kt-card__body">
-			<slot name="card-body" />
+			<div v-if="isTextLoading" class="skeleton rectangle sm" />
+			<slot v-else name="card-body" />
 		</div>
-		<div v-if="$slots['card-footer']" class="kt-card__footer">
-			<slot name="card-footer" />
+		<div v-if="$slots['card-footer'] || hasActions" class="kt-card__footer">
+			<div v-if="hasActions && !isTextLoading">
+				<KtButton
+					:data-test="secondaryDataTest"
+					:label="secondaryActionLabel"
+					type="text"
+					@click.prevent="$emit('secondary')"
+				/>
+				<KtButton
+					:data-test="primaryDataTest"
+					:label="primaryActionLabel"
+					type="primary"
+					@click.prevent="$emit('primary')"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
@@ -18,19 +39,31 @@
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api'
 
+import { KtButton } from '../kotti-button'
 import { makeProps } from '../make-props'
 
 import { KottiCard } from './types'
 
 export default defineComponent<KottiCard.PropsInternal>({
 	name: 'KtCard',
+	components: { KtButton },
 	props: makeProps(KottiCard.propsSchema),
-	setup(props) {
+	setup(props, { emit }) {
+		const hasActions = computed(
+			() =>
+				props.primaryActionLabel != null && props.secondaryActionLabel != null,
+		)
+
 		return {
 			cardClass: computed(() => ({
 				'kt-card': true,
+				'kt-card--is-clickable': !hasActions.value,
 				[`kt-card--has-${props.imgPosition}-image`]: props.imgUrl,
 			})),
+			handleClick: () => {
+				if (!hasActions.value) emit('click')
+			},
+			hasActions,
 			imageRowClass: computed(() => ({
 				'kt-card__image-row': true,
 				[`kt-card__image-row--is-${props.imgPosition}`]: props.imgUrl,
@@ -48,18 +81,30 @@ export default defineComponent<KottiCard.PropsInternal>({
 	padding: var(--unit-4);
 	word-break: break-word;
 	background: var(--ui-background);
-	border: 1px solid var(--ui-02);
 	border-radius: var(--border-radius);
-
 	&--has-top-image {
 		padding-top: 0;
 	}
 	&--has-bottom-image {
 		padding-bottom: 0;
 	}
-
+	&--is-clickable {
+		&:hover {
+			cursor: pointer;
+			border: 1px solid var(--interactive-01-hover);
+		}
+		&:active {
+			border-color: var(--primary-90);
+		}
+	}
+	.skeleton {
+		margin: 0;
+	}
 	&__header {
 		order: 2;
+		.skeleton {
+			margin: 0 0 var(--unit-2) 0;
+		}
 	}
 
 	&__body {
@@ -74,7 +119,7 @@ export default defineComponent<KottiCard.PropsInternal>({
 	&__image-row {
 		&__image {
 			display: block;
-			max-width: 100%;
+			width: 100%;
 		}
 
 		margin: var(--unit-4) calc(-1 * var(--unit-4));
diff --git a/packages/kotti-ui/source/kotti-card/types.ts b/packages/kotti-ui/source/kotti-card/types.ts
index ff33c4e390..6123aeca56 100644
--- a/packages/kotti-ui/source/kotti-card/types.ts
+++ b/packages/kotti-ui/source/kotti-card/types.ts
@@ -10,6 +10,12 @@ export namespace KottiCard {
 	export const propsSchema = z.object({
 		imgPosition: z.nativeEnum(ImagePosition).default(ImagePosition.TOP),
 		imgUrl: z.string().nullable().default(null),
+		isImgLoading: z.boolean().default(false),
+		isTextLoading: z.boolean().default(false),
+		primaryActionLabel: z.string().nullable().default(null),
+		primaryDataTest: z.string().optional(),
+		secondaryActionLabel: z.string().nullable().default(null),
+		secondaryDataTest: z.string().optional(),
 	})
 
 	export type Props = z.input<typeof propsSchema>
diff --git a/packages/kotti-ui/source/kotti-style/_loadings.scss b/packages/kotti-ui/source/kotti-style/_loadings.scss
index f42e28a964..448d7dfff8 100644
--- a/packages/kotti-ui/source/kotti-style/_loadings.scss
+++ b/packages/kotti-ui/source/kotti-style/_loadings.scss
@@ -47,6 +47,10 @@
 		@include skeleton-style(1800px, 1200px);
 		height: 0.4rem;
 
+		&.sm {
+			height: 0.4rem;
+		}
+
 		&.md {
 			height: 0.8rem;
 		}