logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
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
Card.Grid
Card.Meta
Design Token

Card

    • CalendarCarousel

    Resources

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

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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

    API

    Common props ref：Common props

    <Card title="Card title">Card content</Card>

    Card

    PropertyDescriptionTypeDefaultVersion
    actionsThe action list, shows at the bottom of the CardArray<ReactNode>-
    activeTabKeyCurrent TabPane's keystring-
    bodyStyleInline style to apply to the card contentCSSProperties-
    borderedToggles rendering of the border around the cardbooleantrue
    coverCard coverReactNode-
    defaultActiveTabKeyInitial active TabPane's key, if activeTabKey is not setstring-
    extraContent to render in the top-right corner of the cardReactNode-
    headStyleInline style to apply to the card headCSSProperties-
    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-
    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-

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    actionsBgBackground color of card actionsstring#ffffff
    actionsLiMarginMargin of each item in card actionsstring12px 0
    extraColorText color of extra areastringrgba(0, 0, 0, 0.88)
    headerBgBackground color of card headerstringtransparent
    headerFontSizeFont size of card headernumber16
    headerFontSizeSMFont size of small card headernumber14
    headerHeightHeight of card headernumber56
    headerHeightSMHeight of small card headernumber38
    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.

    expand codeexpand code
    No border

    A borderless card on a gray background.

    expand codeexpand code
    Simple card

    A simple card only containing a content area.

    expand codeexpand code
    Customized content

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

    expand codeexpand code
    Card in column

    Cards usually cooperate with grid column layout in overview page.

    expand codeexpand code
    Loading card

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

    expand codeexpand code
    Grid card

    Grid style card content.

    expand codeexpand code
    Inner card

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

    expand codeexpand code
    With tabs

    More content can be hosted.

    expand codeexpand code
    Support more content configuration

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

    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