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

import { Fragment, useState } from 'react';
import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-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 RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-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

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

```

### Primary-detail content padding

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

```

### Primary-detail card view

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

```

### Primary-detail simple list in card

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

```

### Primary-detail data list in card

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

```

### Primary-detail inline modifier

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

```
