# Card



```tsx
import {Card} from '@gravity-ui/uikit';
```

## Description

The `Card` UI component is a reusable React component that represents a card-like container with customizable styles and functionality. It is used to display information or content in a visually appealing and organized manner.

## Appearance

`Card` can be displayed with multiple styled combination

- theme (`normal`, `info`, `success`, `warning`, `danger`, `utility`)
- type (`selection`, `action`, `container`)
- view (`outlined`, `clear`) or (`outlined`, `filled`, `raised`) depends on `type` parameter

## Theme

This parameter is used to specify the theme style of the card. It determines the color scheme and visual appearance of the card.

By specifying different theme values, you can customize the visual appearance of the `Card` component to match the desired style and purpose.

- `normal`: represents the normal/default theme of the card.
- `info`: represents the theme for displaying informational content.
- `success`: represents the theme for displaying positive/affirmative content.
- `warning`: represents the theme for displaying warning or cautionary content.
- `danger`: represents the theme for displaying content related to danger or critical situations.
- `utility`: represents the theme for displaying utility content.



## Type

This parameter is used to define the type of the `Card` component. It allows you to customize the appearance and behavior of the card.

- `container`: represents a card that acts as a container for other elements. It provides a structured layout for content.
- `action`: represents a card with an interactive element, such as a button, that triggers an action when clicked.
- `selection`: represents a card that can be selected or clicked to perform a specific action.



## View

This parameter is used to specify the view or layout style of the `Card`. It allows you to customize the appearance and arrangement of the card content.

- `clear`: no style will be applied.
- `outlined`: applies thin border to highlight card content.
- `filled`: fills in the card content.
- `raised`: applies a shadow to slightly lift the container.



## Properties

| Name      | Description                                                         |    Type     |    Default    |
| :-------- | :------------------------------------------------------------------ | :---------: | :-----------: |
| children  | Card's content                                                      | `ReactNode` |               |
| type      | The Card type affects which properties are available                |  `string`   | `"container"` |
| view      | Available for `type`: `"container"` and `"selection"`               |  `string`   | `"outlined"`  |
| theme     | Card's base color. Available for `type`: `"container"`              |  `string`   |  `"normal"`   |
| size      | The Card size affects which properties are available                |  `string`   |     `"m"`     |
| className | CSS class                                                           |  `string`   |               |
| onClick   | Card click handler. Available for `type`: `"selection"`, `"action"` | `Function`  |               |
| selected  | Selected card. Available for type: `"selection"`                    |  `Boolean`  |               |
| disabled  | Disabled card. Available for type: `"selection"`, `"action"`        |  `Boolean`  |               |
| qa        | HTML `data-qa` attribute, used in tests                             |  `string`   |               |

## CSS API

| Name                        | Description      |
| :-------------------------- | :--------------- |
| `--g-card-background-color` | Background color |
| `--g-card-border-width`     | Border width     |
| `--g-card-border-color`     | Border color     |
| `--g-card-border-radius`    | Border radius    |
| `--g-card-box-shadow`       | Shadow           |