Layout

Once your site is set up using the website import tool, you can start building your pages using the provided layouts in your Dynamics 365 environment. These layouts ensure consistency, accessibility, and compliance with GOV.UK and DfE design standards.

This page will explain how to use the available layout templates, when to choose each, and how to extend them in your page templates with practical examples.

Available Layouts

The imported website template provides two main layouts for structuring your pages:

  • DfE/Layouts/2ColumnWideLeft: A two-column layout with a wide left column (two-thirds width) for main content and a narrower right column (one-third width) for additional content, such as sidebars or related links. This is the most commonly used layout across compliant portals.
  • DfE/Layouts/1Column: A single-column layout with full-width content, ideal for pages that don't require a sidebar, such as landing pages.

Both layouts include reusable web templates for common elements like phase banners, breadcrumbs, and page headings, making it easy to maintain a consistent structure across your site.

Included Web Templates

Each layout includes the following web templates, which can be customised or overridden as needed:

  • Phase Banner: Displays a banner indicating the service's development stage. By default, it uses {% include 'DfE/Content/PhaseBanner/Beta' %} for Beta services. You can switch to {% include 'DfE/Content/PhaseBanner/Alpha' %} for Alpha services. For services hosted on a service.gov.uk domain, a phase banner is mandatory until the service passes a live assessment.
  • Breadcrumbs: Uses {% include 'DfE/Content/Breadcrumbs' %} to pull through default breadcrumbs based on the parent-child page structure (see GOV.UK breadcrumbs documentation). This is wrapped in a {% block breadcrumbs %} so it can be overridden in the page template, such as replacing it with a back link for end-to-end service journeys.
  • Page Heading: Uses {% include 'DfE/Content/PageHeading' %} to pull through the header from the Content WebPage record (automatically created as a child of the webpage). This is wrapped in a {% block title %} and can be overridden, especially for single-question pages where the heading becomes part of the form component's label or legend.

The {% block main %} in both layouts includes default Dynamics 365 content for forms, lists, and multi-step forms (e.g., {% if page.adx_entityform %}), but these are typically overridden in actual pages with custom content.

Choosing the right layout

Select the layout based on your page's content and design requirements:

  • Use DfE/Layouts/2ColumnWideLeft by default or when your page needs a sidebar or additional content alongside the main content. We should always build for smaller screens first then expand the layout if required. This layout is also ideal for pages with supporting information or related links in the right column.
  • Use DfE/Layouts/1Column for pages that require a full-width layout, such as landing pages, content-heavy pages, or forms without additional sidebar content.

Both layouts follow the GOV.UK grid system (GOV.UK layout guidelines), ensuring responsive design and accessibility.

Examples of extending layouts

To use a layout in your page template, extend the chosen layout and override the necessary blocks. Below are examples of how to extend both layouts.

Example 1: Extending DfE/Layouts/2ColumnWideLeft

Here's a standard example of extending the DfE/Layouts/2ColumnWideLeft layout:



{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  <div class="govuk-form-group">
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="schema-name">
        {{ page.title }} 
      </label>
    </h1>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>
{% endblock %}

{% block rightColumn %}
  <h2 class="govuk-heading-m">Related Links</h2>
  <ul class="govuk-list govuk-list--bullet">
    <li><a href="#" class="govuk-link">Guidance</a></li>
    <li><a href="#" class="govuk-link">Contact us</a></li>
  </ul>
{% endblock %}

Explanation:

  • {% extends 'DfE/Layouts/2ColumnWideLeft' %}: Specifies the layout to use.
  • {% block title %}: Overrides the default page heading with an empty block, used for one-question pages where the heading is part of the form.
  • {% block main %}: Contains the main content (a heading, paragraph, and form components).
  • The {% if user %} condition checks for authentication and redirects unauthenticated users to an access denied page. Remove this condition if authentication isn't required.
  • {{ page.title }} includes the page title from the content web page. In this case, the question being asked. See setting page titles for more information.
  • {% block rightColumn %}: Adds content to the right sidebar, such as related links. If you do not require side content you can remove this block entirely.

Example 2: Extending DfE/Layouts/1Column

Here's an example of extending the DfE/Layouts/1Column for a simple landing page:



{% extends 'DfE/Layouts/1Column' %}

{% block main %}
  <p class="govuk-body">Welcome to our service. This page uses a full-width layout for maximum readability.</p>
  <button class="govuk-button" id="submit-btn" data-module="govuk-button">Get Started</button>
{% endblock %}

Explanation:

  • {% extends 'DfE/Layouts/1Column' %}: Specifies the single-column layout.
  • {% block main %}: Includes the main content (a paragraph and button). No user check is included here, as it's optional.
  • The absence of the {% block title %} here means we are allowing the page to inherit the page title from the content web page.

Compliance with GOV.UK standards

If your service is hosted on a service.gov.uk domain, you must include a phase banner (Alpha or Beta) until it passes a live assessment. This is a requirement for compliance with GOV.UK standards. The layouts provided in your CRM already include the Beta phase banner by default, which you can switch to Alpha as needed.

Ensure your pages follow the GOV.UK layout guidelines, using the grid system and components provided by the layouts for a responsive and accessible design.

Additional notes

  • User check: The {% if user %} condition in the example template checks if the user is authenticated and redirects unauthenticated users to an access denied page. If your page doesn't require authentication, remove this condition and include your content directly in the {% block main %}.
  • Overriding the main block: Always override the {% block main %} to include your custom HTML, content and components, as the default Dynamics 365 content (e.g., entity forms, lists) is typically not used.