@patternfly/react-core/src/demos/CardView/CardView.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: Card view
section: patterns
---

import { Fragment, useState } from 'react';
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import pfIcon from '../assets/pf-logo-small.svg';
import activeMQIcon from '../assets/activemq-core_200x150.png';
import avroIcon from '../assets/camel-avro_200x150.png';
import dropBoxIcon from '../assets/camel-dropbox_200x150.png';
import infinispanIcon from '../assets/camel-infinispan_200x150.png';
import saxonIcon from '../assets/camel-saxon_200x150.png';
import sparkIcon from '../assets/camel-spark_200x150.png';
import swaggerIcon from '../assets/camel-swagger-java_200x150.png';
import azureIcon from '../assets/FuseConnector_Icons_AzureServices.png';
import restIcon from '../assets/FuseConnector_Icons_REST.png';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';

import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

## Demos

This demonstrates how you can assemble a full page view that contains a grid of equal sized cards that includes a toolbar for managing card grid contents.

### Card view

```js file="./examples/CardView.tsx" isFullscreen
```