Page Templates

There are two (2) master template page layouts to choose from. The page layout can be controlled by applying one (1) class to the <body> element. By default pages will have a single column layout and will not have any <body> class applied to them. Adding a class of .two-column will add a side column on the Right side of the page. If you would like the secondary column on the Left side of the page, swap the order of the <div class="main-secondary"> to be positioned above the <main class="main-primary"> content area.

Optional hero image banners can be added to any page but are commonly used on landing and home pages. There are several banner options including a primary header-primary-banner, large header-large-banner and slideshow header-slideshow-banner.

To use the various banner types add them using the SSI include method right below the header of the desired page. For each option, a corresponding HTML file nees to be used with the proper elements and CSS class names which can be seen in the demonstration links below.

All of the page template options are demonstrated below in addition to the two-column page layout.

<div class="section">
    <div class="main-primary">...</div>
    <div class="main-secondary">...</div>
</div>

</header> 
<!-- Include Page Template -->
 <!--#include virtual="/ssi/header-large-banner.html" -->
 <!--#include virtual="/ssi/header-primary-banner.html" -->
 <!--#include virtual="/ssi/header-slideshow-banner.html" -->

Note: You can view the source code for each banner type by downloading the template package and inspecting the template files or using the links below.

Demonstration

Toggle the buttons to add or remove the appropriate <body> classes and server side inscludes.

See Large Banner See Slideshow Banner

Note: Some examples go to a new page.

Backwards Compatability

In v4 of the State Template page layouts were controlled by applying the .primary class to the <body> element which enabled the taller header image. For greater flexibility and control over header images, the layout was changed to use a more modular approach. The .primary class is now used to determine if the various banner types remain on the page in the mobile screen sizes.