HTML Starter Kit

We have provided a compiled version of the Design System that can be full run from your file system.  This will allow lower capability teams to quickly prototype without setting up a full local instance.

How it works

  1. Download the HTML Starter kit directly from our github repository ;
  2. Unzip the package into selected folder;
  3. Launch index.html in your desired browser to browse list of patterns;
  4. Start prototyping by reading our usage guidance and using code snippets from our patterns list.

Creating a basic page

Create an html page in the root of your unzipped files and paste the below code.   This will give you the basic header, main navigation and footer.  

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NSW Digital Design System - Full Width Page</title>
  <meta name="robots" content="noindex" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="../../favicon.ico">
  <link rel="stylesheet" href="../../css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
  <script>
    // SVG Sprite Loader
    var svgAjax = new XMLHttpRequest();
    svgAjax.open("GET", "../../assets/svg/sprite.svg", true);
    svgAjax.send();
    svgAjax.onload = function(e) {
      var fragment = document.createRange().createContextualFragment(svgAjax.responseText);
      var svg = fragment.querySelector('svg')
      svg.setAttribute('aria-hidden', true);
      svg.style.cssText = 'position: absolute; width: 0; height: 0; overflow: hidden;'
      document.body.insertBefore(fragment, document.body.childNodes[0]);
    };
    // Replace 'no-js' with 'js' on the html tag
    (function(e){e.className=e.className.replace(/\bno-js\b/,'js')})(document.documentElement);
  </script>
</head>

<body><?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;"><defs><svg viewBox="0 0 32 32" id="arrow" xmlns="http://www.w3.org/2000/svg"><path d="M20.023 4.022L32 16 20.023 27.978l-2.504-2.504 7.689-7.689-25.209.001v-3.575h25.207l-7.688-7.686 2.504-2.504z"/></svg><svg viewBox="0 0 20 32" id="chevron" xmlns="http://www.w3.org/2000/svg"><path d="M20 16L4 0 0 4l12 12L0 28l4 4 16-16z"/></svg><svg viewBox="0 0 32 32" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M28.235 0L32 3.765 19.764 16 32 28.235 28.235 32 16 19.764 3.765 32 0 28.235 12.235 16 0 3.765 3.765 0 16 12.236 28.235 0z"/></svg><svg id="dpc-logo" data-name="Layer 1" viewBox="0 0 180 59.13" xmlns="http://www.w3.org/2000/svg"><defs><style>.dcls-1{fill:#002664}.dcls-2{fill:#fff}.dcls-3{fill:#d7153a}</style></defs><path class="dcls-1" d="M71.22 59.07a.51.51 0 01-.51-.52V5.94a.52.52 0 111 0v52.61a.52.52 0 01-.52.52zM87.81 24.65h5.68c3.37 0 5.47 1.91 5.47 4.81v.05c0 3.23-2.59 4.91-5.76 4.91h-2.86v4.63h-2.53zm5.47 7.49c1.92 0 3.11-1.07 3.11-2.57 0-1.69-1.22-2.58-3.11-2.58h-2.94v5.19zM100.51 28.19H103v2.45a3.86 3.86 0 013.84-2.64v2.64h-.14c-2.18 0-3.71 1.42-3.71 4.3v4.13h-2.48zM107.27 33.66a5.4 5.4 0 015.31-5.66c3.46 0 5.21 2.72 5.21 5.85v.7h-8a3 3 0 003.12 2.75 4 4 0 003-1.29l1.46 1.29a5.49 5.49 0 01-4.45 2 5.42 5.42 0 01-5.65-5.64zm8-.8a2.82 2.82 0 00-2.71-2.86 2.94 2.94 0 00-2.82 2.86zM119.54 28.19H122v1.65a3.9 3.9 0 013.34-1.84 3.45 3.45 0 013.26 1.92 4.34 4.34 0 013.66-1.92c2.37 0 3.81 1.5 3.81 4.16v6.93h-2.49v-6.21c0-1.73-.81-2.65-2.21-2.65s-2.32.94-2.32 2.69v6.13h-2.49v-6.19c0-1.69-.83-2.63-2.2-2.63s-2.33 1-2.33 2.69v6.13h-2.49zM138.37 24.16H141v2.36h-2.67zm.1 4H141v10.89h-2.49zM142.86 33.66a5.39 5.39 0 015.31-5.66c3.45 0 5.2 2.72 5.2 5.85v.7h-8a3 3 0 003.12 2.75 4 4 0 002.93-1.3l1.46 1.29a5.49 5.49 0 01-4.45 2 5.41 5.41 0 01-5.57-5.63zm8-.8c-.16-1.6-1.11-2.86-2.75-2.86a2.93 2.93 0 00-2.82 2.86zM155.12 28.19h2.49v2.45a3.86 3.86 0 013.85-2.64v2.64h-.14c-2.19 0-3.71 1.42-3.71 4.3v4.13h-2.49zM96.27 56.56a6.31 6.31 0 01-4.88 2.49c-2.53 0-4.43-1.65-4.43-4V55c0-1.93 1.38-3.35 3.73-4.21a4.77 4.77 0 01-1.61-3.3 3.36 3.36 0 013.6-3.27 3.2 3.2 0 013.32 3.1c0 1.79-1.34 3-3.54 3.72L96.24 55a18.53 18.53 0 001.88-3.5l1 .4a19.76 19.76 0 01-2.15 3.82l2.66 2.74-.84.7zm-.68-.7l-4.26-4.41C89 52.24 88 53.57 88 55a3.16 3.16 0 003.38 3.11 5.55 5.55 0 004.21-2.25zm-.66-8.46a2.24 2.24 0 00-2.29-2.27 2.35 2.35 0 00-2.49 2.33c0 .91.39 1.61 1.67 3 2.06-.69 3.11-1.7 3.11-3.06zM106.14 51.68a7.29 7.29 0 017.43-7.45 7.53 7.53 0 015.64 2.24l-1.63 1.88a5.71 5.71 0 00-4-1.79 4.84 4.84 0 00-4.75 5.08 4.85 4.85 0 004.75 5.1 5.65 5.65 0 004.14-1.85l1.62 1.65a7.43 7.43 0 01-5.84 2.55 7.25 7.25 0 01-7.36-7.41zM120.2 55.71c0-2.34 1.83-3.5 4.48-3.5a9 9 0 012.93.46v-.27c0-1.54-1-2.37-2.7-2.37a7.63 7.63 0 00-3.11.68l-.66-2a9.24 9.24 0 014.1-.89 4.83 4.83 0 013.6 1.22A4.5 4.5 0 01130 52.4v6.44h-2.42v-1.36a4.41 4.41 0 01-3.54 1.59c-2.04 0-3.84-1.17-3.84-3.36zm7.45-.78v-.74a6.84 6.84 0 00-2.47-.43c-1.61 0-2.55.68-2.55 1.81 0 1 .92 1.65 2.12 1.65 1.64.04 2.9-.91 2.9-2.29zM134.73 57.16v1.68h-2.49v-15h2.49v6a4.32 4.32 0 013.7-2c2.55 0 5 2 5 5.64 0 3.6-2.47 5.64-5 5.64a4.45 4.45 0 01-3.7-1.96zm6.21-3.73a3.22 3.22 0 00-3.11-3.48 3.28 3.28 0 00-3.17 3.48 3.28 3.28 0 003.17 3.48 3.18 3.18 0 003.11-3.48zM145.32 43.94H148v2.37h-2.68zm.11 4h2.49v10.9h-2.49zM150.41 48h2.49v1.66a3.93 3.93 0 013.39-1.89c2.45 0 3.87 1.65 3.87 4.16v6.93h-2.49v-6.19c0-1.69-.84-2.66-2.32-2.66a2.42 2.42 0 00-2.45 2.7v6.13h-2.49zM161.81 53.45a5.39 5.39 0 015.31-5.66c3.46 0 5.2 2.72 5.2 5.84v.7h-8a3 3 0 003.13 2.76 4 4 0 002.94-1.29l1.46 1.29a5.48 5.48 0 01-4.44 2 5.43 5.43 0 01-5.6-5.64zm8.05-.8c-.17-1.61-1.12-2.86-2.76-2.86a2.93 2.93 0 00-2.82 2.86zM174.59 55.84v-5.72h-1.38V48h1.38v-3h2.49v3H180v2.14h-2.92v5.33a1.18 1.18 0 001.34 1.35 3.3 3.3 0 001.54-.37v2a4.32 4.32 0 01-2.24.56c-1.84-.01-3.13-.79-3.13-3.17zM15.05 45.65L6.4 35.49H2.73v15.9h3.58V41.25l8.62 10.14h3.69v-15.9h-3.57zm34.29-10.16L47 45.67l-2.52-10.18h-3.42l-2.53 10.06-2.3-10.06H32.5l4.13 15.9h3.68l2.43-10.06 2.47 10.06h3.61v-.14L53 35.49zM2.35 56.27a2.51 2.51 0 012.54-2.55 2.68 2.68 0 011.9.67l-.55.61a2 2 0 00-1.38-.53 1.67 1.67 0 00-1.6 1.74A1.64 1.64 0 004.94 58a2 2 0 001.18-.37v-.92H4.86V56H7v2a3.1 3.1 0 01-2 .77 2.45 2.45 0 01-2.56-2.53M7.48 56.27a2.52 2.52 0 012.58-2.55 2.49 2.49 0 012.57 2.53 2.52 2.52 0 01-2.58 2.54 2.5 2.5 0 01-2.57-2.53m4.24 0a1.69 1.69 0 00-1.67-1.76 1.66 1.66 0 00-1.66 1.74A1.69 1.69 0 0010.06 58a1.66 1.66 0 001.66-1.74M12.57 53.79h.96l1.48 3.79 1.47-3.79h.94l-2.05 4.96h-.75l-2.05-4.96zM18 53.79h3.66v.78h-2.79v1.28h2.47v.77h-2.47v1.32h2.82v.78H18v-4.93zM22.53 53.79h2.19a2 2 0 011.42.5 1.47 1.47 0 01.41 1.06 1.47 1.47 0 01-1.17 1.49l1.33 1.87h-1L24.48 57h-1.09v1.72h-.86zm2.13 2.44c.62 0 1-.32 1-.82 0-.53-.38-.82-1-.82h-1.27v1.65zM27.32 53.79h.79l2.64 3.41v-3.41h.85v4.93h-.72l-2.72-3.51v3.51h-.84v-4.93zM32.48 53.79h.92l1.5 2.33 1.5-2.33h.92v4.93h-.86v-3.53l-1.56 2.32h-.03l-1.54-2.31v3.52h-.85v-4.93zM38.15 53.79h3.65v.78h-2.79v1.28h2.47v.77h-2.47v1.32h2.82v.78h-3.68v-4.93zM42.68 53.79h.8l2.64 3.41v-3.41h.85v4.93h-.72l-2.72-3.51v3.51h-.85v-4.93zM49.22 54.6h-1.56v-.81h3.99v.81h-1.56v4.12h-.87V54.6zM19.61 49.18l2.1-2.52a7.41 7.41 0 004.82 2c1.46 0 2.33-.57 2.33-1.52v-.05c0-.9-.55-1.36-3.25-2-3.26-.83-5.36-1.73-5.36-4.94V40c0-2.93 2.36-4.87 5.66-4.87a9.34 9.34 0 016 2.06l-1.84 2.67a7.65 7.65 0 00-4.21-1.59c-1.36 0-2.07.62-2.07 1.41v.05c0 1.06.69 1.4 3.48 2.12 3.28.85 5.13 2 5.13 4.85 0 3.21-2.45 5-5.94 5a10.28 10.28 0 01-6.85-2.52z"/><path class="dcls-2" d="M55.77 24.37a2.05 2.05 0 00-.9-1.49 39.88 39.88 0 00-4.66-3c.22-.28.32-.44.52-.73a14.67 14.67 0 002.41-4.64 4.09 4.09 0 00.14-1.84 1.81 1.81 0 00-1.28-1.1 32.31 32.31 0 00-5.9 0A26.51 26.51 0 0045.63 6c-.12-.48-.33-1.23-.86-1.45A3.66 3.66 0 0042 5c-1.12.52-2 .93-3.15 1.55-.55-1.95-1.13-3.78-1.34-4.25s-.36-.95-1-1.08a1.71 1.71 0 00-1.36.34c-.57.35-3.06 2.12-3.89 2.81-.58-.91-.93-1.57-1.46-2.37A11.92 11.92 0 0028.67.36a1 1 0 00-1.56 0A10.59 10.59 0 0026 2c-.54.84-.88 1.5-1.44 2.43-.83-.69-3.32-2.45-3.9-2.8a1.63 1.63 0 00-1.35-.34c-.65.12-.87.74-1 1.08s-.78 2.29-1.33 4.24c-1.2-.62-2-1-3.16-1.55A3.68 3.68 0 0011 4.5c-.53.22-.74 1-.86 1.46a25.23 25.23 0 00-.5 5.59 32.28 32.28 0 00-5.91 0 1.8 1.8 0 00-1.23 1.11 3.94 3.94 0 00.14 1.84A14.34 14.34 0 005 19.14c.21.3.3.45.52.73a42.57 42.57 0 00-4.66 3 2.08 2.08 0 00-.86 1.5 1.43 1.43 0 00.33 1c.54.76 3.54 3.65 10.26 4.68a1.85 1.85 0 00-.75 2.3A2.32 2.32 0 0011 33.43a7.62 7.62 0 003.47.74 23.15 23.15 0 004.83-.62 30.17 30.17 0 014.56-1 21.44 21.44 0 012.66 0c.32 0 .72.07 1.43.07s1.09 0 1.4-.07a21.63 21.63 0 012.67 0 31.7 31.7 0 014.56 1 22.41 22.41 0 004.82.62 7.58 7.58 0 003.47-.73 2.35 2.35 0 001.12-1.07 1.87 1.87 0 00-.75-2.31c6.72-1 9.72-3.91 10.26-4.67a1.42 1.42 0 00.27-1.02z"/><path class="dcls-3" d="M38.17 10a42.71 42.71 0 01.83 8.09 24.7 24.7 0 01-1 7.37A9.13 9.13 0 0134.85 30c2.88-.09 5.45-1.88 7.28-5.05 2.37-4.16 2.88-9.38 3-13.2.08-4.35-.24-5.37-.37-5.79s-.3-.59-.68-.59c-.73 0-3.82 1.4-6.71 3.46a1.66 1.66 0 01.8 1.17z"/><path class="dcls-3" d="M30.31 30.54a7.7 7.7 0 006.62-5.43 24.33 24.33 0 001-7 34.49 34.49 0 00-.69-7.55c0-.27-.16-.7-.5-.77s-.64.29-.85.46-5.23 4.56-7.41 10A12.86 12.86 0 0027.3 26a5.86 5.86 0 00.7 3.42 2.68 2.68 0 002.31 1.12zM37.89 7c-.56-2.59-1.1-4.36-1.11-4.37-.12-.32-.29-.56-.53-.6a.86.86 0 00-.73.23c-.35.26-2.85 2.23-3.67 2.91a37.15 37.15 0 012.06 5A48.2 48.2 0 0137.89 7zM52.36 13.54a1.43 1.43 0 00-.12-.8c-.16-.23-.37-.34-.87-.4a49.32 49.32 0 00-5.24.27 37.39 37.39 0 01-.44 5.06 38.29 38.29 0 013.63 1.57c2.48-3.13 2.99-5.13 3.04-5.7zM54.66 24.39c0-.42-.21-.75-.89-1.2a41.29 41.29 0 00-8.29-4.37 22.14 22.14 0 01-2.36 6.65A12 12 0 0139 29.86c4.85-.33 8.93-1.08 11.87-2.5 3.36-1.62 3.81-2.43 3.79-2.97zM43.94 30.64a22.31 22.31 0 00-2.78.38 13.91 13.91 0 01-2.91.21h-3.9a19 19 0 00-5 .52c-.09 0-.2 0-.18.15s.13.08.26.09 1.34-.09 1.93-.09a18.66 18.66 0 015 .73 16.12 16.12 0 004.35.66c1.84 0 3.44-.24 4-.9a1.17 1.17 0 00.3-1c-.01-.54-.35-.76-1.07-.75zM13.65 24.9c1.82 3.17 4.4 5 7.27 5.05a9.12 9.12 0 01-3.16-4.49 24.36 24.36 0 01-1-7.37A42.71 42.71 0 0117.6 10a1.68 1.68 0 01.84-1.18c-2.92-2.17-6-3.44-6.71-3.46-.37 0-.55.16-.67.59s-.46 1.44-.37 5.79c.07 3.78.58 9 2.96 13.16z"/><path class="dcls-3" d="M19.93 10.23c-.2-.17-.52-.53-.84-.46s-.45.5-.51.77a35.53 35.53 0 00-.68 7.55 24.73 24.73 0 00.94 7 7.65 7.65 0 006.67 5.41 3.4 3.4 0 001.15-.21 2.89 2.89 0 00.51-.28 4.49 4.49 0 01-.41-.69 7.22 7.22 0 01-.61-3.1 15.86 15.86 0 011.22-6.15c-2.19-5.42-7.24-9.67-7.44-9.84zM27.89 18.46a27.16 27.16 0 015.18-7.09A44.29 44.29 0 0028.3 1.18c-.13-.19-.23-.31-.42-.31s-.28.12-.41.31a44.71 44.71 0 00-4.77 10.19 27.17 27.17 0 015.19 7.09zM23.93 5.21c-.82-.68-3.32-2.65-3.68-2.91a.83.83 0 00-.72-.23c-.25 0-.42.28-.54.6 0 0-.54 1.78-1.1 4.37a47.78 47.78 0 014 3.19 38.57 38.57 0 012.04-5.02zM6.45 19.24a39.59 39.59 0 013.64-1.57 35.79 35.79 0 01-.45-5.06 49.26 49.26 0 00-5.23-.27c-.51.06-.71.17-.87.4a1.35 1.35 0 00-.12.8c.05.57.58 2.57 3.03 5.7zM12.66 25.47a21.87 21.87 0 01-2.36-6.65A41.45 41.45 0 002 23.19c-.67.45-.86.78-.88 1.2s.42 1.35 3.78 3c2.93 1.42 7 2.17 11.87 2.5a11.89 11.89 0 01-4.11-4.42zM26.38 31.69a19 19 0 00-5-.52H17.49a14.05 14.05 0 01-2.88-.17 22.2 22.2 0 00-2.77-.38c-.73 0-1.07.21-1.2.68a1.14 1.14 0 00.29 1c.6.66 2.2.9 4.05.9a16.24 16.24 0 004.35-.66 18.64 18.64 0 015-.73c.6 0 1.8.09 1.93.09s.26 0 .27-.09-.06-.09-.15-.12z"/></svg><svg viewBox="0 0 40 32" id="email" xmlns="http://www.w3.org/2000/svg"><path d="M36 0H4C1.8 0 .02 1.8.02 4L0 28c0 2.2 1.8 4 4 4h32c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zm0 8L20 18 4 8V4l16 10L36 4v4z"/></svg><svg viewBox="0 0 32 32" id="facebook" xmlns="http://www.w3.org/2000/svg"><path fill="#1578f2" d="M32 16.098C32 7.207 24.837 0 16 0S0 7.207 0 16.098C0 24.133 5.851 30.793 13.5 32V20.751H9.437v-4.653H13.5v-3.547c0-4.035 2.389-6.263 6.043-6.263 1.751 0 3.582.314 3.582.314v3.962h-2.018c-1.988 0-2.607 1.241-2.607 2.514v3.02h4.438l-.709 4.653h-3.728V32c7.649-1.208 13.5-7.867 13.5-15.902z"/></svg><svg viewBox="0 0 32 32" id="linkedin" xmlns="http://www.w3.org/2000/svg"><path fill="#0966c2" d="M27.263 27.269h-4.739v-7.425c0-1.771-.036-4.049-2.469-4.049-2.471 0-2.848 1.927-2.848 3.919v7.556h-4.739V12.001h4.552v2.081h.061c.636-1.2 2.183-2.467 4.493-2.467 4.801 0 5.689 3.16 5.689 7.273v8.381h-.001zM7.116 9.911a2.75 2.75 0 01-2.751-2.753 2.752 2.752 0 112.751 2.753zm2.376 17.358H4.74V12h4.752v15.269zM29.633 0H2.361C1.056 0 0 1.032 0 2.305v27.389c0 1.275 1.056 2.305 2.361 2.305h27.268c1.304 0 2.371-1.031 2.371-2.305V2.305C32 1.032 30.933 0 29.629 0h.004z"/></svg><svg viewBox="0 0 32 32" id="menu" xmlns="http://www.w3.org/2000/svg"><path d="M0 26.667h32v-3.556H0v3.556zm0-8.889h32v-3.556H0v3.556zM0 5.333v3.556h32V5.333H0z"/></svg><svg viewBox="0 0 32 32" id="search" xmlns="http://www.w3.org/2000/svg"><path d="M21.001 23.304a12.927 12.927 0 01-7.985 2.737C5.828 26.041 0 20.213 0 13.025S5.828.009 13.016.009s13.016 5.828 13.016 13.016c0 3.023-1.03 5.804-2.758 8.013l.022-.029L32 29.68l-2.311 2.311-8.671-8.688-.017.001zm-7.972-.521c5.392 0 9.762-4.37 9.762-9.762s-4.37-9.762-9.762-9.762-9.762 4.37-9.762 9.762 4.37 9.762 9.762 9.762z"/></svg><svg viewBox="0 0 32 32" id="status-error" xmlns="http://www.w3.org/2000/svg"><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm7.837 21.6l-2.238 2.238-5.6-5.6-5.6 5.6L8.161 21.6l5.6-5.6-5.6-5.6 2.238-2.237 5.6 5.6 5.6-5.6 2.238 2.238-5.6 5.6 5.6 5.6z"/></svg><svg viewBox="0 0 32 32" id="status-info" xmlns="http://www.w3.org/2000/svg"><path d="M16 32A16.003 16.003 0 0027.314 4.686a16.003 16.003 0 00-22.628 0 16.003 16.003 0 000 22.628C7.687 30.314 11.756 32 16 32zm0-25a2 2 0 110 4.001A2 2 0 0116 7zm-2 7h4v11h-4V14z"/></svg><svg viewBox="0 0 32 32" id="status-success" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm6.184 9.6l-8.53 8.528-3.942-3.607-2.245 2.452 6.289 5.754 10.778-10.778-2.35-2.35z"/></svg><svg viewBox="0 0 32 32" id="status-warning" xmlns="http://www.w3.org/2000/svg"><path d="M16 0A16.003 16.003 0 004.686 27.314a16.003 16.003 0 0022.628 0 16.003 16.003 0 000-22.628C24.313 1.686 20.244 0 16 0zm0 25a2 2 0 110-4.001A2 2 0 0116 25zm2-7h-4V7h4v11z"/></svg><svg viewBox="0 0 32 32" id="tick" xmlns="http://www.w3.org/2000/svg"><path d="M29.362 3.742L10.495 22.946l-7.857-7.997L0 17.634l9.175 9.34 1.319 1.284 1.318-1.284L31.999 6.427z"/></svg><svg viewBox="0 0 37 32" id="twitter" xmlns="http://www.w3.org/2000/svg"><path fill="#059ff5" d="M33.474 8c.049.205.073.538.073 1 0 3.692-.851 7.256-2.552 10.692-1.75 3.641-4.205 6.538-7.365 8.692-3.451 2.41-7.413 3.615-11.885 3.615-4.278 0-8.191-1.205-11.74-3.615.535.051 1.142.077 1.823.077 3.549 0 6.733-1.154 9.552-3.462-1.701 0-3.196-.526-4.484-1.577S4.721 21.05 4.235 19.46c.486.051.948.077 1.385.077.681 0 1.361-.077 2.042-.231-1.75-.41-3.208-1.359-4.375-2.846s-1.75-3.18-1.75-5.077v-.154a6.93 6.93 0 003.427 1.077c-1.021-.769-1.847-1.744-2.479-2.923s-.948-2.474-.948-3.885c0-1.41.365-2.756 1.094-4.038 1.896 2.513 4.217 4.513 6.964 6s5.675 2.308 8.786 2.462a11.838 11.838 0 01-.146-1.846c0-1.436.34-2.782 1.021-4.038s1.604-2.244 2.771-2.962a7.104 7.104 0 013.792-1.077c1.118 0 2.151.231 3.099.692s1.786 1.077 2.516 1.846c1.75-.359 3.378-1 4.885-1.923-.583 1.897-1.701 3.385-3.354 4.462 1.458-.205 2.917-.641 4.375-1.308a17.376 17.376 0 01-3.865 4.231z"/></svg></defs></svg>
  <nav class="nsw-skipto nsw-container" aria-label="Skip to links">
  <a class="nsw-skipto__link" href="#nav"><span>Skip to navigation</span></a>
  <a class="nsw-skipto__link" href="#content"><span>Skip to content</span></a>
</nav>
<div class="nsw-infobar">
  <div class="nsw-container">
    <p>A NSW Government website</p>
  </div>
</div>
<header class="nsw-header">
  <div class="nsw-header__container">
    <div class="nsw-header__wrapper">
      <div class="nsw-header__center">
        <a href="#" class="nsw-header__logo-link">
          <svg class="nsw-icon nsw-header__logo" focusable="false" aria-hidden="true">
            <use xlink:href="#dpc-logo"></use>
          </svg>
          <span class="sr-only">NSW Department of Premier and Cabinet</span>
        </a>
      </div>
      <div class="nsw-header__left">
        <button type="button" class="nsw-header-btn nsw-header-btn--menu js-open-navigation" aria-expanded="false"
          aria-controls="main-navigation">
          <svg class="nsw-icon nsw-header-btn__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#menu"></use>
            <span class="nsw-header-btn__sub"><span class="sr-only">Open</span> Menu</span>
          </svg>
        </button>
      </div>
      <div class="nsw-header__right">
        <button type="button" class="nsw-header-btn nsw-header-btn--search js-open-search" aria-expanded="false"
          aria-controls="header-search">
          <svg class="nsw-icon nsw-header-btn__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
          <span class="nsw-header-btn__sub"><span class="sr-only">Show</span> Search</span>
        </button>
      </div>
    </div>
    <div class="nsw-search">
      <div id="header-search" class="nsw-search__area js-search-area" hidden>
        <form role="search">
          <label for="nsw-search__input" class="sr-only">Search site for:</label>
          <input autocomplete="off" class="nsw-search__input js-search-input" id="nsw-search__input"
            name="input-autocomplete" type="text">
          <svg class="nsw-icon nsw-search__search-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
        </form>
        <button class="nsw-search__close-btn js-close-search" aria-expanded="true" aria-controls="header-search">
          <svg class="nsw-icon nsw-search__close-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#close"></use>
          </svg>
          <span class="sr-only">Close search</span>
        </button>
      </div>
    </div>
  </div>
</header>
<nav id="main-navigation" class="nsw-navigation " aria-label="Main menu">
  <div class="nsw-navigation__header">
    <h2 id="nsw-navigation">Menu</h2>
    <button type="button" class="nsw-navigation__close js-close-navigation" aria-expanded="true">
      <svg class="nsw-icon icon" focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <span class="sr-only">Close Menu</span>
    </button>
  </div>
  <ul class="nsw-navigation__list">
      <li class="nsw-navigation__list-item">
        <a href="http://google.com" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">About DPC</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Updates</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Publications</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Tools &amp; Resources</span>
        </a>
      </li>
      <li class="nsw-navigation__list-item">
        <a href="#" class="nsw-navigation__link">
          <span class="nsw-navigation__link-text">Contact us</span>
        </a>
      </li>
  </ul>
</nav>

<!-- content start -->

<!-- content end -->

<footer class="nsw-footer">
  <div class="nsw-footer__upper">
    <div class="nsw-container section-links">
        <div class="section-links__group">
          <h3 class="section-links__heading"><a href="#">Section Link</a></h3>
          <ul class="section-links__list">
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
          </ul>
        </div>
        <div class="section-links__group">
          <h3 class="section-links__heading"><a href="#">Section Link</a></h3>
          <ul class="section-links__list">
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
          </ul>
        </div>
        <div class="section-links__group">
          <h3 class="section-links__heading"><a href="#">Section Link</a></h3>
          <ul class="section-links__list">
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
          </ul>
        </div>
        <div class="section-links__group">
          <h3 class="section-links__heading"><a href="#">Section Link</a></h3>
          <ul class="section-links__list">
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
              <li class="section-links__item"><a href="#">Highlight link</a></li>
          </ul>
        </div>
    </div>
  </div>
  <div class="nsw-footer__lower">
    <div class="nsw-container">
      <p>We pay respect to the Traditional Custodians and First Peoples of NSW, and acknowledge their continued connection to their country and culture.</p>
      <hr>
      <ul class="nsw-footer-links">
          <li class="nsw-footer-links__item">
            <a href="#" class="nsw-footer-links__link">Tertiary</a>
          </li>
          <li class="nsw-footer-links__item">
            <a href="#" class="nsw-footer-links__link">Tertiary</a>
          </li>
          <li class="nsw-footer-links__item">
            <a href="#" class="nsw-footer-links__link">Tertiary</a>
          </li>
          <li class="nsw-footer-links__item">
            <a href="#" class="nsw-footer-links__link">Tertiary</a>
          </li>
      </ul>
      <div class="nsw-footer__info">
        <p class="nsw-footer__copyright">Copyright © 2019</p>
        <p class="nsw-footer__built">Built by <a href="https://www.digital.nsw.gov.au/digital-design-system" target="_blank" rel="noopener noreferrer">NSW Design System</a></p>
      </div>
    </div>
  </div>
</footer>

  <script src="../../js/main.js"></script>
  <script>window.NSW.initSite()</script>
</body>
</html>

You can now start to add some Design System patterns in between

<!-- content start -->

<!-- content end -->

.  For example, below adding the hero banner would look like this 

<!-- content start -->

<div class="nsw-hero-banner ">
  <div class="nsw-container">
    <div class="nsw-hero-banner__image-area">
      <img src="https://picsum.photos/id/421/2000/1250" class="nsw-hero-banner__image" alt="">
    </div>
    <div class="nsw-hero-banner__content-area">
      <div class="nsw-hero-banner__content">
        <h2 class="nsw-hero-banner__title">
          <a href="#" class="nsw-hero-banner__link">Buy Regional this Christmas</a>
        </h2>
        <p>NSW is facing one of the worst droughts on record. One of the best ways you can support regional communities in NSW is to Buy Regional this Christmas.</p>
        <svg class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          <use xlink:href="#arrow"></use>
        </svg>
      </div>
    </div>
  </div>
</div>
<div class="nsw-container">
  <nav aria-label="Breadcrumb" class="nsw-breadcrumb">
    <ol class="nsw-breadcrumb__list">
        <li class="nsw-breadcrumb__item">
          <a href="#" class="nsw-breadcrumb__link " >Home</a>
        </li>
        <li class="nsw-breadcrumb__item">
          <a href="#" class="nsw-breadcrumb__link " >News and Events</a>
        </li>
        <li class="nsw-breadcrumb__item">
          <a href="#" class="nsw-breadcrumb__link " >News</a>
        </li>
        <li class="nsw-breadcrumb__item">
          <a href="#" class="nsw-breadcrumb__link nsw-breadcrumb--current" aria-current="page">Download the Digital Driver Licence to your phone</a>
        </li>
    </ol>
  </nav>
</div>

<!-- content end -->

View the HTML code snippets for all patterns.

Last updated