# hostinger/3.0.48/vue-frontend/src/components/Modals/Base/BaseModal.vue

Hostinger Tools, version 3.0.48. 55 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.48/code/vue-frontend/src/components/Modals/Base/BaseModal.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.48/raw/vue-frontend/src/components/Modals/Base/BaseModal.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.48/code/vue-frontend/src/components/Modals/Base/BaseModal.vue#L10-L20`.

```vue
<script lang="ts" setup>
import Icon from "@/components/Icon/Icon.vue";
import { Color, IconUnion } from "@/types";

interface Props {
  title?: string;
  subtitle?: string;
  titleIcon?: {
    name: IconUnion;
    color: Color;
  };
}

defineProps<Props>();
</script>

<template>
  <div class="base-modal">
    <span class="base-modal__title-container">
      <Icon
        v-if="titleIcon"
        class="h-mr-12"
        :name="titleIcon.name"
        :color="titleIcon.color"
      />
      <h2 v-if="title" class="base-modal__title text-heading-2">{{ title }}</h2>
    </span>
    <p v-if="subtitle" class="base-modal__subtitle">{{ subtitle }}</p>
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.base-modal {
  &__title-container {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  &__title {
    font-size: 20px;
    color: var(--dark);
    margin: 0;
    font-weight: 700;
  }

  &__subtitle {
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 24px;
    color: var(--gray);
  }
}
</style>

```