<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"
}
.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;
}
}
There are no notes for this item.