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

Basic card

<template>
  <a-card title="Default size card" style="width: 300px">
    <template #extra><a href="#">More</a></template>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</template>

No border

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

Simple card

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

Customized content

<template>
  <a-card hoverable style="width: 240px">
    <template #cover>
      <img
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
      />
    </template>
    <template #actions>
      <setting-outlined key="setting" />
      <edit-outlined key="edit" />
      <ellipsis-outlined key="ellipsis" />
    </template>
    <a-card-meta
      title="Card title"
      description="This is the description"
    >
      <template #avatar>
        <a-avatar src="https://joeschmoe.io/api/v1/random" />
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup>
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
</script>

Card in column

<template>
  <div style="background: #ececec; padding: 30px">
    <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>

Loading card

<template>
  <div>
    <a-card style="width: 300px; margin-top: 16px" :loading="loading">
      <template #actions>
        <setting-outlined key="setting" />
        <edit-outlined key="edit" />
        <ellipsis-outlined key="ellipsis" />
      </template>
      <a-card-meta
        title="Card title"
        description="This is the description"
      >
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
    <a-button style="margin-top: 16px" @click="loading = !loading">
      Toggle loading
    </a-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue'

const loading = ref(true)
</script>

Grid card

<template>
  <a-card title="Card Title">
    <div class="card-container">
      <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
      <a-card-grid hoverable 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>
    </div>
  </a-card>
</template>

<style scoped>
.card-container p {
  margin: 0;
}
</style>

Inner card

<template>
  <a-card title="Card title">
    <p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500">
      Group title
    </p>
    <a-card type="inner" title="Inner Card title" :extra="extra">
      Inner Card content
    </a-card>
    <a-card
      style="margin-top: 16px"
      type="inner"
      title="Inner Card title"
      :extra="extra"
    >
      Inner Card content
    </a-card>
  </a-card>
</template>

<script setup>
import { h } from 'vue'

const extra = h('a', { href: '#' }, 'More')
</script>

API

Card

Property	Description	Type	Default	Version
actions	The action list, shows at the bottom of the Card	slots	-
activeTabKey	Current TabPane's key	string	-
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	-
defaultActiveTabKey	Initial active TabPane's key, if activeTabKey is not set	string	-
extra	Content to render in the top-right corner of the card	string | slot	-
headStyle	Inline style to apply to the card head	object	-
hoverable	Lift up when hovering card	boolean	false
loading	Shows a loading indicator while the contents of the card are being fetched	boolean	false
size	Size of card	default | small	default
tabBarExtraContent	Extra content in tab bar	slot	-
tabList	List of TabPane's head	Array<{key: string, tab: any}>	-
tabProps	Tabs	-	-
title	Card title	string | slot	-
type	Card type, can be set to inner or not set	string	-

Card Events

Events Name	Description	Arguments	Version
tabChange	Callback when tab is switched	(key) => void

Card.Grid

Property	Description	Type	Default	Version
class	The className of container	string	-
hoverable	Lift up when hovering card grid	boolean	true
style	The style object of container	object	-

Card.Meta

Property	Description	Type	Default	Version
avatar	Avatar or icon	slot	-
description	Description content	string | slot	-
title	Title content	string | slot	-