Added typography examples (#3240)

* Added examples for each text transformation helper

* Updated typography to reflect the text weights in examples

* Added examples to each size helper

Co-authored-by: Whit Waldo <whit.waldo@innovian.net>

1 files changed, 13 insertions, 9 deletions

diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html
index cc6f647c..91e2d489 100644
--- a/docs/documentation/helpers/typography-helpers.html
+++ b/docs/documentation/helpers/typography-helpers.html
@@ -71,6 +71,9 @@ breadcrumb:
       <th>
         Font-size
       </th>
+      <th>
+        Size
+      </th>
     </tr>
   </thead>
   <tbody>
@@ -79,6 +82,7 @@ breadcrumb:
         {% assign key = '$size-' | append: forloop.index %}
         <td><code>is-size-{{ forloop.index }}</code></td>
         <td><code>{{ initial_vars[key].value }}</code></td>
+        <td><span class="{{ initial_vars[key].value }}">Example</span></td>
       </tr>
     {% endfor %}
   </tbody>
@@ -316,19 +320,19 @@ breadcrumb:
   <tbody>
   <tr>
     <td><code>is-capitalized</code></td>
-    <td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
+    <td>Transforms <strong>the first character</strong> of each word to <span class="is-capitalized">uppercase</span></td>
   </tr>
   <tr>
     <td><code>is-lowercase</code></td>
-    <td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
+    <td>Transforms <strong>all characters</strong> to <span class="is-lowercase">lowercase</span></td>
   </tr>
   <tr>
     <td><code>is-uppercase</code></td>
-    <td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
+    <td>Transforms <strong>all characters</strong> to <span class="is-uppercase">uppercase</span></td>
   </tr>
   <tr>
     <td><code>is-italic</code></td>
-    <td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
+    <td>Transforms <strong>all characters</strong> to <span class="is-italic">italic</span></td>
   </tr>
   </tbody>
 </table>
@@ -355,23 +359,23 @@ breadcrumb:
   <tbody>
   <tr>
     <td><code>has-text-weight-light</code></td>
-    <td>Transforms text weight to <strong>light</strong></td>
+    <td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
   </tr>
   <tr>
     <td><code>has-text-weight-normal</code></td>
-    <td>Transforms text weight to <strong>normal</strong></td>
+    <td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
   </tr>
   <tr>
     <td><code>has-text-weight-medium</code></td>
-    <td>Transforms text weight to <strong>medium</strong></td>
+    <td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
   </tr>
   <tr>
     <td><code>has-text-weight-semibold</code></td>
-    <td>Transforms text weight to <strong>semi-bold</strong></td>
+    <td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
   </tr>
   <tr>
     <td><code>has-text-weight-bold</code></td>
-    <td>Transforms text weight to <strong>bold</strong></td>
+    <td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
   </tr>
   </tbody>
 </table>