# hostinger/3.0.78/vue-frontend/src/components/Card.vue

Hostinger Tools, version 3.0.78. 83 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Card.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.78/raw/vue-frontend/src/components/Card.vue
- Modified: 2025-09-09T07:18:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Card.vue#L10-L20`.

```vue
<script setup lang="ts">
import { defineEmits, defineProps, useSlots } from "vue";

interface Props {
	header?: string;
}

type Emits = {
	(eventName: "click"): void;
};

defineProps<Props>();

const emit = defineEmits<Emits>();
const slots = useSlots();
</script>

<template>
  <div
    class="card"
    @click="emit('click')"
  >
    <div class="card__header">
      <slot
        v-if="slots.header"
        name="header"
      />
      <h2
        v-else-if="header"
        class="h-m-0"
      >
        {{ header }}
      </h2>
    </div>
    <div class="card__body">
      <slot v-if="slots.default" />
    </div>

    <div
      v-if="slots.footer"
      class="card__footer"
    >
      <slot name="footer" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
	border-radius: 16px;
	border: 1px solid var(--gray-border);
	background: var(--light);
	display: flex;
	padding: 24px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	text-align: left;
	max-width: unset;
	width: 100%;

	&__header,
	&__body,
	&__footer {
		display: flex;
		width: 100%;
	}

	&__body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	&__footer {
		padding: 16px;
		cursor: pointer;
		text-align: right;
	}
}
</style>

```