diff --git a/src/Controller/StyleguideController.php b/src/Controller/StyleguideController.php
index b950209e1b33ae894847ad3a53949f47370f75bb..f7549db43f7bf5996c97dce37079a80b03c33a3c 100644
--- a/src/Controller/StyleguideController.php
+++ b/src/Controller/StyleguideController.php
@@ -2,6 +2,7 @@
 
 namespace Drupal\styleguide\Controller;
 
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\Extension\ThemeExtensionList;
 use Drupal\Core\Link;
@@ -76,6 +77,7 @@ class StyleguideController extends ControllerBase {
     // Process the elements, by group.
     foreach ($groups as $group => $elements) {
       foreach ($elements as $key => $item) {
+        $id = Html::getUniqueId($key);
         $display = [];
         // Output a standard HTML tag.
         if (isset($item['tag']) && isset($item['content'])) {
@@ -100,13 +102,13 @@ class StyleguideController extends ControllerBase {
         // Add the content.
         $content[] = [
           '#theme' => 'styleguide_item',
-          '#key' => $key,
+          '#key' => $id,
           '#item' => $item,
           '#content' => $display,
         ];
         // Prepare the header link.
         $uri = $this->requestStack->getCurrentRequest()->getUri();
-        $url = Url::fromUri($uri, ['fragment' => $key]);
+        $url = Url::fromUri($uri, ['fragment' => $id]);
         $link = Link::fromTextAndUrl($item['title'], $url);
         $header[$group][] = $link->toRenderable();
       }