> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/reactify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/ui-components/cards.md).

# Cards

You can add the component on any page in the template. You need to follow the steps given below: 

**Step 1:** Please add the code given below in the page where you want to add the component.

```
<Card>
  <CardImg top width="100%" className="img-fluid ripple-effect" src={require('Assets/img/gallery-1.jpg')} alt="Card image cap" />
  <CardBody>
       <CardTitle>Card Title</CardTitle>
       <CardSubtitle>Card Subtitle</CardSubtitle>
       <CardText>Some quick example text to build on the card title and make up the bulk of the cards content.</CardText>
       <Button size="small" color="primary">Read More</Button>
  </CardBody>
</Card>
```

**Step 2:** Now Import the component from its parent library.

```
import {
   Card,
   CardImg,
   CardText,
   CardBody,
   CardTitle,
   CardSubtitle,
   Button
} from 'reactstrap';
```

We have given you an example of adding a simple card on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwLf7-N3LlKXnYcDpL%2F-LbwSt8uCbkoS56-13dl%2FSelection_030.png?alt=media\&token=cf9345c3-165b-4e50-9ee6-e58c74211931)

You can check some other layouts of cards below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->cards->index.js` file.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvDTY8UmcryNxpxp9I%2FScreenshot%202019-04-08%20at%2010.01.18%20AM.png?alt=media\&token=0e3e44f4-28f4-4cd3-a776-2704a8fe092b)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvDVzt2KSKA93As9Pk%2FScreenshot%202019-04-08%20at%2010.01.37%20AM.png?alt=media\&token=a5709028-a18c-4a11-b3ef-a92d1e6420a1)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvD_Ubz9WgZy2yT4He%2FScreenshot%202019-04-08%20at%2010.01.47%20AM.png?alt=media\&token=aae591a8-16e7-4fce-9ad2-5d50358c2cf8)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvDbPW7eue3iwq4CFE%2FScreenshot%202019-04-08%20at%2010.01.57%20AM.png?alt=media\&token=a19553e3-2d0a-441e-bc79-0ac0a2c80280)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvDdTt7r6ty0qh5BCm%2FScreenshot%202019-04-08%20at%2010.02.08%20AM.png?alt=media\&token=7defa560-e933-4c8a-ac0e-e325c7d7e1ea)