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

Hostinger Tools, version 3.0.78. 65 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Modals/Base/BaseModal.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.78/raw/vue-frontend/src/components/Modals/Base/BaseModal.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/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>

```