willaengine/resources/js/Global/components/Dividers/PartTitle.vue

<template>
    <div class="SectionTitle WM-Width-100">
        <h4 class="TitleFa WM-Align-R" :class="TextFaColor" v-text="TitleFa"></h4>
        <div class="TitleEn WM-Flex">
            <span :class="[color,TextColor]" v-text="TitleEn"></span>
            <div class="Line">
                <div class="inner" :class="color"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "wm-part-title",
    props: {
        TitleFa: { default: "عنوان بخش" },
        TitleEn: { default: "Part Title" },
        color: { default: "black" },
        TextColor: { default: "white--text" },
        TextFaColor: { default: "black--text" }
    },
    data: function ()  {
        return {}
    },
};
</script>
<style lang="scss" scoped>
/* --------------------------------------------------------
                        SectionTitle :: Begin
-------------------------------------------------------- */

.SectionTitle .TitleFa {
    font-size: 1.7rem;
}

.SectionTitle .TitleEn {
    span {
        color: #fff;
        padding: 6px 25px 2px 25px;
        border-radius: 0.2em;
        letter-spacing: 0.5em;
        line-height: 18px;
        font-size: 12px;
        text-transform: uppercase;
    }
    .Line {
        flex-grow: 1;
        position: relative;
        .inner {
            position: absolute;
            top: 50%;
            width: calc(100% - 1em);
            left: 0;
            height: 1px;
        }
    }
}

</style>