> For the complete documentation index, see [llms.txt](https://theoremui.gitbook.io/react-store-ui-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://theoremui.gitbook.io/react-store-ui-template/ui/card.md).

# Card

React Native Store UI template provides flexibility to create different kinds of card elements

### Simple Card Item

```jsx
<Card>
	<CardContent padding={15}>
		<H3>React Tutorial For Beginners</H3>
		<P>This tutorial is considerably created for those who have at least basic knowledge of HTML, CSS, JavaScript, ES6, DOM, node, and npm.</P>
	</CardContent>
	<CardFooter padding={15}>
		<Left>
			<Btn label={'Read more'} onPress={() => console.log("do something")} />
		</Left>
		<Right></Right>
	</CardFooter>
</Card>
```

**Output**

![](/files/-MHuyowb9U_B8Zs-OhcQ)

### Card Item With Image

**Sample**

```jsx
<Card>
	<CardImage 
		source={{uri: 'http://intelvue.com/demo/app-template/item-3.jpg'}}
	/>
	<CardContent>
		<H3>Card Title ...</H3>
		<P>Card Description ...</P>
	</CardContent>
	<CardFooter>
		<Left><P>Left</P></Left>
		<Right><P>Right</P></Right>
	</CardFooter>
</Card>
```

**Output**

![](/files/-MHuyfog7BLJA7UGWO1_)

**Product Grid Sample**

```jsx
<Card style={this.props.style} onPress={() => this.props.onPress(this.props.item)}>
	<CardImage 
		source={{uri: this.props.item.images[0]}}
	/>
	<CardContent>
		<View>
			<Sm>{this.props.item.name}</Sm>
		</View>
	</CardContent>
	<CardFooter>
		<Left >
			<View>
				<StarRating rating={this.props.item.rating} />
				<Price price={this.props.item.price} specialPrice={this.props.item.special_price} />
			</View>
		</Left>
		<Right>
			<Touchable onPress={() => {}} style={[config.style.iconBtn, config.style.gridCartBtn]}>
				<Icon name={'shopping-cart'} size={20} color={config.style.iconBtnColor} />
			</Touchable>
		</Right>
	</CardFooter>
</Card>
```

**Product Grid Output**

![](/files/-MHuzCa-ui0XZZuoirnK)

### **Components**

**Card**

Card is a implement on top of `Touchable` component which accept all props that apply on React Native [`TouchableOpacity`](https://reactnative.dev/docs/touchableopacity)

| Props   | Required |
| ------- | -------- |
| onPress | Yes      |
| style   | no       |

**CardContent**

| **Props** | Required | Default |
| --------- | -------- | ------- |
| padding   | No       | 10      |
| style     | No       |         |

**CardFooter**

| **Props** | Required | Default |
| --------- | -------- | ------- |
| padding   | No       | 10      |
| style     | No       |         |

**CardImage**

CardImage is implemented on top of React Native [`Image`](https://reactnative.dev/docs/image#docsNav) component

| **Props** | Required |
| --------- | -------- |
| style     | No       |