Design system page
Inception alert! The design system page layout is used in this very design system.
View the code for this example
{% 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 %}