Styled table on write-with-conversational-official-voice

cagov · Dec 21, 2023 · f7bcacf · f7bcacf
1 parent 818c164
commit f7bcacf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/docs/pages/content-design/principles/write-with-conversational-official-voice.md b/docs/pages/content-design/principles/write-with-conversational-official-voice.md
@@ -46,20 +46,37 @@ A conversational tone and an official one can seem like they’re opposites of e
 
 This example is too official, which can be hard to understand and confusing:
 
-> It is required that all people seeking to apply must do so prior to the deadline set by law of September 30. No applications shall be accepted after this date.
+<div class="blockquote-container">
+  <div class="blockquote-body">
+    <div class="blockquote-header"><strong>Example:</strong></div>
+    <div class="blockquote-content">It is required that all people seeking to apply must do so prior to the deadline set by law of September 30. No applications shall be accepted after this date.</div>
+  </div>
+</div>
 
 This example is too informal, so readers may not trust it as a source of truth:
 
-> Listen up: you’ve got to get your application in before the end of the month. Don’t wait! Do it ASAP.
+<div class="blockquote-container">
+  <div class="blockquote-body">
+    <div class="blockquote-header"><strong>Example:</strong></div>
+    <div class="blockquote-content">Listen up: you’ve got to get your application in before the end of the month. Don’t wait! Do it ASAP.</div>
+  </div>
+</div>
 
 This example strikes the right balance between being conversational and official:
 
-> Apply between August 1 and September 30.
+<div class="blockquote-container">
+  <div class="blockquote-body">
+    <div class="blockquote-header"><strong>Example:</strong></div>
+    <div class="blockquote-content">Apply between August 1 and September 30.</div>
+  </div>
+</div>
 
 ### Voice checklist
 
 Check your writing against these traits to make sure it’s conversational and official.
 
+<div class="twocolumn-table">
+
 | **Be**                  | **Do not be**                                               |
 | ----------------------- | ----------------------------------------------------------- | 
 | A source of truth       | A source of opinions                                        |
@@ -71,6 +88,8 @@ Check your writing against these traits to make sure it’s conversational and o
 | Straightforward         | Blunt                                                       |
 | Sensitive toward others | Patronizing, pretending that you know everything about them |
 
+</div>
+
 ### Use a style guide for consistency
 
 Style guides help you be consistent across your content. They standardize the way to write punctuation, dates, numbers, and other elements. Adopt an existing style guide if you often have questions about how to write something.

diff --git a/docs/src/css/sass/ds-site-overrides.scss b/docs/src/css/sass/ds-site-overrides.scss
@@ -95,4 +95,25 @@ main.cagov-main {
             }
         }
     }
+}
+
+div.twocolumn-table {
+    table {
+        thead {
+            background-color: #FAFAFA;
+            th {
+                border: 1px solid #C7D6E4;
+                width: 50%;
+                font-size: 18px;
+            }
+        }
+        tbody {
+            background-color: white;
+            td {
+                font-size: 14px;
+                border: 1px solid #C7D6E4;
+                width: 50%;
+            }
+        }
+    }
 }