5 Page Modules

E.g. Header/footer, page sections, slides

5.1 Page Section link

The page section component is used to divide page content into well organized sections. Most page content should be included in a page module element such as page section. Foundation grid components can and should be used within these top level elements.

Usage

This is a section title

This is a section title (h2)

This is a section title (h3)

This is a section title (h4)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt itaque dolor ratione aspernatur nulla nemo, minima sit debitis at vel tenetur qui quod, aliquid suscipit atque, odit ipsam, commodi error!

This is a demonstration of the modifiers for background-color. You should use the .m-black class to get this effect

<!-- #fullwidth -->
<div class="b-page-section">
    <div class="row">
        <div class="column small-12">
            <h1 class="e-title">This is a section title</h1>
            <h2>This is a section title (h2)</h2>
            <h3>This is a section title (h3)</h3>
            <h4>This is a section title (h4)</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt itaque dolor ratione aspernatur nulla nemo, minima sit debitis at vel tenetur qui quod, aliquid suscipit atque, odit ipsam, commodi error!</p>
        </div>
    </div>
</div>
<!-- background color example -->
<div class="b-page-section m-black">
    <div class="row">
        <div class="column small-12">
            <p>This is a demonstration of the modifiers for background-color. You should use the <strong>.m-black</strong> class to get this effect</p>
        </div>
    </div>
</div>
Show All Modifiers
.m-purple — $purple background
.m-black — $black background
.m-teal — $teal background
.m-orange — $orange background
.m-blue — $blue background

5.2 Page Top Section link

A modified page section made specifically for the top section of a page. Has a number of color and style options.

.m-purple .m-teal .m-orange .m-blue

Usage

Page Top Section

This is the top section of a page. Generally speaking, each page should start with this section.

<!-- #fullwidth -->
<header class="b-top-section m-purple">
    <div class="row">
        <div class="column small-12">
            <h2>Page Top Section</h2>
            <h3>This is the top section of a page. Generally speaking, each page should start with this section.</h3>
        </div>
    </div>
</header>

5.3 Footer link

Standard footer for govlab pages. Usually contains some generated information on the sections of the page as well as affiliate information.

Usage

Sections

Lead Supporters

Based at

Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
Copyright Infringement Information. 
<!-- #fullwidth -->
<footer class='b-footer'>
    <div class="row">
        <div class="large-10 large-centered columns">
            <div class="row">
                <div class="e-content m-sections medium-4 column">
                    <h4>Sections</h4>
                    <!-- Generated Content -->
                </div>
                <div class="e-content medium-4 column">
                    <h4>Lead Supporters</h4>
                    <a class="e-partner-logo" href="https://www.macfound.org/" tagret="_blank"><img src="img/partners/macarthur-logo-white.png" alt="MacArthur Foundation"></a>
                    <a class="e-partner-logo" href="http://knightfoundation.org/" tagret="_blank"><img src="img/partners/knight-logo-white.png" alt="Knight Foundation"></a>
                    <a class="e-partner-logo m-google" href="http://google.org/" tagret="_blank"><img src="img/partners/google-org.png" alt="Google.org"></a>
                </div>
                <div class="e-content medium-4 column">
                    <h4>Based at</h4>
                    <a class="e-partner-logo" href="http://engineering.nyu.edu/tandon" tagret="_blank"><img src="img/partners/nyu.png" alt="NYU Tandon School of Engineering - New York University"></a>
                    <a class="e-partner-logo m-mit" href="https://www.media.mit.edu/" tagret="_blank"><img src="img/partners/mit-logo-white.png" alt="MIT Media Lab"></a>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="b-copyright">
    <div class="row">
        <div class="large-10 large-centered columns">
            <a class="e-cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
            This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a> <br> <a href="#">Copyright Infringement Information</a>.
        </div>
    </div>
</div>