# Card

To implement Card component into your project you'll need to the import at least the Card and the [CardSection](#cardsection):

```jsx
import { Card, CardSection } from '@kiwicom/orbit-react-native';
```

After adding import into your project you can use it simply like:

```jsx
<Card>
  <CardSection>Hello World!</CardSection>
</Card>
```

## Props

Table below contains all types of the props available in the Card component.

| Name       | Type                         | Default | Description                                                                                                                                    |
| :--------- | :--------------------------- | :------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| children   | `React.Node`                 |         | The content of the Card. [See Subcomponents](#subcomponents)                                                                                  |
| testID     | `string`                     |         | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!)                                 |
| onClose    | `(event) => void \| Promise` |         | Function for handling onPress event.                                                                                                           |
| spaceAfter | `enum`                       |         | Additional `marginBottom` after component. [See this docs](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken) |

## Subcomponents

Card component offers a good flexibility and many variations in its usage. There are four subcomponents which you may use.

### CardHeader

```jsx
import { Card, CardHeader } from '@kiwicom/orbit-react-native';
```

#### Usage:

```jsx
<Card>
  <CardHeader title="Hello World!" />
</Card>
```

#### Props

Table below contains all types of the props in CardHeader component.

| Name      | Type         | Default | Description                                                                                                    |
| :-------- | :----------- | :------ | :------------------------------------------------------------------------------------------------------------- |
| testID    | `string`     |         | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!) |
| icon      | `React.Node` |         | Displayed icon.                                                                                                |
| **title** | `React.Node` |         | The title of the CardHeader.                                                                                   |
| subTitle  | `React.Node` |         | The description of the CardHeader.                                                                             |
| actions   | `React.Node` |         | Actions in CardHeader especially Buttons                                                                       |

### CardSection

```jsx
import { Card, CardSection } from '@kiwicom/orbit-react-native';
```

#### Usage:

```jsx
<Card>
  <CardSection>Hello World!</CardSection>
</Card>
```

#### Props

Table below contains all types of the props in CardSection component.

| Name            | Type                    | Default | Description                                                                                                    |
| :-------------- | :---------------------- | :------ | :------------------------------------------------------------------------------------------------------------- |
| **children**    | `React.Node`            |         | The content of the CardSection.                                                                                |
| expandable      | `boolean`               |         | CardSection could be expandable                                                                                |
| initialExpanded | `boolean`               |         | CardSection is expanded by default                                                                             |
| onClose         | `() => void \| Promise` |         | Callback after close                                                                                           |
| onExpand        | `() => void \| Promise` |         | Callback after expand                                                                                          |
| testID          | `string`                |         | Optional prop for testing purposes. (This disables the 'layout-only view removal' optimization for this view!) |

### CardSectionHeader

```jsx
import { Card, CardSection, CardSectionHeader } from '@kiwicom/orbit-react-native';
```

#### Usage:

```jsx
<Card>
  <CardSection>
    <CardSectionHeader>Hello World!</CardSectionHeader>
  </CardSection>
</Card>
```

#### Props

Table below contains all types of the props in CardSectionHeader component.

| Name         | Type         | Default | Description                                     |
| :----------- | :----------- | :------ | :---------------------------------------------- |
| **children** | `React.Node` |         | The content of the CardSection.                 |
| actions      | `React.Node` |         | Actions in CardSectionHeader especially Buttons |

### CardSectionContent

```jsx
import { Card, CardSection, CardSectionContent } from '@kiwicom/orbit-react-native';
```

#### Usage:

```jsx
<Card>
  <CardSection>
    <CardSectionContent>Hello World!</CardSectionContent>
  </CardSection>
</Card>
```

#### Props

Table below contains all types of the props in CardSectionContent component.

| Name         | Type         | Default | Description                                                                          |
| :----------- | :----------- | :------ | :----------------------------------------------------------------------------------- |
| **children** | `React.Node` |         | The content of the CardSection.                                                      |
| visible      | `boolean`    |         | If visible is passed and CardSection is expandable, the content will be always shown |