2.5. Sections

Sections are used to structure the page content.

Example

Page Title

Subtitle

Condensed Header Section

This is the content of the page.

Primary Section

This will recolor section to primary color. Works both with header and content sections.

<section class="section-header">
    <div class="container">
        <h1 class="section-header-title">Page Title</h1>
        <h2 class="section-header-subtitle">Subtitle</h2>
    </div><!-- .container -->
</section>
<section class="section-header section-header-condensed">
    <div class="container">
        <h1 class="section-header-title">Condensed Header Section</h1>
    </div><!-- .container -->
</section>
<section class="section-content">
    <div class="container">
        <p>This is the content of the page.</p>
    </div><!-- .container -->
</section>
<section class="section-primary">
    <div class="container">
        <h1>Primary Section</h1>
        <p>This will recolor section to primary color. Works both with header and content sections.</p>
    </div><!-- .container -->
</section>