This website uses cookies to improve your experience and for personalised ads/content. Cookie Policy
Class name: aspect-410-fixed-all
- Block takes 410px height and remains the same height across all breakpoints
Class name: aspect-410-fluid-all
- Block takes 410px height and remains the same height across larger breakpoints
- Becomes fluid from 680px height set to 49% if the width of the block
Class name: aspect-318-fixed-all
- Block takes 318px height and remains the same height across all breakpoints
Class name: aspect-318-fluid-all
- Block takes 318px height and remains the same height across large breakpoints height changes to 290px on 680px breakpoint
Class name: aspect-175-fixed-all
- Block takes 175px height and remains the same height across all breakpoints
Class name: aspect-16x9-all
- Block aspect ratio is 16x9 and remains the same height across all breakpoints
Class name: aspect-4x2-all
- Block aspect ratio is 4x2 and remains the same height across all breakpoints
Class name: aspect-9x16-all
- Block aspect ratio is 9x16 and remains the same height across all breakpoints
Class name: aspect-4x3-all
- Block aspect ratio is 4x3 and remains the same height across all breakpoints
Class name: aspect-2x1-all
- Block aspect ratio is 2x1 and remains the same height across all breakpoints
Class name: aspect-1x2-all
- Block aspect ratio is 1x2 and remains the same height across all breakpoints
Grid used : 10 column
Left Column: xl-4-of-10 lg-4-of-10 md-4-of-10 sm-col-12 xs-col-12 / Image Ratio 2x1
Central Column: xl-2-of-10 lg-2-of-10 md-2-of-10 sm-col-12 xs-col-12 / Image Ratio 4x3 (Image Ratio 2x1 on small breakpoint)
Right Column: xl-4-of-10 lg-4-of-10 md-4-of-10 sm-col-12 xs-col-12 / Image Ratio 2x1
Grid used : Hide Show Classes example
Test block 1: xl-2-of-10 hide-md sm-col-6 xs-col-6 / IR 4x3
Test block 2: xl-2-of-10 hide-md sm-col-6 xs-col-6 / IR 4x3
Test block 3: xl-2-of-10 hide-md sm-col-6 xs-col-6 / IR 4x3
Test block 4: xl-2-of-10 hide-md sm-col-6 xs-col-6 / IR 4x3
Test block 5: xl-2-of-10 show-xxl hide-xl hide-md hide-sm hide-xs hide-from-md hide-to-md
Test block 6 / Tablet and Mobile only : hide-xxl hide-xl hide-lg show-md md-4-of-10 hide-sm show-xs xs-col-12
Test block 7: hide-xxl hide-xl hide-lg show-md hide-sm hide-xs md-2-of-10
Test block 8: hide-xxl hide-xl hide-lg show-md hide-sm md-4-of-10 sm-col-12 show-sm
Test tablet 16x9
Test tablet 16x9
Grid used : Hide Show Classes example
Test block 1: xl-4-of-10 md-col-6 lg-4-of-10 sm-col-12 md-pos-1 sm-pos-1 xs-pos-1
Test block 2: hide-xxl hide-xl hide-lg md-col-12 sm-col-12 md-pos-3 sm-pos-3 xs-pos-3
Test block 3: hide-md hide-sm xl-2-of-10 lg-2-of-10
Test block 4: xl-4-of-10 lg-4-of-10 md-col-6 sm-col-12 md-pos-2 sm-pos-2 xs-pos-2
Test tablet 2x3
Test tablet 2x3
Test tablet 2x3
Grid used : Hide Show Classes example
Block 2x1
Block 2x1
Block 2x1
Block 2x1
Grid used : Hide Show Classes example
Column 1: xl-col-4 xs-col-12 lg-4-of-10 md-col-6 sm-col-12
Column 2: xl-col-4 xs-col-12 lg-4-of-10 md-col-6 sm-col-12
Column 3: xl-col-4 lg-col-4 md-col-6 sm-col-12 xs-col-12 show-xxl hide-lg hide-md show-sm show-xs
Column 4 : lg-2-of-10 hide-xxl show-xl show-lg hide-md hide-sm