> For the complete documentation index, see [llms.txt](https://docs.reactnativestarter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactnativestarter.com/components/card.md).

# Card

Cards contain content and actions about a single subject.

![](https://1974771079-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LK6D3dfAKckmlwkiENO%2F-MGmdhd73qWg_lPPzHFf%2F-MGxFyu-Tmew2qW7Z4NL%2FSimulator%20Screen%20Shot%20-%20iPhone%2011%20-%202020-09-08%20at%2012.28.33.png?alt=media\&token=05ba3700-401e-4dfe-8f38-e7ac16f9f1b8)

\
In basic example, card accepts content view as child element.

```jsx
import { Card } from '../components';

<Card>
      <Text>Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.</Text>
</Card>
```

It also may have header and footer by configuring `header` ,`description` ,`footer` properties.

```jsx
import { Card } from '../components';

<Card title={"Title"} description={"Description"} footer={<View style={styles.footerContainer}><Button style={{marginRight: 10, flex: 1}} caption={"Cancel"} bordered primary /><Button primary caption={"Apply"} style={{flex: 1}} /></View>}>
      <Text>Today we are going to provide you with excellent articles to read in December. Enjoy fresh ideas, tips, and tricks from the JavaScript world.</Text>
</Card>
```

## Properties

| Name        | Type                          | Description                                       |
| ----------- | ----------------------------- | ------------------------------------------------- |
| children    | `ReactNode`                   | Component to render within the card.              |
| title       | `(ViewProps) => ReactElement` | Function component to render above the content.   |
| description | `(ViewProps) => ReactElement` | Function component to render description content. |
| footer      | `(ViewProps) => ReactElement` | Function component to render footer content.      |