diff --git a/elements/rh-code-block/docs/20-guidelines.md b/elements/rh-code-block/docs/20-guidelines.md
index a1f0a66a33..6e31c25e7a 100644
--- a/elements/rh-code-block/docs/20-guidelines.md
+++ b/elements/rh-code-block/docs/20-guidelines.md
@@ -57,24 +57,50 @@ Container spacing and code text size reduces as breakpoints get smaller.
## Best practices
-### Different font
-
-Do not use a different font than `--rh-font-family-code`.
-
-
-
-
-
-### Different styling
-
-Do not change any of the code block styling.
-
-
-
-
+### Font family
+
+
+
+
+
+
+
Use --rh-font-family-code.
+
+
+
+
+
+
+
+
Do not use a different font family token thanĀ --rh-font-family-code.
+
+
+### Customizing
+
+
+
+
+
+
+
Use the available options for customizing code block. (Adjusting syntax highlighting is ok.)
+
+
+
+
+
+
+
+
Do not change the code block styling, especially if it will look like other text containers on the same page.
+
diff --git a/elements/rh-code-block/docs/code-block-best-practice-1.png b/elements/rh-code-block/docs/code-block-best-practice-1.png
deleted file mode 100755
index 1e6a1784de..0000000000
Binary files a/elements/rh-code-block/docs/code-block-best-practice-1.png and /dev/null differ
diff --git a/elements/rh-code-block/docs/code-block-best-practice-2.png b/elements/rh-code-block/docs/code-block-best-practice-2.png
deleted file mode 100755
index be7159d25c..0000000000
Binary files a/elements/rh-code-block/docs/code-block-best-practice-2.png and /dev/null differ
diff --git a/elements/rh-code-block/docs/code-block-best-practices-customizing-do.svg b/elements/rh-code-block/docs/code-block-best-practices-customizing-do.svg
new file mode 100644
index 0000000000..a56422c82f
--- /dev/null
+++ b/elements/rh-code-block/docs/code-block-best-practices-customizing-do.svg
@@ -0,0 +1,5 @@
+
diff --git a/elements/rh-code-block/docs/code-block-best-practices-customizing-dont.svg b/elements/rh-code-block/docs/code-block-best-practices-customizing-dont.svg
new file mode 100644
index 0000000000..209b475700
--- /dev/null
+++ b/elements/rh-code-block/docs/code-block-best-practices-customizing-dont.svg
@@ -0,0 +1,5 @@
+
diff --git a/elements/rh-code-block/docs/code-block-best-practices-font-family-do.svg b/elements/rh-code-block/docs/code-block-best-practices-font-family-do.svg
new file mode 100644
index 0000000000..a56422c82f
--- /dev/null
+++ b/elements/rh-code-block/docs/code-block-best-practices-font-family-do.svg
@@ -0,0 +1,5 @@
+
diff --git a/elements/rh-code-block/docs/code-block-best-practices-font-family-dont.svg b/elements/rh-code-block/docs/code-block-best-practices-font-family-dont.svg
new file mode 100644
index 0000000000..63060a4c26
--- /dev/null
+++ b/elements/rh-code-block/docs/code-block-best-practices-font-family-dont.svg
@@ -0,0 +1,5 @@
+