Sections

Sections are a new layout tool that was introduced in the CA Gov template v5 that provide authors with a means of creating modern looking pages often associated with promotion pages or homepages. Because sections fill the entire horizontal space it's important to note that they were intended to be used as a full page layout component and should not be used inside v4 columns.

Backwards Compatability

A slight change was made to the v5 template to accomodate this full width layout while maintaining backwards compatability with v4 templates. Specifically v4 templates have a .wrapper div just inside the .main-content div. The .wrapper class is not used in this layout.

If organizations wish to use the new .section feature within pages already created using the v4 methodology there are some things that can be done but they are not without limitations for some systems.

1) Webmasters can manually remove the .wrapper class and wrap .section's around the content. Note: Failing to put content into a section will cause the content to fill the full horizontal space.

2) If changing the html is not possible the following javascript can be included. Note: Templates using .two-column layout will display the .main-secondary below the main content.

<script>
$(document).ready(function() {
    // Backward compatability fix swapping deprecated wrapper with new sections classe
    $('.main-primary ').closest('div.wrapper').removeClass('wrapper').addClass('section');
});
</script>
                        

Section Variations

Like many other components, a .section can be styled with a number of extension classes. Append one of the following classes to the .section div.

• .section-default
• .section-understated
• .section-primary
• .section-standout
• .section-inverted
• .collapsed (can be applied in tandom with all the above to remove the top and bottom padding)

A .section without any additional style classes will be white.