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`. - - - Image of a code block showing the Red Hat Text font used for code text which is incorrect usage - - -### Different styling - -Do not change any of the code block styling. - - - Image of a code block showing different styles which is incorrect usage - +### Font family + + + + Code block text using Red Hat Mono + + +

Use --rh-font-family-code.

+
+ + + + Code block text using Red Hat Text + + +

Do not use a different font family token thanĀ --rh-font-family-code.

+
+ +### Customizing + + + + Code block using default styling + + +

Use the available options for customizing code block. (Adjusting syntax highlighting is ok.)

+
+ + + + Code block with white background and black border + + +

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 @@ + + + + +