-
-
Mark Andre mark.andre@gmail.com
Base Stack Examples
Metronic's Stack allows building an equal height flexbile blocks easily:
Item vertical and horizontal aligments done super easy:
Enable any number of fixed and fluid height items:
Default stack comes with fluid width
Unlimited level of nesting supported:
Item 1
Item 2
Item 3
Item 4
Left aligment
Center aligment
Right aligment
Top aligment
Middle aligment
Bottom aligment
Fixed width - 120px
Fluid width - 100%
Fluid width - 100%
Fixed width - 150px
Fluid width - 100%
Fixed width - 150px
width: 100%
. With inline stack option you can have
width:auto
stack:
Free content
Free content
Longer free content
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Responsive Modes
You can set responsive mode to your stack by just enabling one of responsive mode with special classes
m-stack--general
,
m-stack--desktop
,
m-stack--tablet
,
m-stack--desktop-and-tablet
,
m-stack--mobile
,
m-stack--tablet-and-mobile
.
When
m-stack--general
mode used the stack mode will remain but with other modes, for example with
m-stack--tablet
the stack mode will be activate within the device width and outside the device with the stack will be have just normal block tag.
m-stack--general:
Top
Middle
Bottom
m-stack--desktop:
Top
Middle
Bottom
m-stack--tablet:
Top
Middle
Bottom
m-stack--mobile:
Top
Middle
Bottom
Horizontal Stack Examples
Metronic's Stack allows building an equal height flexbile blocks easily:
Item vertical and horizontal aligments done super easy:
Enable any number of fixed and fluid width items:
Nested horizontal and vertical stacks:
Item 1
Item 2
Item 3
Item 4
Left aligment
Center aligment
Right aligment
Fixed height - 100px
Fluid height - 100%
Fixed height - 100px
Item
Item
Item
Item
Item
Item
