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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://theoremui.gitbook.io/react-store-ui-template/ui/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.