Layouts
Choose a layout to match the content you want to write.
The NHS.UK Eleventy Plugin provides different layouts you can choose from, which you can use on different parts of your site:
-
Collection – Layout for a paginated list of pages or posts.
-
Hub – Layout for a curated list of pages or posts, optionally grouped by section.
-
Page – Simple layout designed for maximum flexibility of content.
-
Page with sub navigation – Layout with sub navigation.
-
Post – Layout for date-based content, such as blog posts or news items.
-
Product page – Layout for product and marketing pages.
The plugin also provides the following layouts used by features. It’s unlikely you will need to use these for content pages:
Overriding layouts
Layouts provided by this plugin can be overridden, or used as a basis for your own, by using Nunjuck’s template inheritance feature.
For example, to show a message at the top of each page that uses the page layout, add a file named _includes/page.njk
with the following content:
{# Extend a plugin layout #}
{% extends "layouts/page.njk" %}
{# Load any NHS.UK frontend components #}
{% from "nhsuk/components/inset-text/macro.njk" import insetText %}
{# Override the `content` block #}
{% block content %}
{{ appDocumentHeader({
title: title,
description: description
}) }}
{% if reviewed and reviewAgain %}
{% call insetText() %}
<p class="nhsuk-body">
{# Use front matter data and call plugin filters #}
This page was last reviewed on {{ reviewed | nhsukDate }}.<br>
It needs to be reviewed again on {{ reviewAgain | nhsukDate }}.
</p>
{% endcall %}
{% endif %}
{{ appProseScope(content) if content }}
{% endblock %}
You can extend the following layouts:
layouts/base.njk
layouts/collection.njk
layouts/error.njk
layouts/feed.njk
layouts/hub.njk
layouts/page.njk
layouts/post.njk
layouts/product.njk
layouts/sitemap.njk
layouts/sub-navigation.njk
layouts/tag.njk
layouts/tags.njk
Replacement layouts must share the same name and saved in your configured layout directory.
Learn more about layouts on the Eleventy website.