Design system page

{% extends 'layouts/_wrapper.njk' %}
{% from 'includes/title.njk' import title as pagetitle %}
{% from 'includes/breadcrumbs.njk' import breadcrumbs as breadcrumbs %}
{% from 'includes/subNavigation.njk' import subNavigation as subNavigation %}

{% block content %}
<div class="grid">
  <div class="grid-column--x4">
    {{ subNavigation({
      id: 'example-kanga-navigation',
      title: 'Kanga Navigation',
      items: collections.kanga
    }) }}
  </div>
  <div class="grid-column--x8">
    {{ breadcrumbs({
      classes: 'space--margin-bottom-s',
      items: [{
        title: 'Kanga',
        url: '/kanga'
      }, {
        title: 'Components'
      }]
    }) }}
    {{ pagetitle({
      classes: 'space--margin-bottom-l',
      text: title,
      caption: caption if caption
    }) if title }}
    {% if isShortcode %}
    <div class="callout prose space--margin-bottom-m">
      <p>{{ title }} is an <a href="https://www.11ty.dev/docs/shortcodes/">Eleventy shortcode</a>. It does not require a Nunjucks <code>import</code> statement.</p>
    </div>
    {% endif %}
    <div class="prose prose--flow">
      {{ content | safe }}
    </div>
  </div>
</div>
{% endblock %}