> 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**

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHquUB3hnfqZOpIu1I2%2F-MHuyowb9U_B8Zs-OhcQ%2FScreenshot%202020-09-23%20at%205.39.43%20PM.png?alt=media\&token=e05fe901-dc0c-4cff-a192-b2137a11f67b)

### 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**

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHquUB3hnfqZOpIu1I2%2F-MHuyfog7BLJA7UGWO1_%2FScreenshot%202020-09-23%20at%205.39.58%20PM.png?alt=media\&token=286895e1-f558-4ef0-a6c5-391e861774b0)

**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**

![](https://3191317198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXqItWiS6ABccRINSZ%2F-MHquUB3hnfqZOpIu1I2%2F-MHuzCa-ui0XZZuoirnK%2FScreenshot%202020-09-23%20at%205.42.08%20PM.png?alt=media\&token=9c6a1047-3879-40c7-bdce-729d51a2c69b)

### **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       |