# hostinger/trunk/vue-frontend/src/components/Notice.vue

Hostinger Tools, version trunk. 31 lines.

- Page: https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/components/Notice.vue
- Raw: https://pluginprobe.com/plugins/hostinger/trunk/raw/vue-frontend/src/components/Notice.vue
- Modified: 2025-06-12T12:05: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/trunk/code/vue-frontend/src/components/Notice.vue#L10-L20`.

```vue
<script setup lang="ts">

import Icon from "@/components/Icon/Icon.vue";

type Props = {
  text: string;
};
const props = defineProps<Props>();

</script>
<template>
  <div class="hostinger-notice d-flex align-items-center w-100 mt-3">
    <Icon
        name="icon-info"
        color="gray-dark"
    />
    <p class="text-body-3">{{props?.text}}</p>
  </div>
</template>

<style lang="scss" scoped>
.hostinger-notice {
  background: var(--gray-light);
  color: var(--gray-dark);
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  gap: 1em;
}
</style>
```