examples-index.html

{% extends "layout.html" %}

{% block page_title %}
  GOV.UK prototype kit
{% endblock %}

{% block content %}

<main id="content" role="main">

  <div class="breadcrumbs">
    <ol>
      <li><a href="/">GOV.UK prototype kit</a></li>
    </ol>
  </div>

  <h1 class="heading-xlarge">Example pages and patterns</h1>

  <p class="text">
    Use these as the basis for your prototypes.
    We recommend making copies of the examples rather than directly editing them.
  </p>

  <div class="grid-row">

    <div class="column-third">
      <h2 class="heading-medium">Page elements</h2>
      <ul class="list list-bullet">
        <li>
          <a href="/examples/elements/grid-layout">
            Grid layout
          </a>
        </li>
        <li>
          <a href="/examples/elements/typography">
            Typography
          </a>
        </li>
        <li>
          <a href="/examples/elements/forms">
            Basic form example
          </a>
        </li>
        <li>
          <a href="/examples/elements/radio-buttons-checkboxes">
            Radio buttons and checkboxes
          </a>
        </li>
        <li>
          <a href="/examples/elements/toggled-content">
            Toggling content
          </a>
        </li>
      </ul>
    </div>

    <div class="column-third">

      <h2 class="heading-medium">Page templates</h2>
      <ul class="list list-bullet">
        <li>
          <a href="/examples/blank-govuk">
            Blank
          </a>
        </li>
        <li>
          <a href="/examples/blank-unbranded">
            Blank (non-GOV.UK)
          </a>
        </li>
        <li>
          <a href="/examples/start-page">
            Start
          </a>
        </li>
        <li>
          <a href="/examples/question-page">
            Question
          </a>
        </li>
        <li>
          <a href="/examples/check-your-answers-page">
            Check your answers
          </a>
        </li>
        <li>
          <a href="/examples/confirmation-page">
            Confirmation
          </a>
        </li>
      </ul>
    </div>

    <div class="column-third">

      <h2 class="heading-medium">Template features</h2>
      <ul class="list list-bullet">
        <li>
          <a href="/examples/template-data">
            Passing data into a template
          </a>
        </li>
        <li>
          <a href="/examples/branching">
            Branching
          </a>
          <p class="font-xsmall">(Showing a different page based on user input)</p>
        </li>
        <li>
          <a href="/examples/logging-data">
            Logging data
          </a>
        </li>
        <li>
          <a href="/examples/template-partial-areas">
            Template partial areas
          </a>
        </li>
      </ul>
    </div>

  </div>

</main>

{% endblock %}

logging-data.html

{% extends "layout.html" %}

{% block page_title %}
  Example - Logging data
{% endblock %}

{% block content %}
<main id="content" role="main">

  {% include "includes/breadcrumb_examples.html" %}

  <div class="grid-row">
    <div class="column-two-thirds">

      <h1 class="heading-xlarge">
        Logging data
      </h1>

      <p>You can send data to the browser console using the "log" filter in your template:</p>

      {{ users | log }}

      <p class="code">
  {% raw %}{{ users | log }}{% endraw %}
      </p>

      <p>
        Open the browser console to see the data in this example. In Chrome, press the <code class="code">cmd + alt + j</code> keys together to open the console.
      </p>

      <p>
        This can be useful when using complex data in your prototype, to check it looks correct.
      </p>

    </div>
  </div>
</main>
{% endblock %}

routes.js

router.get('/examples/logging-data', function (req, res) {

  var users = {
    "Alex": {
      "age": 18,
      "town": "London"
    },
    "Charlie": {
      "age": 65,
      "town": "Edinburgh"
    },
    "Sean": {
      "age": 43,
      "town": "Cardiff"
    }
  }

  res.render('examples/logging-data', {users: users});

});