This is a page to show off the settings in the Flexible Grid

Note that the "No Marquee" option is checked in the page settings tab, so that the wavy lines under the nav show.

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

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

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.
  • 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
  • Black Background - Set background to black and text to white. 

 

Additional classes can be added if needed.

No Gutter Row

No Gutter Row

Visible only on mobile

Black background

This is what a section looks like with a black background.