Skip to main content

ID7 Reference Site

Components

Utility bar

The utility bar provides consistently positioned and styled access to application links and manage accounts.

<nav class="id7-utility-bar" aria-label="Utility bar">
  <ul>
    <li><a href="#">App link 1</a></li>
    <li><a href="#">App link 2</a></li>
    <li>
      <a href="http://logout.link.goes.here" data-toggle="id7:account-popover" data-loginlink="http://login.link.goes.here" data-name="Your name">Sign out</a>
    </li>
  </ul>
</nav>

The last link should always be either a "Sign in" link, or an initiator for the account popover with the full name of the currently signed-in user.

The Warwick logo should appear in the top left of the masthead, "bleeding" from the image behind the utility bar.

The logo should always link to the University of Warwick homepage (https://warwick.ac.uk), not the homepage of the current application.

<nav class="id7-site-links" aria-label="Site links">
  <ul>
    <li><a href="https://warwick.ac.uk/study">Study</a></li>
    <li><a href="https://warwick.ac.uk/research">Research</a></li>
    <li><a href="https://warwick.ac.uk/business">Business</a></li>
    <li><a href="https://warwick.ac.uk/alumni">Alumni</a></li>
    <li><a href="https://warwick.ac.uk/news">News</a></li>
    <li><a href="https://warwick.ac.uk/engagement">Engagement</a></li>
  </ul>
</nav>

This HTML should not be modified or include (or exclude) any links other than the above.

The search box provides a recognisable way to search across Warwick. When users focus inside the search box and start typing, a floating label appears.

<div class="id7-search">
  <form action="//search.warwick.ac.uk/website" role="search">
    <input type="hidden" name="source" value="https://warwick.ac.uk/"> <!-- Replace with the current page URL -->
    <div class="form-group">
      <div class="id7-search-box-container floating-label">
        <input type="search" class="form-control input-lg" id="id7-search-box" name="q" placeholder="Search Warwick" data-suggest="go" aria-label="Search Warwick">
        <label for="id7-search-box">Search Warwick</label>
        <button type="submit" class="search-button"><span class="sr-only">Search</span><i class="fas fa-search fa-2x"></i></button>
      </div>
    </div>
  </form>
</div>

Site title

The site title affixes to the top of the page and provides a way to quickly access the top of the site, or application.

<div class="id7-header-text clearfix">
  <h1>
    <!-- Parent site link often excluded -->
    <span class="id7-parent-site-link"><a href="#">Parent site name</a></span>
    <span class="id7-current-site-link"><a href="#">Current site name</a></span>
  </h1>
</div>

Horizontal navigation is designed to work consistently for up to three levels. For deeper content use a different navigation metaphor, such as search or in-page lists of links, to avoid confusing visitors.

Primary

Almost all sites will include primary navigation below the site title, to provide links to top-level content within the site. It should always be visible at the root of the site, and hidden for mobile on deeper pages, by the addition of a hidden-xs class. You may optionally use dropdowns to expose children of primary pages on hover.

<div class="id7-navigation">
  <!-- remove hidden-xs at site root -->
  <nav class="navbar navbar-primary hidden-xs"
    role="navigation" aria-label="Primary navigation">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="/first">First section</a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="/first/child1">Child 1</a></li>
          <li><a href="/first/child2">Child 2</a></li>
        </ul>
      </li>
      <li><a href="/second">Second section</a></li>
    </ul>
  </nav>
  <!-- secondary nav goes here -->
</div>

Below the site root, highlight the current section with an active class on the appropriate list item, and also add a next-secondary class if secondary navigation will also be visible (see below).

Secondary

Secondary navigation is for breadcrumbs, taking you from the site root to the currently visible page's level. If you only have two levels in your site, this will only contain the current top-level section, and be hidden in desktop views, only visible on mobile for context. For deeper pages, it will show a breadcrumb trail, using the active class to highlight position.

...
<nav class="navbar navbar-secondary"
     role="navigation" aria-label="Secondary navigation">
  <ul class="nav navbar-nav">
    <li class="nav-breadcrumb"><a href="/first">First sub-section</a></li>
    <li class="nav-breadcrumb active"><a href="/second">Second sub-section</a></li>
  </ul>
</nav>
...

Highlight the current section with an active class on the appropriate list item, and add a next-tertiary class if tertiary navigation will also be visible (see below).

Tertiary

Tertiary navigation shows the current page and its siblings in two-level sites, and children of the current page in deeper sites.

...
<nav class="navbar navbar-tertiary"
     role="navigation" aria-label="Tertiary navigation">
  <ul class="nav navbar-nav">
    <li class="active"><a href="/first">Current page</a></li>
    <li><a href="/second">Sibling page</a></li>
  </ul>
</nav>
...

Page footer

The page footer contains common links for the whole application and, optionally, for the site.

<footer class="id7-page-footer id7-footer-coloured">
  <div class="id7-site-footer">
    <div class="id7-site-footer-content">...</div>
  </div>
  <div class="id7-app-footer">
    <div class="id7-app-footer-content">...</div>
  </div>
</footer>

The footer MUST use one of id7-footer-coloured or id7-footer-divider as detailed below.

Site footer

Typical content might be contact information and social media links. The content of this section should not change across a site.

Application footer

The application footer contains common links that all Warwick apps should include - the small print. Typical links are for application platform information, copyright, terms of use, privacy policy, cookies, and accessibility.

For applications hosted by IT Services, it is usually appropriate to link to the relevant Sitebuilder pages. You will need to link to vendor-specific pages if the application has differing policies. If you link to central pages, you must ensure that your application does follow these policies and procedures without conflict.

Coloured footer

By adding the class id7-footer-coloured to the <footer> element, the site-wide footer will be coloured. You can then add a logo bleed to the app footer by using the following HTML:

<footer class="id7-page-footer id7-footer-coloured">
  <div class="id7-site-footer">
    <div class="id7-site-footer-content">...</div>
  </div>
  <div class="id7-app-footer">
    <div class="id7-app-footer-content">
      <div class="id7-logo-bleed"></div>

      ...
    </div>
  </div>
</footer>

Footer with divider

By adding the class id7-footer-divider to the <footer> element, the site-wide footer will be white and it is possible to add a divider at the top of it by using the following HTML: 

<footer class="id7-page-footer id7-footer-divider">
  <div class="id7-site-footer">
    <div class="id7-site-footer-content">
      <div class="id7-horizontal-divider">
        <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" width="1130" height="40" viewBox="0, 0, 1130, 40">
  <path d="m 0,0.5 1030.48, 0 22.8,39.5 16.96,-31.4 16.96,31.4 22.8,-39.5 20,0" stroke="#383838" fill="none" class="divider"></path>
</svg>
      </div>

      ...
    </div>
  </div>
  <div class="id7-app-footer">
    <div class="id7-app-footer-content">...</div>
  </div>
</footer>

The divider will be the brand colour.

<nav class="id7-paging" aria-label="Paging">
  <ul class="pager">
    <li class="previous">
      <a href="#">
        Previous page
      </a>
    </li>

    <li class="current-page-count"><span>Page X of Y</span></li>

    <li class="next">
      <a href="#">
        Next page
      </a>
    </li>
  </ul>
</nav>

Example:

Pagination with jump

Koan spinners

Replaces a <i> with a class of id7-koan-spinner with an inline SVG of a rotating Koan.

<i class="id7-koan-spinner" aria-hidden="true"></i>

Any attributes you put on the <i> are copied across.

Useful class names (in addition to id7-koan-spinner):

  • id7-koan-spinner--lg - a larger koan
  • id7-koan-spinner--sm - a smaller koan
  • id7-koan-spinner--xs - a much smaller koan
  • id7-koan-spinner--2x (3x, 4x, etc) - double size koan
  • id7-koan-spinner--slow - a slow spinning koan
  • id7-koan-spinner--fast - a fast spinning koan

You can style the SVG using normal CSS, e.g.

.id7-koan-spinner__neon--middle {
  stroke: #14b3b3;
  animation-duration: 2s;
}