This is a page to show off the settings in the Flexible Grid
Row Options
These are options to show you how the rows columns breakdown using a flexible grid page.
Full Width (Blade or Marquee)
One Column
Two Col - 1
Two Col -2
Three Col-1
Three Col -2
Three Col -3
FOUR COL-2
FOUR COL-2
FOUR COL-3
FOUR COL-4
2/3 Col - First
1/3 Col - Last
1/3 Col - First
2/3 Col - Last
Spacing
Spacing is available in 4 sizes, none, small, medium, large. You can add margin/padding/spacing on both columns and rows.
Dark Red - Row Margin
Dark Blue - Row Padding
Red- Column Margin
Blue - Column Padding
Note that the light gray on the sides of the container is the default padding for the container. It can be removed by removing the no gutter setting.
Component
Component
Spacing Sizing
See light blue for reference (ignore other colors here).
Spacing Top Small (30px)
Spacing Top Medium (45px desktop, 30px mobile)
Spacing Top Large (60px desktop, 45px mobile)
Style Options
Columns and rows have style options to allow you to set a background color, or a background image(beta).
The Background of the row is light gray.
The background of this column is dark gray
The Background of the row is light gray.
The background of this column is an image (gray image with FPO in there)
Name and Classes
The grid settings allow you to set the name of the row. This allows us to anchor link to sections. Like this
Grid settings also allow for any custom classes to be added to the row and columns. This allows us custom styling if we need it but should be avoided if can be.
Custom Class
Custom Class + Class Setting
Grid Classes
These are predefined classes that apply a style or setting on the row or column.
- No gutter - Removes default gutter padding between columns and on edgets.
- Equal Height Row - Make all columns equal height. NOTE: this is a row setting only, and may not work with all components.
- Mobile Only - Will only show element on mobile.
- Mobile Hidden - Will hide element on mobile.
- Full width on Mobile - Removes column padding on mobile only
- Switch Order on Desktop - reverses the order of the columns on desktop.
Additional classes can be added if needed.
No Gutter Row
No Gutter Row
Equal height Column One
Very tall
Equal height column Two
Not so tall, but background is the same height.
This column is also full width on mobile unlike the first column.
Visible only on mobile
Full width on Mobile
Regular Gutter Mobile
First Item (but with Switch item on desktop, will be second)
Second Item (but with Switch item on desktop, will be first)
Custom Gutter
Using no-gutter, and our padding and margins we can create a smaller gutter, if we need to.
Set padding small on the row left/right and margin small on the columns left right.
