Pages

Using the page templates layout method a basic web page should consist of the following elements:

• Header
  • Skip link to content
  • University logo
  • Optional category header
  • Navigation bar
• Main
  • Optional breadcrumbs
  • Unique page content
• Footer

Open example in new window

<div class="sta-layout__header">
  <nav class="sta-skip-link" aria-label="Accessibility links">
    <a href="#content-begin" class="sta-button sta-button--alt-theme-3 sta-sr-only-focus-visible">Skip to content</a>
  </nav>
  <header class="sta-header">
    <div class="sta-wrapper">
      <div class="sta-header-layout">
        <a href="#" class="sta-header__logo">
          <picture class="hero-section__image">
            <source srcset="/assets/images/university-of-st-andrews-logo-foundation.svg" media="(min-width: 768px)">
            <img src="/assets/images/university-of-st-andrews-logo-standard.svg" alt="University of St Andrews">
          </picture>
        </a>
      </div>
    </div>
  </header>
  <nav class="sta-section-header" aria-label="Section header">
    <div class="sta-section-header__heading sta-wrapper"><a href="#">Optional section header</a></div>
  </nav>
  <nav class="sta-navigation-bar" aria-label="Navigation menu">
    <div class="sta-wrapper">
      <ul class="sta-navigation-bar__list">
        <li class="sta-navigation-bar__list-item"><a href="#">Link 1</a></li>
        <li class="sta-navigation-bar__list-item"><a href="#">Link 2</a></li>
        <li class="sta-navigation-bar__list-item"><a href="#">Link 3</a></li>
        <li class="sta-navigation-bar__list-item"><a href="#">Link 4</a></li>
        <li class="sta-navigation-bar__list-item"><a href="#">Link 5</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="sta-layout__main">
  <main class="sta-wrapper" id="content-begin">
    <nav aria-label="Breadcrumb">
      <ol class="sta-breadcrumbs">
        <li class="sta-breadcrumbs__item"><a class="sta-breadcrumbs__item-link" href="#">Home</a></li>
        <li class="sta-breadcrumbs__item"><a class="sta-breadcrumbs__item-link" href="#">Landing page</a></li>
        <li class="sta-breadcrumbs__item" aria-current="page">Current page</li>
      </ol>
    </nav>

    <div class="sta-content">
      <h1>Page heading</h1>
      <p>Page content.</p>
    </div>
  </main>
</div>
<div class="sta-layout__footer">
  <footer class="sta-footer">
    <div class="sta-wrapper">
      <div class="sta-footer-university">
        <p>&copy; 2021 The University of St Andrews is a charity registered in Scotland, No: SC013532</p>
        <ul class="sta-footer-university__links">
          <li><a href="#">Cookie policy</a></li>
          <li><a href="#">Terms and conditions</a></li>
          <li><a href="#">Website help</a></li>
        </ul>
      </div>
    </div>
  </footer>
</div>