> 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/card-masonary.md).

# Card Masonary

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.

```
<CardColumns>
   <Card inverse color="danger">
   	<CardBody>
   		<CardTitle>Card title</CardTitle>
   		<CardSubtitle>Card subtitle</CardSubtitle>
   		<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
   		<Button variant="contained" color="default">Button</Button>
   	</CardBody>
   </Card>
   <Card>
   	<CardImg top width="100%" src={require('Assets/img/gallery-7.jpg')} className="img-fluid" alt="Card image cap" />
   	<CardBody>
   		<CardTitle>Card title</CardTitle>
   		<CardSubtitle>Card subtitle</CardSubtitle>
   		<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
   		<Button variant="contained" color="primary" className="text-white">Button</Button>
   	</CardBody>
   </Card>
   <Card inverse color="success">
   	<CardBody>
   		<CardTitle>Card title</CardTitle>
   		<CardSubtitle>Card subtitle</CardSubtitle>
   		<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
   		<Button variant="contained" color="default">Button</Button>
   	</CardBody>
   </Card>
   <Card inverse color="danger">
   	<CardBody>
   		<CardTitle>Card title</CardTitle>
   		<CardSubtitle>Card subtitle</CardSubtitle>
   		<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
   		<Button variant="contained" color="default">Button</Button>
   	</CardBody>
   </Card>  
</CardColumns>
```

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

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

We have given you an example of adding cards in masonary layout on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwLf7-N3LlKXnYcDpL%2F-LbwUDS6RPp0MWNdIyXi%2FSelection_031.png?alt=media\&token=cc1704d0-7b43-4bb9-8d35-81d5aaf30f88)

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

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvCHyGtTCAJc_eo-iI%2F-LbvEqwRj3p9hN9fpWbx%2FScreenshot%202019-04-08%20at%2010.06.38%20AM.png?alt=media\&token=1bbc284f-7d8c-408d-8ed2-01db297af8a1)