Templates for the various page layouts are also available in the templates folder.

Do note that these template have the html head in-lined to allow previewing, but the developer should replace the head by including one of the auto-updating ones.

HTML template for various page types

Page type	Template file
	English	French
Default content page	page.en.html	page.fr.html
Default neutral content page	page-neutral.en.html	page-neutral.fr.html
Minimal structure (header only)	minimal.en.html	minimal.fr.html
Default homepage	homepage.en.html	homepage.fr.html
Faculty homepage	homepage-faculty.en.html	homepage-faculty.fr.html
Portal homepage	homepage-portal.en.html	homepage-portal.fr.html
Global homepage	homepage-global.html

Accessibility links template

<nav class="a11y">
  <a class="nav-link visuallyhidden focusable" href="#content" accesskey="c">Skip to content</a>
  <a class="nav-link visuallyhidden focusable" href="#main-navigation" accesskey="n">Skip to navigation</a>
</nav>

Minimal global header

<header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">

  <div class="logo">
    <a href="//www.epfl.ch">
      <span class="visuallyhidden">EPFL Homepage</span>
      <object type="image/svg+xml" class="logo-object" data="//static.epfl.ch/latest/images/logo.svg">
        <img alt="EPFL Logo" width="95" height="46" src="//static.epfl.ch/latest/images/logo.png" />
      </object>
    </a>
  </div>

  <div class="search search-simple">
    <a href="#search" class="icon icon-magnifier" data-widget="toggle">
      <span class="visuallyhidden">Search</span>
    </a>
    <div id="search" role="search">
      <form id="search-form" class="form form-inline" action="//search.epfl.ch">
        <div class="form-input-group">
          <div class="form-input">
            <label class="visuallyhidden" for="search-query">Search query</label>
            <input id="search-query" class="search-query" type="text" placeholder="search" name="q" accesskey="4" />
          </div>
          <div class="form-input form-input-mini">
            <button class="themed search-submit" type="submit">
              <span class="icon icon-magnifier"></span><span class="visuallyhidden">Search</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

</header>

Website name template

<h1 class="site-title" itemprop="isPartOf" itemscope itemtype="http://schema.org/CollectionPage">
  <a href="..." itemprop="url" accesskey="1">
    <span itemprop="name">
      <span class="visuallyhidden-xs visuallyhidden-xxs">The </span>
      <abbr title="A long description for the site acronym">site</abbr>
      <span class="visuallyhidden-xs visuallyhidden-xxs"> title</span>
    </span>
  </a>
</h1>

Breadcrumb navigation template

<nav class="nav nav-inline bcnav" itemprop="breadcrumb">
  <ol class="nav-list">
    <li class="nav-item" itemprop="sourceOrganization" itemscope itemtype="http://schema.org/CollegeOrUniversity">
      <a class="nav-link" href="http://www.epfl.ch" itemprop="url"><span itemprop="name">EPFL</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="...">Parent page</a>
    </li>
    <!-- ... -->
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="...">Current page</a>
    </li>
  </ol>
</nav>

Language navigation template

<nav class="nav nav-inline lang">
  <ul class="nav-list">
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="..." lang="en"><span class="visuallyhidden-xxs visuallyhidden-xs">English</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="fr" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">français</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="de" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">Deutsch</span></a>
    </li>
    <!-- ... -->
  </ul>
</nav>

Tool bar template

<div id="tools" class="tools">
  <div role="toolbar" aria-label="Page tools">
    <span class="secondary-content" data-role="label">Share:</span>
  </div>
</div>

Main navigation template

<div class="mainnav">
  <a id="main-navigation-label" class="hidden visible-xxs visible-xs" href="#main-navigation" data-widget="collapse">Main navigation</a>
  <nav id="main-navigation" class="nav nav-block nav-horizontal themed visible-s visible-m visible-l visible-xl visible-xxl" aria-labelledby="main-navigation-label">
    <ul class="nav-list" data-widget="menubar">
      <li class="nav-item hidden-xxs hidden-xs">
        <a class="nav-link" href="/">
          <span class="hidden-xxs hidden-xs icon icon-inline icon-big icon-home" role="presentation" hidden="hidden"></span>
          <span class="hidden-s hidden-m hidden-l hidden-xl hidden-xxl">Homepage</span>
        </a>
      </li>
      <li class="nav-item">
        <span class="nav-link" data-widget="collapse">Menu 1 [dropdown]</span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 1.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 1.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 2 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 2.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 2.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 3 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 3.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 3.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>

Secondary navigation template

<div class="localnav panel">
  <nav id="secondary-navigation" class="nav nav-block nav-vertical themed">
    <ul class="nav-list" data-widget="tree">
      <li class="nav-item">
        <a class="nav-link" href="...">Level 1 item</a>
        <ul class="nav-list" role="group">
          <li class="nav-item">
            <a class="nav-link" href="...">Level 2 item</a>
            <ul class="nav-list" role="group">
              <li class="nav-item nav-item-active">
                <a class="nav-link" href="...">Level 3 item</a>
                <ul class="nav-list" role="group">
                  <li class="nav-item">
                    <a class="nav-link" href="...">Level 4 item</a>
                    <ul class="nav-list" role="group">
                      <li class="nav-item">
                        <a class="nav-link" href="...">Level 5 item</a>
                      </li>
                      <!-- ... -->
                    </ul>
                  </li>
                  <!-- ... -->
                </ul>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>