diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
index 69fcc1f..4da9402 100644
--- a/docs/_components/example/_example.scss
+++ b/docs/_components/example/_example.scss
@@ -15,7 +15,7 @@
 
 .app-example__tabs {
   // stylelint-disable selector-max-id
-  .govuk-tabs__panel#preview {
+  .govuk-tabs__panel[id$="-preview"] {
     background: govuk-colour("light-grey");
     padding: 0;
   }
diff --git a/docs/_components/example/template.njk b/docs/_components/example/template.njk
index 3ee55d8..03438a0 100644
--- a/docs/_components/example/template.njk
+++ b/docs/_components/example/template.njk
@@ -3,11 +3,11 @@
 {%- set nunjucksHtml -%}
 
 ```js
-{{ getNunjucksCode(params.component) }}
+{{ getNunjucksCode(params.example) }}
 ```
 {%- endset -%}
 
-{%- set examplePath = "/examples/" + params.component -%}
+{%- set examplePath = "/examples/" + params.example -%}
 
 {%- set previewHtml -%}
 <iframe class="app-example__frame" data-module="app-example-frame" src="{{ examplePath | url }}"></iframe>
@@ -20,13 +20,13 @@
   classes: "app-example__tabs",
   items: [{
     label: "Preview",
-    id: "preview",
+    id: params.example + "-preview",
     panel: {
       html: previewHtml
     }
   }, {
     label: "Nunjucks",
-    id: "nunjucks",
+    id: params.example + "-nunjucks",
     panel: {
       html: nunjucksHtml
     }
diff --git a/docs/autocomplete.md b/docs/autocomplete.md
index fa7cbfa..4a606c2 100644
--- a/docs/autocomplete.md
+++ b/docs/autocomplete.md
@@ -8,7 +8,7 @@ description: Help users find and select from a number of options.
 {% from "example/macro.njk" import appExample %}
 
 {{ appExample({
-  component: "autocomplete"
+  example: "autocomplete"
 }) }}
 
 This component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element.
diff --git a/docs/masthead.md b/docs/masthead.md
index ed09a89..75df24b 100644
--- a/docs/masthead.md
+++ b/docs/masthead.md
@@ -8,7 +8,7 @@ description: Introduce users to your product or service.
 {% from "example/macro.njk" import appExample %}
 
 {{ appExample({
-  component: "masthead"
+  example: "masthead"
 }) }}
 
 This component, based on the component used on [GOV.UK product pages](https://github.com/alphagov/product-page-example), can be useful if you are prototyping product or marketing pages.
diff --git a/docs/primary-navigation.md b/docs/primary-navigation.md
index f01fac9..b2056d8 100644
--- a/docs/primary-navigation.md
+++ b/docs/primary-navigation.md
@@ -8,7 +8,7 @@ description: Link to the primary sections of your service.
 {% from "example/macro.njk" import appExample %}
 
 {{ appExample({
-  component: "primary-navigation"
+  example: "primary-navigation"
 }) }}
 
 ## Component options
diff --git a/docs/related-navigation.md b/docs/related-navigation.md
index c9fb30b..911f300 100644
--- a/docs/related-navigation.md
+++ b/docs/related-navigation.md
@@ -8,7 +8,7 @@ description: Show related content when prototyping guidance pages.
 {% from "example/macro.njk" import appExample %}
 
 {{ appExample({
-  component: "related-navigation"
+  example: "related-navigation"
 }) }}
 
 This component, [based on one from GOV.UK Publishing components](https://components.publishing.service.gov.uk/component-guide/related_navigation), may be useful if you are prototyping guidance pages that could be published on GOV.UK, or if your service needs to show related navigation.
diff --git a/docs/sub-navigation.md b/docs/sub-navigation.md
index 0b1caab..7005e2c 100644
--- a/docs/sub-navigation.md
+++ b/docs/sub-navigation.md
@@ -8,7 +8,7 @@ description: Link to sibling pages in a multi-page section of your service.
 {% from "example/macro.njk" import appExample %}
 
 {{ appExample({
-  component: "sub-navigation"
+  example: "sub-navigation"
 }) }}
 
 ## Component options