Solution

To create card using ant design in react js, first install ant design library using npm install antd command import and use the Card component from it.

Snippet

In this snippet, see small example for using Card component of Ant design library, with use of title="Card title" attribute.

<Card title="Card title" bordered
 style={{
    width: 500,
	border: '2px solid black' 
  }}>
</Card>

Table of contents

  • Install Ant Design.
  • Import Ant Design Components..
  • Create the Card Component.

Let’s start with the first step.

Step 1: Install Ant Design.

To get started, first you need to install Ant Design in your React project. So that you can run the following command in your terminal:

npm install antd

Step 2: Import Ant Design Components.

You need to import the Ant Design components that you want to use in your project. To create a card, you need to import the Card component from Ant Design. You can do this by adding the following code to your React component:

import { Card } from 'antd';

Step 3: Create the Card Component.

Here we have created a simple card with a title and content. You can customize the card by adding various props to the card component.

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

Example

In this example, we will import the Card component from the ant library. We created a basic card using the Ant Design Card component in React JS. And have presented a card component with a title and some sample content. Have set the width and border of the card using the style prop.

Let’s start coding…

App.js

import React from 'react'

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>
);
}

Output

Ant-design, card

Here, we are provided code sandbox links for the above program to create card using ant design in react js. Then you can use whenever you went and do the changes as per your requirements

codesandbox

Happy Coding,

I hope the above example with help you to do your task.