logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
When To Use
Examples
Basic card
No border
Simple card
Customized content
Card in column
Loading card
Grid card
Inner card
With tabs
Support more content configuration
API
Card.Grid
Card.Meta
Semantic DOM
Design Token

Card

A container for displaying information.
Importimport { Card } from "antd";
Sourcecomponents/card
Docs
Edit this pageChangelog
contributors
  • CalendarCarousel

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community
    loading

    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

    API

    Common props ref:Common props

    jsx
    <Card title="Card title">Card content</Card>
    PropertyDescriptionTypeDefaultVersion
    actionsThe action list, shows at the bottom of the CardArray<ReactNode>-
    activeTabKeyCurrent TabPane's keystring-
    borderedToggles rendering of the border around the card, please use variant insteadbooleantrue
    variantVariants of Cardoutlined | borderless |outlined5.24.0
    coverCard coverReactNode-
    defaultActiveTabKeyInitial active TabPane's key, if activeTabKey is not setstringThe key of first tab
    extraContent to render in the top-right corner of the cardReactNode-
    hoverableLift up when hovering cardbooleanfalse
    loadingShows a loading indicator while the contents of the card are being fetchedbooleanfalse
    sizeSize of carddefault | smalldefault
    tabBarExtraContentExtra content in tab barReactNode-
    tabListList of TabPane's headTabItemType[]-
    tabPropsTabs--
    titleCard titleReactNode-
    typeCard style type, can be set to inner or not setstring-
    classNamesConfig Card build-in module's classNameRecord<SemanticDOM, string>-5.14.0
    stylesConfig Card build-in module's styleRecord<SemanticDOM, CSSProperties>-5.14.0
    onTabChangeCallback when tab is switched(key) => void-

    Card.Grid

    PropertyDescriptionTypeDefaultVersion
    classNameThe className of containerstring-
    hoverableLift up when hovering card gridbooleantrue
    styleThe style object of containerCSSProperties-

    Card.Meta

    PropertyDescriptionTypeDefaultVersion
    avatarAvatar or iconReactNode-
    classNameThe className of containerstring-
    descriptionDescription contentReactNode-
    styleThe style object of containerCSSProperties-
    titleTitle contentReactNode-

    Semantic DOM

    Design Token

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    actionsBgBackground color of card actionsstring#ffffff
    actionsLiMarginMargin of each item in card actionsstring12px 0
    bodyPaddingPadding of card bodynumber24
    bodyPaddingSMPadding of small card bodynumber12
    extraColorText color of extra areastringrgba(0,0,0,0.88)
    headerBgBackground color of card headerstringtransparent
    headerFontSizeFont size of card headerstring | number16
    headerFontSizeSMFont size of small card headerstring | number14
    headerHeightHeight of card headerstring | number56
    headerHeightSMHeight of small card headerstring | number38
    headerPaddingPadding of card headnumber24
    headerPaddingSMPadding of small card headnumber12
    tabsMarginBottomMargin bottom of tabs componentnumber-17
    Global TokenHow to use?
    Basic card

    A basic card containing a title, content and an extra corner content. Supports two sizes: default and small.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    No border

    A borderless card on a gray background.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Simple card

    A simple card only containing a content area.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Customized content

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

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Card in column

    Cards usually cooperate with grid column layout in overview page.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Loading card

    Shows a loading indicator while the contents of the card is being fetched.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Grid card

    Grid style card content.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Inner card

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

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    With tabs

    More content can be hosted.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Support more content configuration

    A Card that supports cover, avatar, title and description.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Default size card
    More

    Card content

    Card content

    Card content

    Small size card
    More

    Card content

    Card content

    Card content

    Card title

    Card content

    Card content

    Card content

    Card content

    Card content

    Card content

    example
    Europe Street beat
    www.instagram.com
    Card title
    Card content
    Card title
    Card content
    Card title
    Card content
    Card Title
    Content
    Content
    Content
    Content
    Content
    Content
    Content
    Card title
    Inner Card title
    More
    Inner Card content
    Inner Card title
    More
    Inner Card content
    Card title
    More
    tab1
    tab2

    content1



    article
    app
    project
    More

    app content

    example
    Card title
    This is the description
    Card title
    More
    example
    Card Meta title
    This is the description
    • header
      5.14.0
      set `header` of card
    • title
      5.14.0
      set `title` of card
    • extra
      5.14.0
      set `extra` of card
    • cover
      5.14.0
      set `cover` of card
    • body
      5.14.0
      set `body` of card
    • actions
      5.14.0
      set `actions` of card