<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#" class="ri ri-home" aria-label="home"></a></li>
    <li><a href="#">Library</a></li>
    <li class="disabled">Disabled</li>
    <li aria-label="Current: Data">
      Data
    </li>
  </ul>
</nav>

<a href="#" class="category-select">
  <span class="category-select__label">Unselected filter</span>
  <span class="category-select__icon ri ri-plus"></span>
</a>

<a href="#" class="filter-select">
  <span class="filter-select__label">Unselected filter</span>&nbsp;
  <span class="filter-select__count">(191)</span>
  <span class="filter-select__icon ri ri-plus"></span>
</a>
<a href="#" class="filter-select filter-select--selected">
  <span class="filter-select__label">Selected filter</span>&nbsp;
  <span class="filter-select__count">(191)</span>
  <span class="filter-select__icon ri ri-cross"></span>
</a>

<nav aria-label="Iterator" class="iterator">
  <a class="iterator__prev">
    <span aria-label="Previous page" class="button-icon">
      <span class="ri ri-arrow-left"></span>
    </span>
    <p class="iterator__summary hidden-xs mxw-sm">
      Lorem ipsum dolor sit amet.
    </p>
  </a>
  <a class="iterator__next">
    <span href="" aria-label="Next page" class="button-icon">
      <span class="ri ri-arrow-right"></span>
    </span>
    <p class="iterator__summary hidden-xs mxw-sm">
      Proin dolor nunc, sagittis tincidunt nibh vel, ultricies feugiat tortor.
    </p>
  </a>
</nav>

<nav aria-label="Iterator" class="iterator">
  <span class="iterator__prev">
    <span aria-label="Previous page" class="button-icon state-disabled">
      <span class="ri ri-arrow-left"></span>
    </span>
  </span>
  <a class="iterator__next">
    <span href="" aria-label="Next page" class="button-icon">
      <span class="ri ri-arrow-right"></span>
    </span>
    <p class="iterator__summary hidden-xs mxw-sm">
      Proin dolor nunc, sagittis tincidunt nibh vel, ultricies feugiat tortor.
    </p>
  </a>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-lg-4">
     <a href="#" class="link-tile">
       <span class="link-tile__header">
         <span class="link-tile__header-text">Releasing open data on data.govt.nz</span>
         <span class="link-tile__icon ri ri-arrow-right"></span>
       </span>
       <span class="link-tile__content">Guide to reviewing and safely releasing open data for reuse.</span>
     </a>
    </div>
    <div class="col-sm-6 col-lg-4">
     <a href="#" class="link-tile">
       <span class="link-tile__header">
         <span class="link-tile__header-text">Releasing open data on data.govt.nz</span>
         <span class="link-tile__icon ri ri-arrow-right"></span>
       </span>
       <span class="link-tile__content">Guide to reviewing and safely releasing open data for reuse.</span>
     </a>
    </div>
    <div class="col-sm-6 col-lg-4">
     <a href="#" class="link-tile">
       <span class="link-tile__header">
         <span class="link-tile__header-text">Releasing open data on data.govt.nz</span>
         <span class="link-tile__icon ri ri-arrow-right"></span>
       </span>
       <span class="link-tile__content">Guide to reviewing and safely releasing open data for reuse.<br><small>(9 hours ago)</small></span>
     </a>
    </div>
  </div>
</div>

<div class="navicon" data-click="class: in-active, is-active">
  <span class="navicon-box">
    <span class="navicon-inner"></span>
  </span>
</div>

<nav aria-label="Pagination" class="iterator">
  <span aria-label="Previous page" class="button-icon state-disabled">
    <span class="ri ri-arrow-left"></span>
  </span>
  <ul class="pagination">
    <li class="current" aria-label="You're on page 1">1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 21">21</a></li>
  </ul>
  <a href="" aria-label="Next page" class="button-icon">
    <span class="ri ri-arrow-right"></span>
  </a>
</nav>

<div class="progress-bar">
  <div class="progress-bar__mobile-summary">Page 3 of 4</div>
  <ul class="progress-bar__list">
    <li class="progress-bar__step progress-bar__step--enabled">
      <button class="progress-bar__button">
        <span class="ri ri-check"></span>
      </button>
    </li>
    <li class="progress-bar__step progress-bar__step--enabled">
      <button class="progress-bar__button">
        <span class="ri ri-check"></span>
      </button>
    </li>
    <li class="progress-bar__step progress-bar__step--enabled">
      <button class="progress-bar__button progress-bar__button--active"></button>
    </li>
    <li class="progress-bar__step">
      <button class="progress-bar__button" disabled></button>
    </li>
  </ul>
</div>

<div class="search-form">
  <label>
    Search for:
  </label>
  <div class="context-switch">
    <div class="field field--inline-label">
      <input name="context" type="radio" id="search-website-content" value="website-content">
      <label for="search-website-content">
        Website content
      </label>
    </div>
    <div class="field field--inline-label">
      <input name="context" type="radio" id="search-datasets" value="datasets">
      <label for="search-datasets">
        Datasets
      </label>
    </div>
  </div>
  <div class="field search-input">
      <input type="text">
  </div>
  <div class="actions">
      <button class="button">
        <span class="ri ri-search"></span>
        Search
      </button>
  </div>
</div>

<div class="share-link-container">
  <label for="clipboard-copy" class="share-link__label">Share this summary or save the link to return later</label>
  <div class="share-link">
    <input type="text" readonly="readonly" id="clipboard-copy" value="https://data.govt.nz/manage-data/step-by-step-guides/releasing-open-data-on-data-govt-nz/" />
    <button class="button-icon" data-clipboard data-clipboard-target="#clipboard-copy">
      <span class="ri ri-copy"></span>
    </button>
  </div>
</div>

<div class="sidebar-group">
  <h5 class="sidebar-group__heading">Organisations</h5>
  <ul class="sidebar-group__list">
    <li class="sidebar-group__item">
      <a href="#" class="filter-select">
        <span class="filter-select__label">Unselected filter</span>&nbsp;
        <span class="filter-select__count">(191)</span>
        <span class="filter-select__icon ri ri-plus"></span>
      </a>
    </li>
    <li class="sidebar-group__item">
      <a href="#" class="filter-select filter-select--selected">
        <span class="filter-select__label">Selected filter</span>&nbsp;
        <span class="filter-select__count">(191)</span>
        <span class="filter-select__icon ri ri-cross"></span>
      </a>
    </li>
    <li class="sidebar-group__item">
      <a href="#" class="filter-select">
        <span class="filter-select__label">Unselected filter</span>&nbsp;
        <span class="filter-select__count">(191)</span>
        <span class="filter-select__icon ri ri-plus"></span>
      </a>
    </li>
  </ul>
</div>

<ul class="menu vertical sidebar-menu">
  <li><a href="#" class="menu-item sidebar-menu__item current">What is open data?</a></li>
  <li><a href="#" class="menu-item sidebar-menu__item link">Learn more about open data</a></li>
  <li><a href="#" class="menu-item sidebar-menu__item link">Open government data programme</a></li>
  <li><a href="#" class="menu-item sidebar-menu__item link">Open Data Maturity Dashboard</a></li>
  <li><a href="#" class="menu-item sidebar-menu__item link">Open licensing</a></li>
  <li>
    <a href="#" class="menu-item sidebar-menu__item link">Open data policy</a>
    <ul class="menu vertical">
      <li><a href="#" class="menu-item sidebar-menu__item">Sub item</a></li>
    </ul>
  </li>
  <li><a href="#" class="menu-item sidebar-menu__item link">Formats for open data, machine readable and human readable</a></li>
</ul>

<button>Click me then press tab to see link</button>
<a href="#content" class="sr-only-focusable skip-to-content">Skip to content</a>

<ul class="social-menu">
  <li>
    <a href="#" class="ri ri-twitter" aria-label="View our Twitter"></a>
  </li>
  <li>
    <a href="#" class="ri ri-facebook" aria-label="View our Facebook"></a>
  </li>
  <li>
    <a href="#" class="ri ri-youtube" aria-label="View our Youtube"></a>
  </li>
  <li>
    <a href="#" class="ri ri-linkedin" aria-label="View our LinkedIn"></a>
  </li>
</ul>

<ul class="social-share-menu">
  <li class="social-share-menu__item">
    <a href="https://twitter.com/home?status=URLTOSHARE" class="social-share-menu__link" aria-label="Share this page on Twitter">
      <span class="ri ri-twitter"></span>
    </a>
  </li>
  <li class="social-share-menu__item">
    <a href="https://www.facebook.com/sharer/sharer.php?u=URLTOSHARE" class="social-share-menu__link" aria-label="Share this page on Facebook">
      <span class="ri ri-facebook"></span>
    </a>
  </li>
  <li class="social-share-menu__item">
    <a href="https://www.linkedin.com/shareArticle?mini=true&url=URLTOSHARE" class="social-share-menu__link" aria-label="Share this page on LinkedIn">
      <span class="ri ri-linkedin"></span>
    </a>
  </li>
</ul>

<ul class="tabs md-horizontal">
  <li>
    <a href="#">
      Manage data
    </a>
  </li>
  <li>
    <a href="#">
      Use data
    </a>
  </li>
  <li>
    <a href="#" class="current">
      Open data
    </a>
  </li>
</ul>