Page Templates

Use these page templates to create consistently structured webpages. The website has three major template types:

Base: this template is the foundation for both the "Detail" and "Landing" templates as well as being used for the "page" post type.
Detail: this template is used to display specific entry material like blog entries, speeches, press releases, videos, etc. Any content type that has multiple entries uses this template to display an individual entry.
Home: this template is used specifically for the website's home page.
Landing: this template has several sub-template designs and is used to display links to multiple content type entries. The sub-templates are:
- Faceted List with Hero
- Grid with Hero
- List with Hero
Search Results: this template is used specifically for the website's search results page.

Templates use the same structure and tags but are drawn and styled based on a class assigned to the <div> tag inside the <main> tag. See the "Base Template" code pattern below for a complete template. The remaining code patterns should replace the Base Template's <main> tag and everything in it.

Code Patterns

Base Template

Assign class template-base to the <div> tag immediately after the <main> tag.

Output

See the About page as an example of this page template.

Code


<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- iOS touch icon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://assets.mcc.gov/content/themes/mcc-2016/img/apple-touch-icon-152x152.png" />
<meta name="apple-mobile-web-app-title" content="MCC">
<!-- Windows tile -->
<meta name="application-name" content="MCC"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-square70x70logo" content="https://assets.mcc.gov/content/themes/mcc-2016/img/mstile-70x70.png" />
<meta name="msapplication-TileImage" content="https://assets.mcc.gov/content/themes/mcc-2016/img/mstile-144x144.png" />
<meta name="msapplication-square150x150logo" content="https://assets.mcc.gov/content/themes/mcc-2016/img/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="https://assets.mcc.gov/content/themes/mcc-2016/img/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="https://assets.mcc.gov/content/themes/mcc-2016/img/mstile-310x310.png" />
<!-- favicon -->
<link rel="shortcut icon" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon.ico" />
<link rel="icon" type="image/png" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="https://assets.mcc.gov/content/themes/mcc-2016/img/favicon-196x196.png" sizes="196x196" />
<link rel="stylesheet" id="bcct_style-css" href="https://assets.mcc.gov/content/plugins/better-click-to-tweet/assets/css/styles.css.gzip?ver=3.0" type="text/css" media="all">
<link rel="stylesheet" id="toc-screen-css" href="https://assets.mcc.gov/content/plugins/table-of-contents-plus/screen.min.css.gzip?ver=1509" type="text/css" media="all">
<link rel="stylesheet" id="style-normalize-css" href="https://assets.mcc.gov/content/themes/mcc-2016/css/normalize.css.gzip?ver=4.8" type="text/css" media="all">
<link rel="stylesheet" id="style-screen-css" href="https://assets.mcc.gov/content/themes/mcc-2016/style.css.gzip?ver=4.8" type="text/css" media="all">
<link rel="stylesheet" id="style-font-awesome-css" href="https://assets.mcc.gov/content/themes/mcc-2016/css/font-awesome/css/font-awesome.min.css.gzip?ver=4.8" type="text/css" media="all">
<link rel="stylesheet" id="style-cloud-typography-css" href="//cloud.typography.com/69016/792402/css/fonts.css?ver=4.8" type="text/css" media="all">
<script type="text/javascript" src="https://assets.mcc.gov/base/wp-includes/js/jquery/jquery.js.gzip?ver=1.12.4"></script>
<script type="text/javascript" src="https://assets.mcc.gov/base/wp-includes/js/jquery/jquery-migrate.min.js.gzip?ver=1.4.1"></script>
<script type="text/javascript" src="https://assets.mcc.gov/content/plugins/wp-retina-2x/js/picturefill.min.js.gzip?ver=3.0.2"></script>
<script type="text/javascript" src="https://assets.mcc.gov/content/themes/mcc-2016/js/vendor/modernizr-2.8.3.min.js.gzip?ver=4.8"></script>
<script type="text/javascript">
/* <![CDATA[ /
var wordpress_variables = {"template_directory":"https://www.mcc.gov/content/themes/mcc-2016"};
/ ]]> */
</script>
<script type="text/javascript">
var mcc_theme_path = "https://www.mcc.gov/content/themes/mcc-2016";
</script>
<script type="text/javascript" src="https://assets.mcc.gov/content/themes/mcc-2016/js/main-min.js.gzip?ver=1"></script>
<script language="javascript" id="_fed_an_ua_tag" src="https://assets.mcc.gov/content/themes/mcc-2016/js/Universal-Federated-Analytics-Min.js?agency=MCC&pua=UA-6030327-1&sp=lookup,locate&exts=tif,mp3&dclink=true"></script>
<script>
(function(d) {
var config = {
kitId: 'plb4xgg',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head>
<body id="" class="">
<a name="return-top"></a>
<div class="container">
<header id="template-page-header">
<!-- Used to display alerts on the top of every web page -->
<div id="broadcast-notice">
<div class="notice">
<!-- <p>Alert text goes here.</p> -->
</div>
</div>
<div id="header">
<div class="container">
<a href="#page-content" class="visuallyhidden">Jump to page content</a>
<div id="header-utility">
<nav id="nav-header-utility" class="menu-utility-top-container">
<ul id="js-nav-header-utility-menu" class="menu">
<li class="menu-item"><a href="https://www.mcc.gov/about">About</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/news-and-events">News &amp; Events</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/blog">Blog</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/work-with-us">Work With Us</a></li>
<li id="js-search-bar" class="search-bar">
<form action="https://www.mcc.gov/search-results" class="searchform" id="cse-search-box">
<input name="cx" type="hidden" value="010730945194751213386:jdutycmfcqk">
<input name="ie" type="hidden" value="UTF-8">
<label for="q" class="visuallyhidden">Search:</label><input class="search-box" id="q" name="q" type="search" placeholder="Enter search term">
<input type="submit" class="search-button" value="Search">
</form>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div id="masthead-sticky-wrapper" class="sticky-wrapper">
<div id="masthead" role="banner" >
<div class="wrapper-navigation">
<div class="wrapper-logo">
<a href="https://www.mcc.gov/" class="logo">
<img src="https://assets.mcc.gov/content/themes/mcc-2016/img/sig-rgb-horz-usa.svg" alt="Millennium Challenge Corporation; United States of America" id="mast-img">
<img src="https://assets.mcc.gov/content/themes/mcc-2016/img/sig-rgb-horz-mcccaps.svg" width="127" alt="Millennium Challenge Corporation; United States of America" id="mast-img-caps">
<img src="https://assets.mcc.gov/content/themes/mcc-2016/img/sig-rgb-vert-usa.svg" alt="Millennium Challenge Corporation; United States of America" id="mast-print">
</a>
</div>
<div class="wrapper-nav-primary">
<nav id="nav-primary" class="js-primary-nav">
<ul id="nav-primary-menu" class="js-nav-primary-menu show">
<li class="menu-item"><a href="https://www.mcc.gov/where-we-work">Where We Work</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/our-impact">Our Impact</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/sectors">Sectors</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/initiatives">Initiatives</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/resources">Resources</a></li>
</ul>
</nav>
<div id="nav-primary-menu-responsive" class="js-nav-primary-menu-responsive"></div>
</div>
</div>
</div>
</div>
</header>
<a name="page-content" class="visuallyhidden"></a>
<main id="main" role="main">
<div class="container template-base">
<div id="nav-local">
<div class="nav-local-menu-responsive"></div>
<div class="local-nav-html">
<div class="menu-about-section-container">
<ul class="menu">
<li class="menu-item current_page_item"><a href="https://www.mcc.gov/about">Page Title</a></li>
<li class="menu-item"><a href="#">Menu Item 1</a></li>
<li class="menu-item"><a href="#">Menu Item 2</a></li>
<li class="menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
<script>
jQuery(document).ready(function($) {
//moves local nav into a hamburger menu
$('.local-nav-html').slicknav({
'label': '<h4><i class="fa fa-navicon"></i>&nbsp;Page Name</h4>',
'prependTo': '.nav-local-menu-responsive',
'allowParentLinks' : true
});
});
</script>
</div>
<article>
<header>
<h1>Page Title</h1>
</header>
<!-- begin featured visual code -->
<div id="featured-visual">
<figure id="featured-visual-hero">
</figure>
</div>
<!-- end featured visual code -->
<section>
<!-- Put all page content inside this section tag -->
<p>This is where the page content goes.</p>
<h2>Content Heading</h2>
<p>Use <code>&lt;h2&gt;</code> tags for content headers.</p>
<footer>
</footer>
</section>
</article>
<aside></aside>
</div>
</main>
<footer id="template-page-footer">
<div id="footer">
<div class="container">
<div id="footer-left">
<div id="footer-tag-and-teaser">
<!-- TAGLINE -->
<div id="footer-tagline">
<p class="tagline">Reducing Poverty Through Growth</p>
</div>
<!-- HEADER UTILITY NAV REPOSITIONED HERE ON MEDIUM AND SMALL BREAKPOINTS -->
<div id="js-footer-nav-header-utility-responsive"></div>
<!-- FOOTER TEASER LINKS -->
<div id="footer-teaser-links">
<div id="nav-footer-teaser" class="menu-utility-footer-container">
<ul id="menu-utility-footer" class="menu">
<li class="menu-item"><a href="https://www.mcc.gov/who-we-fund">Who We Fund</a></li>
<li class="menu-item"><a href="https://data.mcc.gov/">Open Data</a></li>
<li class="menu-item"><a href="http://data.mcc.gov/evaluations">Evaluation Catalog</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/careers">Careers</a></li>
<li class="menu-item"><a href="http://oig.usaid.gov/content/mcc-hotline-report-fraud-or-corruption" class="link-external" rel="external">Report Fraud</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/contact-us">Contact Us</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/ppg">Compact Procurement Guidelines</a></li>
<li class="menu-item"><a href="/resources/doc/guidance-compact-development-guidance">Compact Development Guidance</a></li>
<li class="menu-item"><a href="/resources?fwp_resource_type=compact-implementation-guidance">Compact Implementation Guidance</a></li>
</ul>
</div>
</div>
<div id="footer-social" class="clearfix">
<!-- SOCIAL NETWORK LINKS -->
<div id="footer-social-networks">
<h6>Stay Engaged</h6>
<ul id="social-list">
<li><a href="http://twitter.com/mccgov" class="link-external" rel="external"><i class="fa fa-twitter-square"><span class="visuallyhidden">Twitter</span></i></a></li>
<li><a href="https://www.facebook.com/MillenniumChallengeCorp" class="link-external" rel="external"><span class="visuallyhidden">Facebook</span><i class="fa fa-facebook-square"></i></a></li>
<li><a href="https://instagram.com/mccgovus/" class="link-external" rel="external"><span class="visuallyhidden">Instagram</span><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.youtube.com/user/millenniumchallenge" class="link-external" rel="external"><span class="visuallyhidden">YouTube</span><i class="fa fa-youtube-square"></i></a></li>
<li><a href="https://www.flickr.com/photos/136328675@N08/albums" class="link-external" rel="external"><span class="visuallyhidden">Flickr</span><i class="fa fa-flickr"></i></a></li>
<li><a href="https://medium.com/@MCCgov" class="link-external" rel="external"><span class="visuallyhidden">Medium</span><i class="fa fa-medium"></i></a></li>
</ul>
</div>
<!-- OPT-IN EMAIL LIST SUBSCRIBE LINK and RSS LINK -->
<div id="footer-social-subscribe">
<h6>Stay Informed</h6>
<ul id="subscribe-list">
<li><a href="https://www.mcc.gov/subscribe"><i class="fa fa-envelope-square"><span class="visuallyhidden">Subscribe</span></i></a></li>
<li><a href="https://www.mcc.gov/resources/rss-feeds"><span class="visuallyhidden">RSS Feeds</span><i class="fa fa-rss-square"></i></a></li>
<li><a href="https://itunes.apple.com/us/podcast/mcc-podcasts/id311937935" class="link-external" rel="external"><span class="visuallyhidden">Podcasts</span><i class="fa fa-microphone"></i></a></li>
</ul>
</div>
</div>
<!-- FOOTER UTILITY NAV -->
<div id="footer-utility-links">
<nav id="nav-footer-utility" class="menu-utility-bottom-container">
<ul id="menu-utility-bottom" class="menu">
<li class="menu-item"><a href="https://www.mcc.gov/resources/website-privacy-policy">Privacy Policy</a></li>
<li class="menu-item"><a href="http://www.usa.gov/" class="link-external" rel="external">USA.gov</a></li>
<li class="menu-item"><a href="http://oig.usaid.gov/" class="link-external" rel="external">Inspector General</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/resources/plug-ins">Plugins</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/open">Open Government</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/resources/no-fear-act">No FEAR Act</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/resources/foia">FOIA</a></li>
<li class="menu-item"><a href="https://www.mcc.gov/resources/whistleblower-protection">Whistleblower Protection</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div id="footer-right">
<div id="contact-info">
<div>
<div class="textwidget">
<div id="contact-info-addr">
<h6>Mailing Address</h6>
<p>1099 14th Street NW<br>Suite 700<br>
Washington, DC<br>
20005-3550<br>
USA</p>
</div>
<div id="contact-info-tel">
<h6>Phone Numbers</h6>
<ul class="list-unstyled">
<li>Main: 202-521-3600</li>
<li>Legislative: 202-521-3880</li>
<li>Press: 202-521-3880</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

Detail Template

Assign class template-detail to the <div> tag immediately after the <main> tag.

Output

See any blog entry as an example of this page template.

Code


<main id="main" role="main">
<div class="container template-detail">
<div id="nav-local">
<div class="nav-local-menu-responsive"></div>
<div class="local-nav-html">
<div class="menu-about-section-container">
<ul class="menu">
<li class="menu-item current_page_item"><a href="https://www.mcc.gov/about">Page Title</a></li>
<li class="menu-item"><a href="#">Menu Item 1</a></li>
<li class="menu-item"><a href="#">Menu Item 2</a></li>
<li class="menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
<script>
jQuery(document).ready(function($) {
//moves local nav into a hamburger menu
$('.local-nav-html').slicknav({
'label': '<h4><i class="fa fa-navicon"></i>&nbsp;Page Name</h4>',
'prependTo': '.nav-local-menu-responsive',
'allowParentLinks' : true
});
});
</script>
</div>
<article>
<header>
<h1>Page Title</h1>
</header>
<!-- begin featured visual code -->
<figure id="featured-visual-hero">
</figure>
<!-- end featured visual code -->
<section>
<!-- Put all page content inside this section tag -->
<p>This is where the page content goes.</p>
<h2>Content Heading</h2>
<p>Use <code>&lt;h2&gt;</code> tags for content headers.</p>
<footer>
</footer>
</section>
</article>
<aside></aside>
</div>
</main>

Landing Template — Faceted List with Hero

Assign class page-template-page-archive-landing-faceted-list-with-hero to the <div> tag immediately after the <main> tag.

Output

See the Videos page as an example of this page template.

Code


<main id="main" role="main">
<div class="container page-template-page-archive-landing-faceted-list-with-hero">
<div id="nav-local">
<div class="nav-local-menu-responsive"></div>
<div class="local-nav-html">
<div class="menu-about-section-container">
<ul class="menu">
<li class="menu-item current_page_item"><a href="https://www.mcc.gov/about">Page Title</a></li>
<li class="menu-item"><a href="#">Menu Item 1</a></li>
<li class="menu-item"><a href="#">Menu Item 2</a></li>
<li class="menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
<script>
jQuery(document).ready(function($) {
//moves local nav into a hamburger menu
$('.local-nav-html').slicknav({
'label': '<h4><i class="fa fa-navicon"></i>&nbsp;Page Name</h4>',
'prependTo': '.nav-local-menu-responsive',
'allowParentLinks' : true
});
});
</script>
</div>
<section>
<header>
<h1>Page Title</h1>
</header>
<section id="content-top">
<p>Use this area to display brief content above the featured visual.
</section>
<!-- begin featured visual code -->
<div id="featured-visual">
<figure id="featured-visual-hero">
</figure>
</div>
<!-- end featured visual code -->
<section id="content-main">
<!-- Put all page content inside this section tag -->
<p>Use <code>&lt;h2&gt;</code> tags for content headers.</p>
<p>This is where the page content goes.</p>
<div class="filter-facets clearfix"></div>
<script></script>
<section id="list-results">
<!-- the list results use the "Teaser" code pattern. See the "Containers" section of the Website Style Guide for options. -->
<ul class="teasers">
<li class="teaser">
<div class="teaser-content">
<p class="text-small text-dateline">Date</p>
<h3><a href="#">Item 1</a></h3>
<div class="teaser-image">
<img src="#" alt="teaser image">
</div>
<p>Item 1 teaser text.</p>
</div>
</li>
<li class="teaser">
<div class="teaser-content">
<p class="text-small text-dateline">Date</p>
<h3><a href="#">Item 2</a></h3>
<div class="teaser-image">
<img src="#" alt="teaser image">
</div>
<p>Item 2 teaser text.</p>
</div>
</li>
</ul>
</section>
<section id="content-btm">
</section>
</section>
<aside id="search-facets">
<h6>Filter by</h6>
<div class="filter-content">
<div class="item-list">
<!-- place filter options here -->
</div>
</div>
</aside>
</section>
</div>
</main>

Landing Template — Grid with Hero

Output

See the Where We Work page as an example of this page template.

Code


<main id="main" role="main">
<div class="container template-landing-grid-with-hero">
<div id="nav-local">
<div class="nav-local-menu-responsive"></div>
<div class="local-nav-html">
<div class="menu-about-section-container">
<ul class="menu">
<li class="menu-item current_page_item"><a href="https://www.mcc.gov/about">Page Title</a></li>
<li class="menu-item"><a href="#">Menu Item 1</a></li>
<li class="menu-item"><a href="#">Menu Item 2</a></li>
<li class="menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
<script>
jQuery(document).ready(function($) {
//moves local nav into a hamburger menu
$('.local-nav-html').slicknav({
'label': '<h4><i class="fa fa-navicon"></i>&nbsp;Page Name</h4>',
'prependTo': '.nav-local-menu-responsive',
'allowParentLinks' : true
});
});
</script>
</div>
<section>
<header>
<h1>Page Title</h1>
<p>Use this area to display brief content above the featured visual.</p>
</header>
<!-- begin featured visual code -->
<div id="featured-visual">
<figure id="featured-visual-hero">
</figure>
</div>
<!-- end featured visual code -->
<section>
<p>Use this area to display brief content below the featured visual but above the grid content.</p>
</section>
<section id="content-main">
<!-- grid content goes here; the grid display uses the "card" container, see the "card" code pattern to see different display options -->
<div class="cards">
<div class="card">
<a href="#">
<div class="card-image">
<img src="#">
</div>
</a>
<div class="card-header">
<h3><a href="#">Card Header</a></h3>
</div>
<div class="card-copy">
<p>Card teaser text. This should be no more than 261 characters, including spaces.</p>
</div>
</div>
<div class="card">
<a href="#">
<div class="card-image">
<img src="#">
</div>
</a>
<div class="card-header">
<h3><a href="#">Card Header</a></h3>
</div>
<div class="card-copy">
<p>Card teaser text. This should be no more than 261 characters, including spaces.</p>
</div>
</div>
</div>
<!-- end grid content -->
</section>
<section>
<p>Use this area to display brief content below the grid content.</p>
</section>
</section>
</div>
</main>

Landing Template — List with Hero

Assign class page-template-page-landing-list-with-hero to the <div> tag immediately after the <main> tag.

Output

See the Features page as an example of this page template.

Code


<main id="main" role="main">
<div class="container page-template-page-landing-list-with-hero">
<div id="nav-local">
<div class="nav-local-menu-responsive"></div>
<div class="local-nav-html">
<div class="menu-about-section-container">
<ul class="menu">
<li class="menu-item current_page_item"><a href="https://www.mcc.gov/about">Page Title</a></li>
<li class="menu-item"><a href="#">Menu Item 1</a></li>
<li class="menu-item"><a href="#">Menu Item 2</a></li>
<li class="menu-item"><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
<script>
jQuery(document).ready(function($) {
//moves local nav into a hamburger menu
$('.local-nav-html').slicknav({
'label': '<h4><i class="fa fa-navicon"></i>&nbsp;Page Name</h4>',
'prependTo': '.nav-local-menu-responsive',
'allowParentLinks' : true
});
});
</script>
</div>
<section>
<header>
<h1>Page Title</h1>
</header>
<section id="content-top">
<p>Use this area to display brief content above the featured visual.</p>
</section>
<!-- begin featured visual code -->
<div id="featured-visual">
<figure id="featured-visual-hero">
</figure>
</div>
<!-- end featured visual code -->
<section id="content-main">
<!-- Put all page content inside this section tag -->
<p>Use <code>&lt;h2&gt;</code> tags for content headers.</p>
<p>This is where the page content goes.</p>
<div id="list-results">
<!-- the list results use the "Teaser" code pattern. See the "Containers" section of the Website Style Guide for options. -->
<ul class="teasers">
<li class="teaser">
<div class="teaser-content">
<p class="text-small text-dateline">Date</p>
<h3><a href="#">Item 1</a></h3>
<div class="teaser-image">
<img src="#" alt="teaser image">
</div>
<p>Item 1 teaser text.</p>
</div>
</li>
<li class="teaser">
<div class="teaser-content">
<p class="text-small text-dateline">Date</p>
<h3><a href="#">Item 2</a></h3>
<div class="teaser-image">
<img src="#" alt="teaser image">
</div>
<p>Item 2 teaser text.</p>
</div>
</li>
</ul>
</div>
<section id="content-btm">
</section>
</section>
<aside></aside>
</section>
</div>
</main>