{"id":267,"date":"2019-10-04T05:46:45","date_gmt":"2019-10-04T05:46:45","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=267"},"modified":"2019-10-10T08:21:16","modified_gmt":"2019-10-10T08:21:16","slug":"card-masonary","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/card-masonary\/","title":{"rendered":"Card Masonary"},"content":{"rendered":"\n

You can add the component on any page in the template. You need to follow the steps given below: \u200c<\/p>\n\n\n\n

Step 1:<\/strong> Please add the code given below in the page where you want to add the component.<\/p>\n\n\n\n

<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=\"Cardimage 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><\/pre>\n\n\n\n
Step 2:<\/strong> Now Import the component from its parent library.<\/p>\n\n\n\n
import {
   Card,
   CardImg,
   CardText,
   CardBody,
   CardTitle,
   CardSubtitle,
   CardColumns,
   Button
} from 'reactstrap';<\/pre>\n\n\n\n
We have given you an example of adding cards in masonary layout on the Ecommerce Dashboard.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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<\/code> file.<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
You can add the component on any page in the template. You need to follow the steps given below: \u200c 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/267"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":3,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/267\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/267\/revisions\/469"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}