diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md
index 3928630c2..832e627b4 100644
--- a/pages/_docs/flags.md
+++ b/pages/_docs/flags.md
@@ -16,11 +16,10 @@ done: true
 ### Flag sizes
 
 Change the flag size. 
-<ul>
-    <li><code>xl</code> - large</li>
-    <li><code>mr</code> - big</li>
-    <li><code>md</code> - medium</li>
-</ul>
+
+- `xl` - large
+- `mr` - big
+- `md` - medium
 
 {% example html %}
 {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md
index 77e5a58b3..5067c3ae5 100644
--- a/pages/_docs/ribbons.md
+++ b/pages/_docs/ribbons.md
@@ -13,13 +13,13 @@ new: true
 ### Ribbon position
 
 You can easily change the position of a ribbon by adding a class to the element.
-<ul>
-    <li><code>ribbon-top</code> - moves it to the top</li>
-    <li><code>ribbon-right</code> - moves it to the right</li>
-    <li><code>ribbon-bottom</code> - moves it to the bottom</li>
-    <li><code>ribbon-left</code> - moves it to the lefg</li>
-</ul>
-You can also use multiple classes at once for example: <code><div class="ribbon ribbon-top ribbon-left"></div></code> moves the ribbon to the top left corner.
+
+    `ribbon-top` - moves it to the top
+    `ribbon-right` - moves it to the right
+    `ribbon-bottom` - moves it to the bottom
+    `ribbon-left` - moves it to the lefg
+
+You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
 
 {% example html columns=1 %}
 {% include cards/ribbon.html top=true left=true %}
@@ -43,10 +43,7 @@ Set your own text in a ribbon.
 
 ### Ribbon style
 
-Change the style of a ribbon. Available styles:
-<ul>
-    <li><code>ribbon-bookmark</code> - creates a indentation on the left</li>
-</ul>
+Change the style of a ribbon. 
 
 {% example html columns=1 %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}