@ant-design/pro-card

What is @ant-design/pro-card?

@ant-design/pro-card is a component library that provides a set of card components for building complex card layouts in React applications. It is part of the Ant Design Pro ecosystem and is designed to work seamlessly with other Ant Design components.

What are @ant-design/pro-card's main functionalities?

Basic Card

This feature allows you to create a basic card with a title and bordered style. The card can contain any content inside it.

<ProCard title="Basic Card" bordered headerBordered>
  <div>Content inside the card</div>
</ProCard>

Grid Card

This feature allows you to create a grid layout within a card. You can specify the number of columns and their span to organize content in a structured manner.

<ProCard title="Grid Card" gutter={16} layout="center">
  <ProCard colSpan={8}>Column 1</ProCard>
  <ProCard colSpan={8}>Column 2</ProCard>
  <ProCard colSpan={8}>Column 3</ProCard>
</ProCard>

Tabbed Card

This feature allows you to create a card with tabs. Each tab can contain different content, making it easy to organize information in a compact space.

<ProCard tabs={{ type: 'card', items: [
  { key: 'tab1', tab: 'Tab 1', children: <div>Content of Tab 1</div> },
  { key: 'tab2', tab: 'Tab 2', children: <div>Content of Tab 2</div> }
] }} />

Other packages similar to @ant-design/pro-card

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It offers a Card component similar to @ant-design/pro-card, but with a different styling approach based on Bootstrap's design system.

material-ui

Material-UI (now MUI) is a comprehensive library of React components that implement Google's Material Design. It includes a Card component that offers similar functionality to @ant-design/pro-card, with a focus on Material Design aesthetics.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a Card component that allows for similar card-based layouts, but with Semantic UI's unique design language and features.

README

@ant-design/pro-card

@ant-design/pro-card.

See our website @ant-design/pro-card for more information.

Install

Using npm:

$ npm install --save  @ant-design/pro-card

or using yarn:

$ yarn add @ant-design/pro-card