# EntityPage.Card

**Category:** Base Components/Pages/Entity Page

## Examples

### Basic

This example demonstrates a basic usage of the `Card` in both the main and supplementary content.

```tsx
import React from 'react';
import {
  EntityPage,
  EntityPageState,
  useEntity,
  useEntityPage,
} from '@wix/patterns';
import { useForm } from '@wix/patterns/form';
import { Box, Card, Text } from '@wix/design-system';

interface MyEntity {
  id: string;
  name?: string;
  createdAt: Date;
  updatedAt: Date;
}

function Basic() {
  const form = useForm();
  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
    parentPageId: '',
    form,
    onSave: () =>
      Promise.resolve({
        updatedEntity: {
          ...state.entity,
        } as MyEntity,
      }),
    saveErrorToast: (e) => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        entity: {
          id: 'id',
          name: 'Entity Name',
          createdAt: new window.Date(),
          updatedAt: new window.Date(),
        },
      }),
  });

  const entity = useEntity<MyEntity>(state);

  return (
    <EntityPage state={state}>
      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
      <EntityPage.Content>
        <EntityPage.MainContent>
          <EntityPage.Card minHeight="24px">
            <Card.Header title="Main Content Card" />
            <Card.Divider />
            <Card.Content>
              <Box gap="SP2" direction="vertical">
                <Text>Hi from the main content!</Text>
              </Box>
            </Card.Content>
          </EntityPage.Card>
        </EntityPage.MainContent>
        <EntityPage.AdditionalContent>
          <EntityPage.Card minHeight="24px">
            <Card.Header title="Side Content Card" />
            <Card.Divider />
            <Card.Content>
              <Box gap="SP2" direction="vertical">
                <Text>Hi from the side panel!</Text>
              </Box>
            </Card.Content>
          </EntityPage.Card>
        </EntityPage.AdditionalContent>
      </EntityPage.Content>
    </EntityPage>
  );
}
```

---

### Card States

This example showcases various card statuses: `loading`, `error`, and `success`. Each status displays a corresponding state: Skeleton for `loading`, an Error state for `error`, or the actual children component for `success`.

```tsx
import React from 'react';
import {
  EntityPage,
  EntityPageState,
  useEntity,
  useEntityPage,
} from '@wix/patterns';
import { useForm } from '@wix/patterns/form';
import { Box, Card, Text } from '@wix/design-system';
import { CardContainerProps } from '../../../dist/types/components/CardContainer';

interface MyEntity {
  id: string;
  name?: string;
  createdAt: Date;
  updatedAt: Date;
}

function States() {
  const form = useForm();
  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
    parentPageId: '',
    form,
    onSave: () =>
      Promise.resolve({
        updatedEntity: {
          ...state.entity,
        } as MyEntity,
      }),
    saveErrorToast: (e) => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        entity: {
          id: 'id',
          name: 'Entity Name',
          createdAt: new window.Date(),
          updatedAt: new window.Date(),
        },
      }),
  });

  const entity = useEntity<MyEntity>(state);

  const [status1, setStatus1] =
    React.useState<CardContainerProps['status']>('loading');

  const [status2, setStatus2] =
    React.useState<CardContainerProps['status']>('error');

  React.useEffect(() => {
    window.setTimeout(() => {
      setStatus1('success');
    }, 5000);
  }, []);

  return (
    <EntityPage state={state}>
      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
      <EntityPage.Content>
        <EntityPage.MainContent>
          <EntityPage.Card minHeight="24px" status={status1}>
            <Card.Header title="Loading -> Success" />
            <Card.Divider />
            <Card.Content>
              <Box gap="SP2" direction="vertical">
                <Text>It took a while but I'm here now!</Text>
              </Box>
            </Card.Content>
          </EntityPage.Card>
        </EntityPage.MainContent>
        <EntityPage.AdditionalContent>
          <EntityPage.Card minHeight="24px" status="loading">
            <Card.Header title="Loading..." />
            <Card.Divider />
            <Card.Content>
              <Box gap="SP2" direction="vertical">
                <Text>Just a sec...</Text>
              </Box>
            </Card.Content>
          </EntityPage.Card>
          <EntityPage.Card
            minHeight="24px"
            status={status2}
            errorState={{
              action: {
                text: 'Retry',
                onClick: () => {
                  setStatus2('loading');
                  window.setTimeout(() => {
                    setStatus2('success');
                  }, 2000);
                },
              },
            }}
          >
            <Card.Header title="Error Card" />
            <Card.Divider />
            <Card.Content>
              <Box gap="SP2" direction="vertical">
                <Text>Just a sec...</Text>
              </Box>
            </Card.Content>
          </EntityPage.Card>
        </EntityPage.AdditionalContent>
      </EntityPage.Content>
    </EntityPage>
  );
}
```

## API

### Overview

A card container used inside [`EntityPage.MainContent`](./?path=/story/base-components-pages-entity-page--entitypage-maincontent) or [`EntityPage.AdditionalContent`](./?path=/story/base-components-pages-entity-page--entitypage-additionalcontent). It wraps form fields and content sections with a card layout, and supports loading/error/success states for async content.

```tsx
import { EntityPage } from '@wix/patterns/page';
```

### Extends

[Card](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-card--card)

### Composition

```tsx

  
  
    
        {/* ← this component */}
        
          {/* form fields */}
        
      
    
  

```

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `status` | `"error" \| "loading" \| "idle" \| "success"` | No | - | Additional loading flag, if you need to show loader after the main entity is fetched. Also, if an error occurs on a side request (other than passed to `fetch`), you can use `error` to show the card error state. Alongside with `error` you also need to pass `errorState.onRetry` callback, which should change the `status` accordingly. |
| `minHeight` | `string` | No | - | Height of content while loading (not including paddings) |
| `errorState` | `ErrorCardProps` | No | - | Card Error State configuration |
| `id` | `string` | No | - | Identifier of the card. If you want to open a page and auto-scroll and focus ont his card, pass in the the query params `anchor={yourCardId}`. |
| `children` | `ReactNode` | No | - | Contains elements inside the card such as `<Card.Header/>`, `<Card.Subeader/>`, `<Card.Content/>` or `<Card.Divider/>`. |
| `controls` | `ReactNode` | No | - | Contains elements that control the component, usually a `<CloseButton/>`. |
| `stretchVertically` | `boolean` | No | - | Makes a card stretch vertically to max height in a layout or container. |
| `hideOverflow` | `boolean` | No | - | Defines whether to hide portions of card content that overflows its dimensions. |
| `showShadow` | `boolean` | No | - | Defines whether to apply a drop shadow effect. |
| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in tests. |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component's root element. |
| `highlight` | `"focus"` | No | - | Applies a highlighting effect on the borders of the component. |