From 2ae005ca7f976da241f010d77738948fcdfc3202 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Tue, 25 Oct 2022 15:18:52 +0200
Subject: [PATCH] refactor: let's use a dl dt/dd here for semantics

---
 source/_patterns/colors/intro.hbs | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/source/_patterns/colors/intro.hbs b/source/_patterns/colors/intro.hbs
index 2c7b9e274..cae650fc0 100644
--- a/source/_patterns/colors/intro.hbs
+++ b/source/_patterns/colors/intro.hbs
@@ -6,15 +6,15 @@
 
     <h2>Color Scheme – Primary (Example)</h2>
     <p>Each defined color has an interactive mode which means that colors for hover and pressed states are defined.</p>
-    <ul>
-        <li><b>Primary</b> – base key color</li>
-        <li><b>Primary Background-Light</b> – background color for current key color. Only used for backrounds.</li>
-        <li><b>Primary Background-Transparent</b> - Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</li>
-        <li><b>On Primary</b> – is applied to content (icons, text, etc.) that sits on top of primary</li>
-        <li><b>On Primary Background</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</li>
-        <li><b>On Primary Background Weak</b> – is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.
-        </li>
-    </ul>
+
+	<dl class="DO-NOT-COPY-THIS-CLASS-example-docs-listing">
+        <dt>Primary</dt><dd>base key color</dd>
+        <dt>Primary Background-Light</dt><dd>background color for current key color. Only used for backrounds.</dd>
+        <dt>Primary Background-Transparent</dt><dd>Transparent or semi transparent backgrounds for current key color, e.g. used for form field backgrounds.</dd>
+        <dt>On Primary</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary</dd>
+        <dt>On Primary Background</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent).</dd>
+        <dt>On Primary Background Weak</dt><dd>is applied to content (icons, text, etc.) that sits on top of primary background colors (background light or transparent) and is a variant to weaken content on primary backgrounds.</dd>
+    </dl>
 
     <h3>Color Scheme Illustration</h3>
     <figure class="color-scheme-illustration">