diff --git a/preview-site-src/tests.adoc b/preview-site-src/tests.adoc
new file mode 100644
index 000000000..f545ac3eb
--- /dev/null
+++ b/preview-site-src/tests.adoc
@@ -0,0 +1,20 @@
+= CSS and ASCIIdoc Tests
+
+This topic contains multiple test for changes to CSS and ASCIIdoc elements.
+
+== Test Callouts
+
+.XML element
+[source,xml,linenums]
+----
+<api-platform-gw:api
+  apiName="${apiName}" // <1>
+  version="${apiVersion}" //<2>
+  flowRef="proxy" //<3>
+  apikitRef="api-config"/> //<4>
+----
+
+<1> Configure the `${apiName}` with the UUID, which is the group ID and the Exchange asset ID assigned to your API by API Manager.
+<2> Configure the `${apiVersion}` with the API Version, which is the version name and the instance ID or the label assigned to your API by API Manager.
+<3> Set the `flowRef` element to point to the flow that you want to pair to the API in API Manager.
+<4> If you use APIKit and you would like to apply policies at a resource level, you must set this value. Otherwise said policies won't work at resource level.
diff --git a/src/css/adoc/doc.css b/src/css/adoc/doc.css
index afd53c6a7..dcc5cb0b9 100644
--- a/src/css/adoc/doc.css
+++ b/src/css/adoc/doc.css
@@ -16,6 +16,50 @@
     }
   }
 
+  /* numbered callouts from codeblocks */
+  & .conum {
+    background: var(--tertiary);
+    border: 1px solid var(--aluminum-3);
+    border-radius: 4px;
+    font-family: var(--sans-serif);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: --weight-bold;
+    padding: 0 5px;
+
+    &::after {
+      content: attr(data-value);
+      -webkit-user-select: none; /* Safari */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* IE10+/Edge */
+      user-select: none; /* Standard */
+    }
+
+    & + b {
+      display: none;
+    }
+  }
+
+  /* collouts within the codeblock */
+  & pre .conum {
+    box-shadow: 0 2px 6px var(--aluminum-3);
+  }
+
+  /* references within codeblock */
+  & .colist {
+
+    /* numbers */
+    & td:first-of-type {
+      padding: 0 10px;
+      vertical-align: top;
+    }
+
+    /* content */
+    & td:last-of-type {
+      padding: 0;
+    }
+  }
+
   /* default spacing */
   & > h1:first-child {
     padding-top: var(--lg);