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

Hostinger Tools, version 3.0.39. 68 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.39/code/vue-frontend/src/components/Card.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.39/raw/vue-frontend/src/components/Card.vue
- Modified: 2025-03-03T08:32:52+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.39/code/vue-frontend/src/components/Card.vue#L10-L20`.

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

interface Props {
  header?: string;
}

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

withDefaults(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 class="h-m-0" v-else-if="header">{{ header }}</h2>
    </div>
    <div class="card__body">
      <slot v-if="slots.default" />
    </div>

    <div class="card__footer" v-if="slots.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>

```