Basic card

No border

Simple card

Card in column

Card

Simple rectangular container.

##When To Use
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

Examples

Card Title

card content

Basic card

A basic card containing a title, content and an extra corner content.

<template>
  <a-card title="Card Title">
    <a href="#" slot="extra">more</a>
    <p>card content</p>
    <p>card content</p>
    <p>card content</p>
  </a-card>
</template>

Card title

Card content

No border

A borderless card on a gray background.

<template>
<div style="background:#ECECEC; padding:30px">
  <a-card title="Card title" :bordered="false" style="width: 300px">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</div>
</template>

Card content

Simple card

A simple card only containing a content area.

<template>
  <a-card style="width:300px">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</template>

Card title

card content

Card title

card content

Card title

card content

Card in column

Cards usually cooperate with grid column layout in overview page.

<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>

Card title

Loading card

Shows a loading indirector while the contents of the card is being featched

<template>
  <a-card loading title="Card title" style="width: 34%;">
    whatever content
  </a-card>
</template>

Card Title

Content

Grid card

Grid style card content.

<template>
<a-card title="Card Title">
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
</a-card>
</template>

Card title

Group title

Inner card title

Inner Card content

Inner card title

Inner Card content

Inner card

It can be placed inside the ordinary card to display the information of the multilevel structure

<template>
  <a-card title="Card title">
    <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
    >Group title</p>
    <a-card title="Inner card title">
      <a href="#" slot="extra">More</a>
      Inner Card content
    </a-card>
    <a-card title="Inner card title">
      <a href="#" slot="extra">More</a>
      Inner Card content
    </a-card>
  </a-card>
</template>

Card title

tab1

tab2

content1

article

app

project

app content

With tabs

More content can be hosted

<template>
  <div>
    <a-card
      style="width:100%"
      title="Card title"
      :tabList="tabList"
      @tabChange="key => onTabChange(key, 'key')"
    >
      <span slot="customRender" slot-scope="item">
        <a-icon type="home"/>{{item.key}}
      </span>
      <a href="#" slot="extra">More</a>
      {{contentList[key]}}
    </a-card>
    <br /><br />
    <a-card
      style="width:100%"
      :tabList="tabListNoTitle"
      :activeTabKey="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <p v-if="noTitleKey === 'article'">article content</p>
      <p v-else="noTitleKey === 'app'">app content</p>
      <p v-else="noTitleKey === 'project'">project content</p>
    </a-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabList: [{
        key: 'tab1',
        // tab: 'tab1',
        scopedSlots: { tab: 'customRender'}
      }, {
        key: 'tab2',
        tab: 'tab2',
      }],
      contentList: {
        tab1: 'content1',
        tab2: 'content2',
      },
      tabListNoTitle: [{
        key: 'article',
        tab: 'article',
      }, {
        key: 'app',
        tab: 'app',
      }, {
        key: 'project',
        tab: 'project',
      }],
      key: 'tab1',
      noTitleKey: 'app',
    }
  },
  methods: {
    onTabChange (key, type) {
      console.log(key, type)
      this[type] = key
    },
  },
}
</script>

Card title

This is the description

Customized content

You can use Card.Meta to support more flexible content.

<template>
<a-card
  hoverable
  style="width: 300px"
>
  <img
    alt="example"
    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
    slot="cover"
  />
  <ul class="ant-card-actions" slot="actions">
    <li style="width: 33.3333%;"><a-icon type="setting" /></li>
    <li style="width: 33.3333%;"><a-icon type="edit" /></li>
    <li style="width: 33.3333%;"> <a-icon type="ellipsis" /></li>
  </ul>
  <a-card-meta
    title="Card title"
    description="This is the description">
    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  </a-card-meta>
</a-card>
</template>

API

Card

Property	Description	Type	Default
actions	The action list, shows at the bottom of the Card.	slot	-
bodyStyle	Inline style to apply to the card content	object	-
bordered	Toggles rendering of the border around the card	boolean	`true`
cover	Card cover	slot	-
extra	Content to render in the top-right corner of the card	string\|slot	-
hoverable	Lift up when hovering card	boolean	false
loading	Shows a loading indicator while the contents of the card are being fetched	boolean	false
tabList	List of TabPane's head, Custom tabs can be created with the scopedSlots property	Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}>	-
activeTabKey	Current TabPane's key	string	-
defaultActiveTabKey	Initial active TabPane's key, if `activeTabKey` is not set.	string	-
title	Card title	string\|slot	-
type	Card style type, can be set to `inner` or not set	string	-
onTabChange	Callback when tab is switched	(key) => void	-

Card.Grid

Property	Description	Type	Default
className	className of container	string	-
style	style object of container	object	-

Card.Meta

Property	Description	Type	Default
avatar	avatar or icon	slot	-
className	className of container	string	-
description	description content	slot	-
style	style object of container	object	-
title	title content	slot	-

Card

Examples

Basic card #

No border #

Simple card #

Card in column #

Loading card #

Grid card #

Inner card #

With tabs #

Customized content #

API #

Card #

Card.Grid #

Card.Meta #

Basic card

No border

Simple card

Card in column

Loading card

Grid card

Inner card

With tabs

Customized content

API

Card

Card.Grid

Card.Meta