site_logiciels/components/Layout/UI/SubTitle.vue

<!--
Titre H4 précédé d'une puce
-->
<template>
  <LayoutContainer>
    <div class="container">
      <v-icon
        :icon="icon"
        :size="iconSize"
      />
      <h2>
        <slot />
      </h2>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
const router = useRouter();

const props = defineProps({
  icon: {
    type: String,
    default: "fas fa-circle",
  },
  iconSize: {
    type: [String, Number],
    default: 5,
  },
});
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  color: var(--primary-color);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.v-icon {
  color: var(--on-primary-color-alt);
}

h2 {
  color: var(--on-neutral-color);
  font-weight: 500;
  font-size: 1rem;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

</style>