<template>
     <div class="bottom-margin-large box-shadow-light rounded-large" :class="classObject">
        <div class="header-base-listing flex-column">
            <div class="flex content-center">
                <span v-if="showicon" class="base-listing-icon">
                    <i :class="icon"></i>
                </span>

                <div :class="`flex content-center between-xs`">
                    <div class="base-listing-separation">
                        <span :class="`base-listing-subTitle ${titleSize}`" v-text="subtitle"></span>
                        <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`" v-text="subtitlevalue"></span>
                    </div>
                    <div class="base-listing-separation">
                        <span :class="`base-listing-subTitle ${titleSize}`" v-text="subtitlesecond"></span>
                        <span style="font-weight: bold;" :class="`text-dark-opacity ${titleSize}`" v-text="subtitlesecondvalue"></span>
                    </div>
                </div>
            </div>
            <div class="base-listing-division"></div>
        </div>
        
        <slot>
        </slot>
    </div>
</template>

<style src="./styles.css" scoped></style>
<script src="./scripts.js"></script>