This repository contains a collection of Twig macros that generate HTML code compatible with the GOV.UK Frontend design system.
Refer to the table below to determine which version of GOV.UK Frontend Twig you should use for your targeted version of GOV.UK Frontend:
GOV.UK Frontend Twig Version | GOV.UK Frontend Version |
---|---|
v5.5.0 | v5.5.0 |
v5.4.0 | v5.4.0 |
v5.3.0 | v5.3.0 |
v5.2.0 | v5.2.0 |
v5.1.0 | v5.1.0 |
v5.0.0 | v5.0.0 |
Older versions
GOV.UK Frontend Twig Version | GOV.UK Frontend Version |
---|---|
v4.7.0 | v4.7.0 |
v4.6.0 | v4.6.0 |
v4.5.0 | v4.5.0 |
Note that the versioning of this package will match the major and minor versions of GOV.UK Frontend, but patch versions may differ.
To use GOV.UK Frontend Twig in your project, install it via Composer:
composer require joshualicense/govuk-frontend-twig
In your PHP code, configure the Twig template loader to include the GOV.UK Frontend Twig macros:
use Composer\Autoload\ClassLoader;
use Twig\Loader\FilesystemLoader;
// Optional: get the vendor directory using reflection from any directory.
$reflection = new \ReflectionClass(ClassLoader::class);
$vendorDir = dirname($reflection->getFileName(), 2);
$loader = new FilesystemLoader();
$loader->addPath($vendorDir . '/joshualicense/govuk-frontend-twig/src/templates', 'govuk-frontend-twig');
Here's an example of how to use a GOV.UK Frontend Twig macro in your Twig template:
{% from "@govuk-frontend-twig/components/back-link.html.twig" import govukBackLink %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
Refer to the original GOV.UK Design System Components for more information on available components and macro options.