@servicensw/header

Header components

Usage no npm install needed!

<script type="module">
  import servicenswHeader from 'https://cdn.skypack.dev/@servicensw/header';
</script>

README

@servicensw/header

header component

Service NSW package documentation and examples
(Login credentials required)

Installation

npm install @servicensw/header --save-dev

How to use

CSS

  • PostCSS workflow: @import '@servicensw/header';
  • Sass/Eyeglass: @import 'servicensw-header';
  • Native CSS: @import url('dist/header.css');
  • Link tag: <link href="dist/header.css" rel="stylesheet" type="text/css">

HTML

<header class="page-header">
  <div class="container">
    <div class="print-logo">
      <img src="../images/servicensw-logo.png" alt="Service NSW">
    </div>
    <nav class="breadcrumb" role="navigation" aria-label="Breadcrumbs">
      <ol>
        <li>
          <a href="#">Home</a>
        </li>
        <li class="breadcrumb__previous">
          <a href="#">Previous page</a>
        </li>
        <li>
          <a href="#">Current page</a>
        </li>
      </ol>
    </nav>
    <h1>Page title</h1>
    <p>Page intro.</p>
  </div>
</header>

Developer notes

Please ensure the correct path to servicensw-logo.png print logo is provided for printed output of page.