diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
deleted file mode 100644
index 954bebe..0000000
--- a/docs/_components/example/_example.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.app-example__frame {
- background: govuk-colour("white");
- border: 0;
- border-right: 1px solid $govuk-border-colour;
- display: block;
- max-width: calc(100% - govuk-spacing(4) * 2);
- padding: govuk-spacing(4);
- resize: both;
- width: 100%;
-}
-
-.app-example__new-window {
- @include govuk-font($size: 16);
-}
-
-.app-example__tabs {
- .govuk-tabs__panel[id$="-preview"] {
- background: govuk-colour("light-grey");
- padding: 0;
- }
-
- .x-govuk-code {
- margin: 0;
- }
-}
-
-// stylelint-disable declaration-no-important
-.app-example__toolbar {
- background: $govuk-body-background-colour;
- border-top: 1px solid $govuk-border-colour;
- max-width: initial !important;
- padding: govuk-spacing(2);
-}
diff --git a/docs/_components/example/template.njk b/docs/_components/example/template.njk
deleted file mode 100644
index 7881e64..0000000
--- a/docs/_components/example/template.njk
+++ /dev/null
@@ -1,38 +0,0 @@
-{%- from "govuk/components/tabs/macro.njk" import govukTabs -%}
-
-{%- set examplePath = "/examples/" + params.example -%}
-
-
-
- Contents
-
-
-
-
- {{ getHtmlCode(params.example) }}
-
-
- {{ getNunjucksCode(params.example) }}
-
-
\ No newline at end of file
diff --git a/docs/_layouts/sub-navigation.njk b/docs/_layouts/sub-navigation.njk
index c693411..169dccc 100644
--- a/docs/_layouts/sub-navigation.njk
+++ b/docs/_layouts/sub-navigation.njk
@@ -3,6 +3,10 @@
{% block scripts %}
+
+
{% endblock %}
diff --git a/docs/assets/application.scss b/docs/assets/application.scss
index ea5026b..c665484 100644
--- a/docs/assets/application.scss
+++ b/docs/assets/application.scss
@@ -1,5 +1,4 @@
@import "govuk-frontend/dist/govuk/base";
-@import "../_components/example/example";
@media screen and (min-width: 800px) {
.app-prose-scope .govuk-table:not([tabindex]) {
diff --git a/docs/autocomplete.md b/docs/autocomplete.md
index 48faadc..9f76ff4 100644
--- a/docs/autocomplete.md
+++ b/docs/autocomplete.md
@@ -4,11 +4,29 @@ order: 3
title: Autocomplete
description: Help users find and select from a number of options.
---
+{% from "example/macro.njk" import xGovukExample %}
-{% from "example/macro.njk" import appExample %}
-
-{{ appExample({
- example: "autocomplete"
+{{ xGovukExample({
+ idPrefix: "autocomplete",
+ previewPath: "/examples/autocomplete",
+ codeSamples: [
+ {
+ label: {
+ text: "HTML"
+ },
+ content: {
+ html: getHtmlCode("autocomplete")
+ }
+ },
+ {
+ label: {
+ text: "Nunjucks"
+ },
+ content: {
+ html: getNunjucksCode("autocomplete")
+ }
+ }
+ ]
}) }}
This component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `