Rua pattern library

Rua pattern library

Source: src/7-layout/_index.scss, line 1

6 Layout

<a class="site-go-back-to-top js-scroll-top" href="#top">
  <span class="ri ri-arrow-up"></span>
  Top
</a>

Source: src/7-layout/banner/_index.scss, line 1

6.2 Banner

@todo

Example

Events

Helping you understand what data is, and what you can do with it.

<div class="site-banner">
  <div class="container">
     <nav aria-label="You are here:" role="navigation">
       <ul class="breadcrumbs site-banner__breadcrumbs">
         <li>
           <a href="/" class="ri ri-home" aria-label="Home"></a>
         </li>
         <li aria-label="Current: Events">
           Manage data
         </li>
       </ul>
     </nav>
     <h1 class="site-banner__title">
       Events
     </h1>
     <p class="lead site-banner__lead">
       Helping you understand what data is, and what you can do with it.
     </p>
  </div>
  <div class="site-banner__pattern"></div>
</div>
<div class="site-banner">
  <div class="container">
     <nav aria-label="You are here:" role="navigation">
       <ul class="breadcrumbs site-banner__breadcrumbs">
         <li>
           <a href="/" class="ri ri-home" aria-label="Home"></a>
         </li>
         <li>
           <a href="#">
             Manage data
           </a>
         </li>
         <li>
           <a href="#">
             Releasing data on data.govt.nz
           </a>
         </li>
         <li aria-label="Current: Formats for open data, machine readable and human readable">
           ...
         </li>
       </ul>
     </nav>
     <h1 class="site-banner__title">
       Formats for open data, machine readable and human readable
     </h1>
     <p class="lead site-banner__lead">
       Helping you understand what data is, and what you can do with it.
     </p>
  </div>
  <div class="site-banner__pattern"></div>
</div>

Source: src/7-layout/header/_index.scss, line 1

6.4 Header

@todo

<header class="site-header">
  <div class="container site-header__nav-container">
    <div class="site-header__inner">
      <button class="button-icon navigation-toggle navicon" aria-label="Open menu" data-click="trigger: #site-navigation; class: in-active, is-active; arialabel: Open menu, Close menu">
				<span class="navicon-box">
					<span class="navicon-inner"></span>
				</span>
			</button>
      <a href="#" aria-label="Return to home page">
        <img src="http://via.placeholder.com/324x58" alt="data.govt.nz" width="164">
      </a>
      <nav aria-label="Main Menu" class="site-header__navigation">
        <ul class="menu">
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Get datasets
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Manage data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Use data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Open data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Events
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Blog
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              About
            </a>
          </li>
        </ul>
      </nav>
      <div id="site-search-wrap" class="search-toggle">
	     <button class="button-icon search-toggle__mob-search" data-click="trigger: #site-search; arialabel: 'Open search form', 'Close search form'; ariaexpanded: true, false" aria-label="Open search form" aria-controls="site-search" aria-expanded="false">
		      <span id="" class="ri ri-search"></span>
	      </button>
	      <button class="button search-toggle__desk-search" data-click="trigger: #site-search, #search-toggle__icon, #search-toggle__text; arialabel: '', 'Close search form'; class: 'button', 'button-icon secondary'; ariaexpanded: true, false" aria-controls="site-search" aria-expanded="false">
         <span id="search-toggle__icon" class="ri ri-chevron-down" data-toggle="class: ri-chevron-down, ri-chevron-up"></span>
         <span id="search-toggle__text" data-toggle="text: Search, ''">Search</span>
       </button>
     </div>
    </div>
  </div>
  <div class="site-search">
    <div class="site-search__visibility hidden" id="site-search" data-toggle="slide" style="display: none;"
      aria-expanded="false">
      <div class="container">
        <div class="site-search__inner">
          <form class="search-form" action="search/SearchForm" method="get">
            <label for="field-sitewide-search">
              Search for:
            </label>
            <div class="context-switch">
              <div class="field field--inline-label">
                <input id="search-for-website-content" type="radio" class="search-form-context" name="header-search-context"
                  value="content" checked="checked">
                <label for="search-for-website-content">
                  Website content
                </label>
              </div>
              <div class="field field--inline-label">
                <input id="search-for-datasets" type="radio" class="search-form-context" name="header-search-context"
                  value="datasets">
                <label for="search-for-datasets">
                  Datasets
                </label>
              </div>
            </div>
            <div class="field search-input">
              <input class="ckan-search-url" value="https://catalogue.data.govt.nz/dataset" type="hidden">
              <input id="field-sitewide-search" name="Search" placeholder="E.g. environment" type="text"
                aria-label="Search term">
            </div>
            <div class="actions">
              <button class="button">
                <span class="ri ri-search"></span>
                <span>Search</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="site-navigation">
  <div class="site-search__visibility" id="site-navigation" data-toggle="slide" style="display: none;" aria-expanded="true">
    <div class="container">
      <div class="site-search__inner">
        <ul class="menu vertical">
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Get datasets
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Manage data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Use data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Open data
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Events
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              Blog
            </a>
          </li>
          <li>
            <a href="#" class="site-header__menu-item menu-item link">
              About
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<header class="site-header site-header--minimal">
  <div class="container site-header__nav-container">
    <div class="site-header__inner">
      <a href="#" aria-label="Return to home page">
        <img src="http://via.placeholder.com/324x58" alt="data.govt.nz" width="164">
      </a>
      <a href="#" class="site-header--back-link button secondary">
        <span class="ri ri-chevron-left"></span>
        Back<span class="site-header--back-link-extra-text"> to Step by step guides</span>
      </a>
    </div>
  </div>
</header>

Example

<div class="sidebar-container">
  <a class="sidebar-container__title" id="subnav-section" href="/open-data/">
    <h4>Container title</h4>
  </a>
  <div class="sidebar-container__section">
    <h4 class="sidebar-container__section-heading">Section heading</h4>
    <div>Other components to go here&hellip;</div>
  </div>
  <div class="sidebar-container__section">
    <h4 class="sidebar-container__section-heading">Section heading</h4>
    <div>Other components to go here&hellip;</div>
  </div>
</div>