<div class="FlexGrid _3columns _justify-between" style="">
    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                turn-key visualize solutions
            </h2>

            <p id="" class="">
                Vision-oriented even-keeled budgetary management
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                bricks-and-clicks synthesize experiences
            </h2>

            <p id="" class="">
                Upgradable demand-driven leverage
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                out-of-the-box incubate solutions
            </h2>

            <p id="" class="">
                Integrated zero defect toolset
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                rich syndicate functionalities
            </h2>

            <p id="" class="">
                Customizable zero tolerance time-frame
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                sticky iterate interfaces
            </h2>

            <p id="" class="">
                Profound bottom-line moderator
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

    <div id="" class="Card _image _interactive" style="">
        <div class="Card-body">
            <h2 class=" " style="">
                bleeding-edge generate technologies
            </h2>

            <p id="" class="">
                Focused exuding artificial intelligence
            </p>

            <button class="button _next ">
        Learn More
    </button>

        </div>
    </div>

</div>
<div class="FlexGrid _{{columns}}columns {{modifier}}" style="{{style}}">
	{{> @children }}
</div>
{
  "columns": 3,
  "children": [
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/nature?13319"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "turn-key visualize solutions"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Vision-oriented even-keeled budgetary management"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    },
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/food?42018"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "bricks-and-clicks synthesize experiences"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Upgradable demand-driven leverage"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    },
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/fashion?24144"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "out-of-the-box incubate solutions"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Integrated zero defect toolset"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    },
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/food?34946"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "rich syndicate functionalities"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Customizable zero tolerance time-frame"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    },
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/nightlife?88465"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "sticky iterate interfaces"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Profound bottom-line moderator"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    },
    {
      "component": "card",
      "context": {
        "modifier": "_image _interactive",
        "image": {
          "src": "http://lorempixel.com/600/400/fashion?38709"
        },
        "children": [
          {
            "component": "heading",
            "context": {
              "level": 2,
              "text": "bleeding-edge generate technologies"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "Focused exuding artificial intelligence"
            }
          },
          {
            "component": "button",
            "context": {
              "modifier": "_next",
              "text": "Learn More"
            }
          }
        ]
      }
    }
  ],
  "modifier": "_justify-between"
}
  • Content:
    .FlexGrid {
        @include FlexGrid;
        @each $i in $flexgrid-columns {
            &._#{$i}columns {
                @include FlexGridColumns($i);
            }
        }
        &._start {
            align-items: flex-start;
        }
        &._end {
            align-items: flex-end;
        }
        &._stretch {
            align-items: stretch;
        }
        &._center {
            align-items: center;
        }
        &._justify-start {
            justify-content: flex-start;
        }
        &._justify-end {
            justify-content: flex-end;
        }
        &._justify-around {
            justify-content: space-around;
        }
        &._justify-between {
            justify-content: space-between;
        }
    }
    
  • URL: /components/raw/flexgrid/FlexGrid.scss
  • Filesystem Path: components/molecules/FlexGrid/FlexGrid.scss
  • Size: 633 Bytes

There are no notes for this item.