site_logiciels/components/Layout/UI/SubTitle.vue

<template>
  <LayoutContainer>
  <div class="subtitle">
    <v-icon :size="iconSize" :style="{ color: iconColor }" :class="iconClasses" />
    <h4 class="presentation-title" :style="{ color: titleColor }">{{ titleText }}</h4>  </div>
</LayoutContainer>
</template>

<script setup>
const props = defineProps({
  iconSize: {
    type: [String, Number],
    default: 6,
  },
  iconClasses: {
    type: String,
    default: 'fa-solid fa-circle icon-title',
  },
  titleText: {
    type: String,
    default: 'default title',
  },
  iconColor: { 
    type: String,
    default: 'rgba(32, 147, 190, 0.6)', 
  },
  titleColor: { 
    type: String,
    default: '#071b1f', 
  },
});
</script>

<style scoped>
.subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 3rem;
}

.presentation-title {
  color: #071b1f;
  font-family: Barlow;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

</style>