Skip to main content

NHSUK Frontend Styles for Wagtail

Project description

Wagtail NHS.UK frontend

A wagtail implementation of the NHS frontend v3.0.4 standard components.


Install the pypi package

pip install wagtail-nhsuk-frontend

Add to your INSTALLED_APPS in wagtail settings




Use blocks in your streamfields

from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
from wagtail.core.models import Page
from wagtail.core.fields import StreamField

from wagtailnhsukfrontend.blocks import ActionLinkBlock, WarningCalloutBlock

class HomePage(Page):
  body = StreamField([
      # Include any of the blocks you want to use.
      ('action_link', ActionLinkBlock()),
      ('callout', WarningCalloutBlock()),

  content_panels = Page.content_panels + [

Use templatetags

{% load nhsukfrontend_tags %}

  {% breadcrumb %}

Use template includes

{% include 'wagtailnhsukfrontend/header.html' with show_search=True %}

See the component documentation for a list of components you can use.

Include the CSS in your base template

  <link rel="stylesheet" type="text/css" href="{% static 'wagtailnhsukfrontend/css/wagtail-nhsuk-frontend.min.css' %}">

Include the Javascript in your base template

  <script type="text/javascript" src="{% static 'wagtailnhsukfrontend/js/nhsuk-3.0.4.min.js' %}" defer></script>


See the contributing documentation to run the application locally and contribute changes.

Further reading

See more documentation

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for wagtail-nhsuk-frontend, version 0.4.4
Filename, size File type Python version Upload date Hashes
Filename, size wagtail-nhsuk-frontend-0.4.4.tar.gz (71.0 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page