ant-design-vue/components/card/demo/in-column.vue

40 lines
777 B
Vue

<docs>
---
order: 4
title:
zh-CN: 栅格卡片
en-US: Card in column
---
## zh-CN
在系统概览页面常常和栅格进行配合
## en-US
Cards usually cooperate with grid column layout in overview page.
</docs>
<template>
<div style="background-color: #ececec; padding: 20px">
<a-row :gutter="16">
<a-col :span="8">
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-col>
</a-row>
</div>
</template>