# RecordCard

**Kind:** Class

A card component that displays an Airtable record.

[[ Story id="recordcard--example" title="RecordCard example" ]]

---

## RecordCardProps

**Kind:** Interface

Props for the `RecordCard` component. Also accepts:
* `RecordCardStyleProps`

### Properties

#### `attachmentCoverField?`

Type: `Field`

Attachment field to display as an image in the square preview for the card. If omitted or not an attachment field, it uses for the first attachment field in `fields`. If `fields` is not defined, it uses the first attachment field in the view.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the record card.

#### `expandRecordOptions?`

Type: `ExpandRecordOpts | null`

Options object for expanding a record.

#### `fields?`

Type: `Array<Field>`

Fields to display in the card. The primary field is always displayed.

#### `height?`

Type: `undefined | number`

Height of the record card.

#### `onClick?`

Type: `object | null`

Click event handler for the record card. If undefined, uses default behavior to expand record. If null, no operation is performed.

#### `onMouseEnter?`

Type: `object | null`

Mouse enter event handler for the record card.

#### `onMouseLeave?`

Type: `object | null`

Mouse leave event handler for the record card.

#### `record`

Type: `Record | RecordDef`

Record to display in the card.

#### `renderInvalidCellValue?`

Type: `undefined | object`

Render function if provided and validation fails.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the record card.

#### `view?`

Type: `View`

The view model to use for field order and record coloring.

#### `width?`

Type: `undefined | number`

Width of the record card.