<template>
    <v-row>
        <v-col cols="12">
            <SharedUiChildCard title="Avatar">
                <v-row>
                    <v-col cols="6">
                        <SharedUiChildCard title="Basic Avatar">
                            <ui-components-avatar-basic-avatar />
                        </SharedUiChildCard>
                    </v-col>
                    <v-col cols="6">
                        <SharedUiChildCard title="Icon Avatar">
                            <ui-components-avatar-icon-avatar />
                        </SharedUiChildCard>
                    </v-col>
                    <v-col cols="6">
                        <SharedUiChildCard title="Image Avatar">
                            <ui-components-avatar-image-avatar />
                        </SharedUiChildCard>
                    </v-col>
                    <v-col cols="6">
                        <SharedUiChildCard title="Letter Avatar">
                            <ui-components-avatar-letter-avatar />
                        </SharedUiChildCard>
                    </v-col>
                    <v-col cols="6">
                        <SharedUiChildCard title="Size Avatar">
                            <ui-components-avatar-size-avatar />
                        </SharedUiChildCard>
                    </v-col>
                    <v-col cols="6">
                        <SharedUiChildCard title="Variant Avatar">
                            <ui-components-avatar-variant-avatar />
                        </SharedUiChildCard>
                    </v-col>
                </v-row>
            </SharedUiChildCard>
        </v-col>
    </v-row>
</template>