Update legal-lists.html

en/snippets/legal-lists.html

@@ -237,10 +237,10 @@ <h2>Legal Lists</h2>
  <p>when a client has legally legislated lists that refer to legal documents, we can use these classes that provide specific styling with brackets on either side for english and brackets on one side for french.<p>
      <div class="well">
 <ul>
-    <li>Use "lwr-brack-alpha" for this style - (a)</li>
-    <li>Use "lwr-brack-fwrd-alpha" for this style - a)</li>
-    <li>Use "lwr-brack-rmnmrl" for this style - (ii)</li>
-    <li>Use "upr-brack-alpha" for this style - (A)</li>
+    <li>Use "<span class="bg-info">lwr-brack-alpha</span>" for this style - <span class="bg-success"><em>(a)</em></span></li>
+    <li>Use "<span class="bg-info">lwr-brack-fwrd-alpha</span>" for this style - <span class="bg-success"><em>a)</em></span></li>
+    <li>Use "<span class="bg-info">lwr-brack-rmnmrl</span>" for this style - <span class="bg-success"><em>(ii)</em></span></li>
+    <li>Use "<span class="bg-info">upr-brack-alpha</span>" for this style - <span class="bg-success"><em>(A)</em></span></li>
 </ul>
      </div>
 <h3>Example from Hydrogen Tech Guide below :</h3>