Page sections are blocks that allows to organize content. A section <section class="page-section"></section> is allways full width, this allows some flexibility to add full width custom content or grid based content.
To use grid based content simply add a boostrap container inside the section: <div class="container"></div>. This container works exactly as Boostrap grid container, so if needed use the default markup to build a Bootstrap grid.
This green background area is an example of a section, use class .bg-primary in the section element to add color as background.
Due to the lack of contrast between the green background and the default black text we need to add some color classes to the text elements like headings and paragraphs, in this case white .color-white
Optional classes can be added to the page section elements <section class="page-section"></section> in order to format and style the section elemet for different purposes.
.bg-silver Light Grey
.bg-grey Dark Grey
.bg-primary MBC Green
.bg-secondary MBC Ivory
.padding-sm Adds 30px Padding top and bottom.
.padding-md Adds 50px Padding top and bottom.
.padding-lg Adds 80px Padding top and bottom.
.padding-xl Adds 120px Padding top and bottom.
Sections can contain background images by adding the class .bg-image and adding the image path inline. A section with background image will allways maintain a minimum height of 300px even if no content is present inside the section.
Example: <section class="page-section padding-lg bg-image bg-darken" style="background-image: url('/assets/images/pages/bg10.jpg')">
Background images can either be Normal (if no class is used), Dark or light. Use the following classes to change appearance:
.bg-darken Makes background image darker
.bg-lighten Makes background image lighter
Similar to background images, sections can have a parallax effect by adding the class .bg-parallax and adding the image path inline. The parallax class can also be combined with the background image optional classes, but not with the .bg-image itself, use only one of these two.