Pattern sample

Jump Menu

Abstract
eLife digest
Introduction
Results
Discussion
Materials & methods
References

HTML

									
										<div class="jump-menu__wrapper" data-behaviour="JumpMenu">
  <ul class="jump-menu__list">
      <li class="jump-menu__item">
        <a href="#abstract" class="jump-menu">Abstract</a>
      </li>
      <li class="jump-menu__item">
        <a href="#digest" class="jump-menu">eLife digest</a>
      </li>
      <li class="jump-menu__item">
        <a href="#introduction" class="jump-menu">Introduction</a>
      </li>
      <li class="jump-menu__item">
        <a href="#results" class="jump-menu">Results</a>
      </li>
      <li class="jump-menu__item">
        <a href="#discussion" class="jump-menu">Discussion</a>
      </li>
      <li class="jump-menu__item">
        <a href="#materials-and-methods" class="jump-menu">Materials & methods</a>
      </li>
      <li class="jump-menu__item">
        <a href="#references" class="jump-menu">References</a>
      </li>
  </ul>
</div>

Login Control

HTML

									
										
<div class="login-control"


     data-behaviour="LoginControl">


          <a href="#" class="button button--login">Log in / Register<span class="visuallyhidden"> (via Orcid)</span></a>

</div>

Login Control Logged In

HTML

									
										
<div class="login-control"


     data-link-field-roots="profile-manager, logout"
     data-profile-manager-text="Manage your profile" data-profile-manager-uri="#profileManageLink" data-logout-text="Log out" data-logout-uri="/log-out"
     data-default-uri="#profileHome"
     data-display-name="Kananinoheaokuuhomeopuukaimanaalohilo"

       data-subsidiary-text="View my profile"

     data-icon="

         &lt;picture class='login-control__icon'&gt;
             &lt;source srcset='../../assets/img/icons/profile.svg'
                        type='image/svg+xml'
                        &gt;
            &lt;img src='../../assets/img/icons/profile.png'
                 srcset='../../assets/img/icons/profile@2x.png 2x, ../../assets/img/icons/profile.png 1x'
                 alt='Profile icon'
            &gt;
        &lt;/picture&gt;
      "


     data-behaviour="LoginControl">

    <a href="#profileHome" class="login-control__non_js_control_link">Kananinoheaokuuhomeopuukaimanaalohilo</a>


</div>

Main Menu

This pattern contains: molecules-site-header-title

HTML

									
										<div class="main-menu wrapper" id="mainMenu" data-behaviour="MainMenu" tabindex="0">
  <div class="main-menu__title-container">
        <div class="site-header__title clearfix" role="banner">
          <div class="site-header__skip_to_content">
            <a href="#maincontent" class="site-header__skip_to_content__link button button--default">Skip to Content</a>
          </div>
          <a href="#" class="site-header__logo_link">
            <picture class="site-header__logo_link_image">
              <source srcset="../../assets/img/patterns/organisms/elife-logo-xs.svg" type="image/svg+xml">
              <img src="../../assets/img/patterns/organisms/elife-logo-xs@1x.png" alt="eLife logo" class="site-header__logo_link"/>
            </picture>
            <span class="visuallyhidden" >eLife home page</span>
          </a>
        </div>
  </div>
  <nav class="main-menu__container" role="navigation">
      <h3 class="list-heading">Menu</h3>
      <ul class="main-menu__list">
        <li class="main-menu__list_item hidden-wide">
          <a href="#" class="main-menu__list_link">Home</a>
        </li>
        <li class="main-menu__list_item hidden-wide">
          <a href="#" class="main-menu__list_link">Magazine</a>
        </li>
        <li class="main-menu__list_item hidden-wide">
          <a href="#ins" class="main-menu__list_link">Community</a>
        </li>
        <li class="main-menu__list_item hidden-wide">
          <a href="#abo" class="main-menu__list_link">About</a>
        </li>
        <li class="main-menu__list_item">
          <a href="#res" class="main-menu__list_link">Research categories</a>
        </li>
        <li class="main-menu__list_item end-of-group">
          <a href="#" class="main-menu__list_link">Inside eLife</a>
        </li>
        <li class="main-menu__list_item hidden-wide">
          <a href="#" class="main-menu__list_link">Search</a>
        </li>
        <li class="main-menu__list_item end-of-group hidden-wide">
          <a href="#" class="main-menu__list_link">Subscribe to alerts</a>
        </li>
        <li class="main-menu__list_item hidden-wide">
          <a href="#" class="main-menu__list_link">Submit your research</a>
        </li>
        <li class="main-menu__list_item">
          <a href="#" class="main-menu__list_link">Author guide</a>
        </li>
        <li class="main-menu__list_item">
          <a href="#" class="main-menu__list_link">Reviewer guide</a>
        </li>
      </ul>
    <a href="#siteHeader" class="to-top-link">Back to top</a>
  </nav>
</div>

Pager

This pattern contains: atoms-button

HTML

									
										<div class="pager" >

      <a href="#" class="button button--default">Previous</a>

      <a href="#" class="button button--default">Next</a>

</div>

Pager First Page

This pattern contains: atoms-button

HTML

									
										<div class="pager" data-behaviour="Pager" data-targetId="idOfListElementToLoadContentInTo">

      <a href="#" class="button button--default">Previous</a>

      <a href="#" class="button button--default button--full">Load more</a>

</div>

Pager Previous Only

This pattern contains: atoms-button

HTML

									
										<div class="pager" >

      <a href="#" class="button button--default">Previous</a>

      <a href="#" class="button button--default">Next</a>

</div>

Select Nav

HTML

									
										<form method="GET" action="/path/to/archive" data-behaviour="SelectNav">
    <div class="form-item">

        <label for="archiveYear"
               class="form-item__label visuallyhidden">
          Archive year
        </label>
      <select class="select"
         id="archiveYear"
        
        
        
        
        
      >

          <option value="2016" >2016</option>
          <option value="2015" >2015</option>
          <option value="2014" >2014</option>
      </select>

    </div>
          <button class="button button--default button--extra-small" type="submit" name="button-name">Go</button>
</form>

Site Header Nav Bar

HTML

									
										<nav class="">
  <ul class="">
      <li class="">


          <a href="#">
            [Do not use this base pattern directly: see the following variants of this pattern for usage]
          </a>

      </li>
  </ul>
</nav>

Site Header Nav Bar Primary

HTML

									
										<nav class="nav-primary">
  <ul class="nav-primary__list clearfix">
      <li class="nav-primary__item nav-primary__item--first">


          <a href="#mainMenu">
            Menu
          </a>

      </li>
      <li class="nav-primary__item">


          <a href="#">
            Home
          </a>

      </li>
      <li class="nav-primary__item">


          <a href="#">
            Magazine
          </a>

      </li>
      <li class="nav-primary__item">


          <a href="#">
            Community
          </a>

      </li>
      <li class="nav-primary__item">


          <a href="#">
            About
          </a>

      </li>
  </ul>
</nav>

Site Header Nav Bar Secondary

HTML

									
										<nav class="nav-secondary">
  <ul class="nav-secondary__list clearfix">
      <li class="nav-secondary__item nav-secondary__item--search">


          <a href="#" rel="search">
            Search
          </a>

      </li>
      <li class="nav-secondary__item nav-secondary__item--alert">


          <a href="#">
            Alerts
          </a>

      </li>
      <li class="nav-secondary__item nav-secondary__item--hide-narrow">

          <a href="#" class="button button--default button--extra-small" aria-label="Descriptive and accessible name">Submit your research</a>


      </li>
  </ul>
</nav>

Site Header Title

HTML

									
										  <div class="site-header__title clearfix" role="banner">
    <div class="site-header__skip_to_content">
      <a href="#maincontent" class="site-header__skip_to_content__link button button--default">Skip to Content</a>
    </div>
    <a href="#" class="site-header__logo_link">
      <picture class="site-header__logo_link_image">
        <source srcset="../../assets/img/patterns/organisms/elife-logo-xs.svg" type="image/svg+xml">
        <img src="../../assets/img/patterns/organisms/elife-logo-xs@1x.png" alt="eLife logo" class="site-header__logo_link"/>
      </picture>
      <span class="visuallyhidden" >eLife home page</span>
    </a>
  </div>

Site Header Title Border Variant

HTML

									
										  <header class="site-header clearfix" id="siteHeader">
  <div class="site-header__title-border clearfix" role="banner">
    <div class="site-header__skip_to_content">
      <a href="#maincontent" class="site-header__skip_to_content__link button button--default">Skip to Content</a>
    </div>
    <a href="#" class="site-header__logo_link">
      <picture class="site-header__logo_link_image">
        <source srcset="../../assets/img/patterns/organisms/elife-logo-xs.svg" type="image/svg+xml">
        <img src="../../assets/img/patterns/organisms/elife-logo-xs@1x.png" alt="eLife logo" class="site-header__logo_link"/>
      </picture>
      <span class="visuallyhidden" >eLife home page</span>
    </a>
  </div>
  </header>

Site Header Title Wrapped

HTML

									
										  <header class="site-header clearfix" id="siteHeader">
  <div class="site-header__title clearfix" role="banner">
    <div class="site-header__skip_to_content">
      <a href="#maincontent" class="site-header__skip_to_content__link button button--default">Skip to Content</a>
    </div>
    <a href="#" class="site-header__logo_link">
      <picture class="site-header__logo_link_image">
        <source srcset="../../assets/img/patterns/organisms/elife-logo-xs.svg" type="image/svg+xml">
        <img src="../../assets/img/patterns/organisms/elife-logo-xs@1x.png" alt="eLife logo" class="site-header__logo_link"/>
      </picture>
      <span class="visuallyhidden" >eLife home page</span>
    </a>
  </div>
  </header>

Tabbed Navigation

HTML

									
										<nav class="tabbed-navigation" data-behaviour="TabbedNavigation">
  <ul class="tabbed-navigation__tabs">
      <li class="tabbed-navigation__tab-label">
        <a href="#">[Do not use this base pattern directly: see the following variants of this pattern for usage]</a>
      </li>
  </ul>
</nav>

Tabbed Navigation Active Tab First

HTML

									
										<nav class="tabbed-navigation" data-behaviour="TabbedNavigation">
  <ul class="tabbed-navigation__tabs">
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--active">
        <a href="#">Full text</a>
      </li>
      <li class="tabbed-navigation__tab-label">
        <a href="#">Figures<span class="tabbed-navigation__tab-label--long"> and data</span></a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--side-by-side" data-side-by-side-link="#">
        <a href="#">Peer review</a>
      </li>
  </ul>
</nav>

Tabbed Navigation Active Tab Fourth

HTML

									
										<nav class="tabbed-navigation" data-behaviour="TabbedNavigation">
  <ul class="tabbed-navigation__tabs">
      <li class="tabbed-navigation__tab-label">
        <a href="#">Full text</a>
      </li>
      <li class="tabbed-navigation__tab-label">
        <a href="#">Figures<span class="tabbed-navigation__tab-label--long"> and data</span></a>
      </li>
      <li class="tabbed-navigation__tab-label">
        <a href="#">Peer review</a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--side-by-side tabbed-navigation__tab-label--active" data-side-by-side-link="#">
        <a href="#">Side by side</a>
      </li>
  </ul>
</nav>

Tabbed Navigation Active Tab Second

HTML

									
										<nav class="tabbed-navigation" data-behaviour="TabbedNavigation">
  <ul class="tabbed-navigation__tabs">
      <li class="tabbed-navigation__tab-label">
        <a href="#">Full text</a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--active">
        <a href="#">Figures<span class="tabbed-navigation__tab-label--long"> and data</span></a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--side-by-side" data-side-by-side-link="#">
        <a href="#">Peer review</a>
      </li>
  </ul>
</nav>

Tabbed Navigation Active Tab Third

HTML

									
										<nav class="tabbed-navigation" data-behaviour="TabbedNavigation">
  <ul class="tabbed-navigation__tabs">
      <li class="tabbed-navigation__tab-label">
        <a href="#">Full text</a>
      </li>
      <li class="tabbed-navigation__tab-label">
        <a href="#">Figures<span class="tabbed-navigation__tab-label--long"> and data</span></a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--active">
        <a href="#">Peer review</a>
      </li>
      <li class="tabbed-navigation__tab-label tabbed-navigation__tab-label--side-by-side" data-side-by-side-link="#">
        <a href="#">Side by side</a>
      </li>
  </ul>
</nav>

View Selector

Article

HTML

									
										<div class="view-selector" data-behaviour="ViewSelector">
  <ul class="view-selector__list">
    <li class="view-selector__list-item view-selector__list-item--primary view-selector__list-item--active">
      <a href="#article" class="view-selector__link view-selector__link--primary">Article</a>
    </li>



  </ul>
</div>

HTML

									
										<div class="view-selector view-selector--has-secondary" data-behaviour="ViewSelector" data-side-by-side-link="#sideBySide">
  <ul class="view-selector__list">
    <li class="view-selector__list-item view-selector__list-item--primary view-selector__list-item--active">
      <a href="#article" class="view-selector__link view-selector__link--primary">Article</a>
    </li>
      <li class="view-selector__list-item view-selector__list-item--secondary">
          <a href="#figures" class="view-selector__link view-selector__link--secondary">Figures and data</a>
      </li>

      <li class="view-selector__list-item">
        <a href="#rds" class="view-selector__link"><span>Executable code</span></a>
      </li>

      <li class="view-selector__list-item view-selector__divider"></li>

        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#abstract" class="view-selector__jump_link">Abstract</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#digest" class="view-selector__jump_link">eLife digest</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#introduction" class="view-selector__jump_link">Introduction</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#results" class="view-selector__jump_link">Results</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#discussion" class="view-selector__jump_link">Discussion</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#materials-and-methods" class="view-selector__jump_link">Materials & methods</a>
        </li>
        <li class="view-selector__jump_link_item view-selector__list-item">
          <a href="#references" class="view-selector__jump_link">References</a>
        </li>

  </ul>
</div>

View Selector With Tabs

Latest research
Magazine

HTML

									
										<div class="view-selector view-selector--has-secondary button--switch-selector" data-behaviour="ViewSelector">
  <ul class="view-selector__list">
    <li class="view-selector__list-item view-selector__list-item--primary view-selector__list-item--active">
      <a href="#primaryListing" class="view-selector__link view-selector__link--primary">Latest research</a>
    </li>
      <li class="view-selector__list-item view-selector__list-item--secondary">
          <a href="#secondaryListing" class="view-selector__link view-selector__link--secondary">Magazine</a>
      </li>



  </ul>
</div>