Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Regions

Regions are large content areas used across multiple pages, such as the header and footer. These are the header and footer regions used in the Demos. Click on the brackets icon to the right to reveal the code that creates each region and to see how it renders across different devices.

The header region is used on every page. It includes the site logo, primary navigation, utility navigation, and breadcrumbs.

<header class="lsc-site-header">
    <div class="lsc-header-content">
        <h1 class="lsc-site-logo"><a href="#">Legal Services Corporation <span>ABC Legal</span></a></h1>
        <button class="lsc-navigation-button lsc-button-tertiary lsc-button-icon lsc-icon-menu-before" title="Open Navigation Menu" data-lsc-navigation-toggle>
            <span class="lsc-accessible-text">Open Navigation Menu</span>
        </button>
        <div class="lsc-navigation-wrapper">
            <nav class="lsc-navigation">
                <ul class="lsc-primary-navigation">
                    <li class="lsc-navigation-item lsc-mobile-nav lsc-mobile-nav-header">
                        <button class="lsc-navigation-button lsc-button-tertiary lsc-button-icon lsc-icon-x-before" data-lsc-navigation-toggle>
                            Close Navigation Menu
                        </button>
                    </li>
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link">Home</a>
                    </li>
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link">Topic Library</a>
                    </li>
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link">Form Library</a>
                    </li>
                    <li class="lsc-navigation-item lsc-navigation-current">
                        <a href="#" class="lsc-navigation-link lsc-navigation-current">Find a Lawyer</a>
                    </li>
                    <li class="lsc-navigation-item lsc-mobile-nav">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-language-before">Select your Language</a>
                    </li>
                    <li class="lsc-navigation-item lsc-mobile-nav">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-location-before">Set Your Location</a>
                    </li>
                    <li class="lsc-navigation-item lsc-mobile-nav">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-search-before">Search the Site</a>
                    </li>
                </ul>
                <ul class="lsc-utility-navigation">
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-language-before"  title="Select Your Language">
                            <span class="lsc-accessible-text">Select your Language</span>
                        </a>
                    </li>
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-location-before"  title="Set Your Location">
                            <span class="lsc-accessible-text">Set Your Location</span>
                        </a>
                    </li>
                    <li class="lsc-navigation-item">
                        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-search-before"  title="Search the Site">
                            <span class="lsc-accessible-text">Search the Site</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="lsc-breadcrumbs-wrapper">
        <ul class="lsc-breadcrumbs-list">
            <li class="lsc-breadcrumb">
                <a href="#" class="lsc-breadcrumb-link">Home</a>
            </li>
            <li class="lsc-breadcrumb">
                <span class="lsc-breadcrumb-current">Find a Lawyer</span>
            </li>
        </ul>
    </div>
</header>

The footer region is used on every page. It includes the copyright, social media links, and site legal information.

<footer class="lsc-site-footer">
    <p class="lsc-footer-legal">&copy; 2016 Legal Services Corporation of ABC Legal</p>
    <ul class="lsc-social-list">
        <li class="lsc-social-item">
            <a href="#" class="lsc-social-link lsc-button-icon lsc-icon-facebook-before"  title="Like Us on Facebook">
                <span class="lsc-accessible-text">Like Us on Facebook</span>
            </a>
        </li>
        <li class="lsc-social-item">
            <a href="#" class="lsc-social-link lsc-button-icon lsc-icon-twitter-before"  title="Follow Us on Twitter">
                <span class="lsc-accessible-text">Follow Us on Twitter</span>
            </a>
        </li>
        <li class="lsc-social-item">
            <a href="#" class="lsc-social-link lsc-button-icon lsc-icon-linkedin-before"  title="Join Us on LinkedIn">
                <span class="lsc-accessible-text">Join Us on LinkedIn</span>
            </a>
        </li>
    </ul>
    <ul class="lsc-legal-list">
        <li class="lsc-legal-item">
            <a href="#" class="lsc-legal-link">Legal &amp; Privacy Notices</a>
        </li>
        <li class="lsc-legal-item">
            <a href="#" class="lsc-legal-link">Support</a>
        </li>
        <li class="lsc-legal-item">
            <a href="#" class="lsc-legal-link">Feedback</a>
        </li>
    </ul>
</footer>