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

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

---
id: Primary-detail
section: patterns
---

import { Fragment, useState } from 'react';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-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

### Primary-detail full page

```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
```

### Primary-detail content padding

```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen

```

### Primary-detail card view

```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
```

### Primary-detail simple list in card

```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
```

### Primary-detail data list in card

```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
```

### Primary-detail inline modifier

```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen

```