<template>
    <div class="ht-base-card-inside-demo">
        <ht-base-card dis-hover>
            <p slot="title" class="demo-first-title">卡片</p>
            <div class="demo-inside-title">内嵌标题</div>
            <ht-base-card dis-hover>
                <p slot="title">内部卡片标题</p>
                <a href="#" slot="extra">更多</a>
                <div>内部卡片内容</div>
            </ht-base-card>
            <ht-base-card style="margin-top: 10px" dis-hover>
                <p slot="title">内部卡片标题</p>
                <a href="#" slot="extra">更多</a>
                <div>内部卡片内容</div>
            </ht-base-card>
        </ht-base-card>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseCardInsideDemo',
    }
</script>
<style lang="less">
    .ht-base-card-inside-demo {
        p {
            margin-bottom: 0;
        }
        .demo-first-title {
            font-size: 16px;
        }
        .demo-inside-title {
            font-size: 16px;
            color: #333333;
            line-height: 1.5em;
            padding: 0 10px 10px;
        }
    }

</style>

