Standardizing across calls

Author: forstisabella

src/_sass/components/_markdown.scss

@@ -479,22 +479,12 @@ div.highlighter-rouge {
 .sample-code-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  padding: 5px;
   overflow: scroll;
 }
 
-.output {
-  outline: 1px solid color(gray-600);
-  outline-offset: 4px
-}
 .output-code {
   display: block;
   font: 12px color(code-gray) "Droid Sans Mono", "Lucida Console", "Monaco", monospace; 
   word-wrap: break-word;
 }
 
-.form {
-  outline: 1px solid color(gray-600);
-  outline-offset: 4px;
-}

src/connections/spec/group.md

@@ -81,6 +81,10 @@ Here's a complete example of a `group` call:
 }
 ```
 
+### Create your own Group call
+
+Use the following interactive code pen to see what your Group calls would look like with user-provided information:
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript">
   function showMessage(){
@@ -135,7 +139,6 @@ Here's a complete example of a `group` call:
 <div class="sample-code-container">
 <div class="form">
   <h3> Sample Group </h3>
-  <p><b>See what your group call looks like</b></p>
   <label for="name">Name:</label>
   <input type="text" id="name"><br>
   <label for="industry">Title:</label>
@@ -151,9 +154,9 @@ Here's a complete example of a `group` call:
 </div>
 
 <div class="output">
-<h3>Sample Group Call</h3>
+<h4>Sample Group Call</h4>
 <pre class="language-javascript"><code class="language-javascript" id="output_container">
-
+Sample output goes here!
 </code></pre>
 </div>
 </div>

src/connections/spec/page.md

@@ -71,7 +71,9 @@ Here's a complete example of a `page` call:
   "version": "1.1"
 }
 ```
+### Create your own Page call
 
+Use the following interactive code pen to see what your Page calls would look like with user-provided information:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript">
   function showMessage(){
@@ -120,8 +122,7 @@ Here's a complete example of a `page` call:
 
 <div class="sample-code-container">
 <div class="form">
-  <h3> Sample Page </h3>
-  <p><b>See what your page call looks like</b></p>
+  <h4> Sample Page call</h4>
   <label for="name">Name:</label>
   <input type="text" id="name"><br>
   <label for="title">Title:</label>
@@ -132,9 +133,9 @@ Here's a complete example of a `page` call:
 </div>
 
 <div class="output">
-<h3>Sample Page Call</h3>
+<h4>Sample Page Call</h4>
 <pre class="language-javascript"><code class="language-javascript" id="output_container">
-
+Sample output goes here!
 </code></pre>
 </div>
 </div>

src/connections/spec/screen.md

@@ -65,7 +65,9 @@ Here's a complete example of a `screen` call:
   "version": "1.1"
 }
 ```
+### Create your own Screen call
 
+Use the following interactive code pen to see what your Screen calls would look like with user-provided information:
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript">
   function showMessage(){
@@ -112,8 +114,7 @@ Here's a complete example of a `screen` call:
 
 <div class="sample-code-container">
 <div class="form">
-  <h3> Sample Screen </h3>
-  <p><b>See what your screen call looks like</b></p>
+  <h4> Sample Screen </h4>
   <label for="name">Name:</label>
   <input type="text" id="name"><br>
   <label for="variation">Variation:</label>
@@ -122,9 +123,9 @@ Here's a complete example of a `screen` call:
 </div>
 
 <div class="output">
-<h3>Sample Screen Call</h3>
+<h4>Sample Screen Call</h4>
 <pre class="language-javascript"><code class="language-javascript" id="output_container">
-
+Sample output goes here!
 </code></pre>
 </div>
 </div>

src/connections/spec/track.md

@@ -76,6 +76,10 @@ Here's a complete example of a `track` call:
 }
 ```
 
+### Create your own Track call
+
+Use the following interactive code pen to see what your Track calls would look like with user-provided information:
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript">
   function showMessage(){
@@ -130,7 +134,6 @@ Here's a complete example of a `track` call:
 <div class="sample-code-container">
 <div class="form">
   <h3> Sample Track </h3>
-  <p><b>See what your track call looks like</b></p>
   <label for="event">Event:</label>
   <input type="text" id="event"><br>
   <label for="title">Title:</label>
@@ -139,9 +142,9 @@ Here's a complete example of a `track` call:
 </div>
 
 <div class="output">
-<h3>Sample Track Call</h3>
+<h4>Sample Track Call</h4>
 <pre class="language-javascript"><code class="language-javascript" id="output_container">
-
+Sample output goes here!
 </code></pre>
 </div>
 </div>