<template>
<div class="xp-card" :id="`tab${item.name}`">
    <h5 class="xp-card-title">
        <i class="fa" :class="item.icon" aria-hidden="true"></i>
        <span>{{item.title}}</span>
    </h5>
    <slot></slot>
</div>
</template>

<script>
export default {
    name: 'card-pane',
    props: {
        item: {
            type: Object,
            default: () => ({})
        }
    }
};
</script>

<style lang="less" scoped>
.xp-card {
    &-title {
        margin-bottom: 10px;
    }
}
</style>
