Layouts

Choose a layout to match the content you want to write.

The GOV.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.
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 notification banner at the top of each page that uses the Page layout, add a file named _includes/page.njk with the following content:

{# Plugin layouts can be loaded from "layouts" #}
{% extends "layouts/page.njk" %}

{# Load any GOV.UK Frontend components #}
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}

{# Override the `content` block #}
{% block content %}
  {# Templates can include front matter data #}
  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | govukDate) + ".
    It needs to be reviewed again on " + (reviewAgain | govukDate) + "."
  }) if reviewed and reviewAgain }}

  {{ appDocumentHeader({
    title: title,
    description: description
  }) }}

  {{ appProseScope(content) if content }}
{% endblock %}

You can extend the following layouts:

layouts/base.njk
layouts/collection.njk
layouts/feed.njk
layouts/page.njk
layouts/post.njk
layouts/product.njk
layouts/search-index.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.