A wagtail implementation of the NHS frontend v2.1.0 standard components.
Install the pypi package
pip install wagtail-nhsuk-frontend
Add to your INSTALLED_APPS in wagtail settings
INSTALLED_APPS = [
...
'wagtailnhsukfrontend',
...
]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 + [
StreamFieldPanel('body'),
]Use templatetags
{% load nhsukfrontend_tags %}
<html>
...
<body>
{% breadcrumb %}
</body>
</html>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-2.1.0.min.js' %}" defer></script>See the contributing documentation to run the application locally and contribute changes.
See more documentation
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent