Skip to main content
Sitemap

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.