Panel 2 (Main Body Content)

This panel is where the page's body content lives.

If you decide your page needs a sidenav, this is the panel whose settings you would enable the panel setting sidenav. 

This panel typically contains a container-fluid container, with a row (row class g-3), a column (class col-12), and the HTML block type.

You can build on the page content from there by adding additional blocks such as a basic card grid, a domino card, or a sponsor logo block. 

Preview These Block Types in Use

Panel 2 Summary

• Panel - internal label set to "Main"
• Container - container class set to "container-fluid" and padding class "padding-top" and "padding-bottom"
• Row - row class set to "row g-3"
• Column - column class set to "col-12"
• Block - add block "Simple HTML" and other blocks as desired. 

Step by Step Guide

Panel Settings for Panel 2

Set your internal label to "Main" - this is an internal use field only but keeps our layout  parts easy to follow.

Is Visible should automatically be checked and appear in the blue box, but if its not, check the box & select submit. 

Enable a sidenav on the page by checking the box under Has Sidenav

Hit submit! 

Container settings for Panel 1 

At the bottom of the panel page, use the button to add a container. If given an option, select the container-fluid label. 

Is Visible should automatically be checked and appear in the blue box, but if its not, check the box & select submit. 

Set the container class field to 

container-fluid

This makes the container's content expand across the page while keeping some padding on both left & right sides. 

Set the Padding Class to 

padding-top
padding-bottom 

This will add padding between the top image panel and this panel, as well as add padding between this container and the page footer. It is ideal to use on Main panels so your page has proper spacing and flows well.  

Row Settings for Panel 2

 Set the first CSS Class Field to

row g-3

  Leave inline style & DIV ID fields blank. 

Panel 2 Column Settings

Set the first CSS Class field to

col-12

Leave the other two fields blank. 

Block Settings for Panel 2  

Select the blue pill button "Add Block" at the bottom of the column overview page.

Choose "Simple HTML" from the drop down menu of choices. 

Common Block Options to add to column 

• Basic Card Grid
• Domino Cards
• Sponsor Logos 

Basic Card Grid

Create Card Set with the template "Open Layout Card" to populate the card grid content. 

Basic Card Grid Setting Fields

Cards: Select the card set from the drop down menu of the Open Layout Card Set you'd like to appear.

Row Class: Controls spacing between the cards and margins. You can set the g-# number to any nuumber between 0-5. 
Row g-0 will leave no space between each card
Row g-1 or g-2 will leave a small amount of space between each card
Row g-3 will leave an average amount of space between each card. Typically we use this one. 
Row g-5 leaves the most amount of space between cards. 

Column Class: This is based on 12 equal divisions of the row the column lives in. You can use col-md-# and col-lg-# to set different behavior for different screen sizes. col-12 is mobile size (and all other screen sizes if no col-md or col-lg is set). col-md-# is the tablet size screen behavior, and col-lg-# is the desktop size screen behavior. 

• A one column layout uses 100% of the available space, all 12 possible divisions of the row. The code for this is col-12 which we apply automatically when the field is blank.
• For an even two column layout, make two columns, and set each to col-6 so that each uses 6/12 (50%) of the space.
• For an even three column layout, make three columns, and set each to col-4.
• For an even four column layout, make four columns, and set each to col-3.
• You cannot make five equal columns, because 12 is not evenly divisible by 5.

Common Codes:

Leave Layout Grid blank when you always want to use all the available width, all the time.


• Use col-6 for a consistent 50/50 split.
• Use col-12 col-lg-6 for 100% on mobile and 50% on desktop. Very common!
• Use col-12 col-lg-4 for 100% on mobile and 33% on desktop. Very common!
• Use col-12 col-lg-3 for 100% on mobile and 25% on desktop.
• Use col-6 col-lg-3 for 50% on mobile and 25% on desktop.

Aspect Ratio: Set this to the average dimension ratio of the images assigned to cards. 1/1 means the image is a square. Other common aspect ratios are 1/2, 3/2, 2/1, or 4/3. 

Max # to Display: Will only display the first # you set here of the cards in a card set. If you have a card set assigned with 20 cards, but set max # to display to 5, it will only show the first 5 cards of that set. Otherwise, if you leave it empty, all cards in the selected card set will display.

Use Masonry Layout: Check this box to flow the cards vertically based off card content height, instead of forcing all cards to be the same height.