Page Structure
Each page template in the theme follows the same pattern. The following example is an overview of the main structure of each page. For brevity, it only contains high-level elements. Links to full templates are available on the Getting Started page and additional examples can be seen in the Examples section.
Additional information about individual page sections (e.g. headers, footer, navigation, search) is provided on related pages.
<html>
<head><!-- Head content ... --></head>
<body>
<nav class="skip-links" aria-label="Skip links"><!-- Skip Links ... --></nav>
<div id="wrapper" class="wrapper">
<header id="header" class="site-header"><!-- Global Header ... --></header>
<div id="content" class="site-content">
<div class="page-header"><!-- Page-specific Header content ... --></div>
<main class="page-main"><!-- Main content ... --></main>
<div class="page-sidebar"><!-- Sidebar content ... --></div>
</div>
<footer id="footer" class="site-footer" role="contentinfo"><!-- Global Footer ... --></footer>
</div>
<!-- Scripts ... -->
</body>
</html>
CSS Reference
| CSS Class | Description |
|---|---|
.skip-links |
Contains skip navigation links to aid keyboard and screen reader users in navigating the page. |
.wrapper |
Wraps entire page. Used in conjunction with mobile navigation for sliding content on and off screen. |
.site-header |
Contains global header, including site title and ND mark. |
.site-content |
Contains the page-specific content, including page header, copy, and navigation. |
.page-header |
Contains page-specific header content, such as the page title, lede, and featured image. |
.page-main |
Contains the main copy of the page. |
.page-sidebar |
Contains the navigation for the page. |
.site-footer |
Contains global footer, including contact information for the site and the University. |