ReactJS UI Ant Design Card Component

02 Jun, 2021
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Card Component is used as a simple rectangular container, and it is used when the user wants to display content related to a single subject. We can use the following approach in ReactJS to use the Ant Design Card Component.
Card Props:
actions: It is used to denote the action list.
activeTabKey: It is used to denote the current TabPane’s key.
bodyStyle: It is used to denote the inline style to apply to the card content.
bordered: It is used to toggle the rendering of the border around the card.
cover: It is used to denote the Card cover.
defaultActiveTabKey: It is used to denote the Initial active TabPane’s key.
extra: It is used for the Content to render in the top-right corner of the card.
headStyle: It is used to denote the Inline style to apply to the card head.
hoverable: It is used to Lift up when hovering the card grid.
loading: It is used to show a loading indicator while the contents of the card are being fetched.
size: It is used to denote the size of the card.
tabBarExtraContent: It is used to denote the Extra content in the tab bar.
tabList: It is used to denote the List of TabPane’s head.
tabProps: It is used to denote the Tab props.
title: It is used to denote the Card title.
type: It is used to denote the Card style type.
onTabChange: It is a callback function that is triggered when the tab is switched.
Card.Grid Props:
className: It is used to denote the className of the container.
hoverable: It is used to Lift up when hovering the card grid.
style: It is used to pass the style object of the container.
Card.Meta Props:
avatar: It is used to denote the Avatar or icon.
className: It is used to denote the className of the container.
description: It is used to denote the description content.
style: It is used to pass the style object of the container.
title: It is used to denote the title content.
 
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install antd
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'import "antd/dist/antd.css";import { Card } from 'antd';  export default function App() {    return (    <div style={{      display: 'block', width: 700, padding: 30    }}>      <h4>ReactJS Ant-Design Card Component</h4>      <>        <Card title="Card title" bordered          style={{            width: 500,            border: '2px solid black'          }}>          <p>Sample Card Content 1</p>            <p>Sample Card Content 2</p>            <p>Sample Card Content 3</p>          </Card>      </>    </div>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/card/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components
ReactJS setState()
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?