updated content from feedback

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -852,3 +852,35 @@ li.linked-card:hover svg,
 .guidance_link {
    text-decoration: none;
 }
+
+.usa-link--downloadable {
+   position: relative;
+}
+
+.usa-link--downloadable::after {
+   background-image: url(../img/material-icons/download.svg);
+   background-repeat: no-repeat;
+   background-position: center center;
+   background-size: 1.75ex 1.75ex;
+   height: 1.75ex;
+   width: 1.75ex;
+   content: "";
+   display: inline;
+   margin-top: .7ex;
+   margin-left: 2px;
+   padding-left: 1.75ex;
+   vertical-align: middle;
+}
+
+.usa-link--downloadable::after {
+   background: 0 0;
+   background-color: currentColor;
+   -webkit-mask-image: url(../img/material-icons/download.svg), linear-gradient(transparent, transparent);
+   mask-image: url(../img/material-icons/download.svg), linear-gradient(transparent, transparent);
+   -webkit-mask-position: center center;
+   mask-position: center center;
+   -webkit-mask-repeat: no-repeat;
+   mask-repeat: no-repeat;
+   -webkit-mask-size: 1.75ex 1.75ex;
+   mask-size: 1.75ex 1.75ex;
+}

app/templates/views/guidance/clear-goals.html

@@ -11,44 +11,51 @@
 <section class="usa-prose">
   <h1>{{page_title}}</h1>
   <p class="font-sans-lg text-base">Start with a singular purpose. Make explicit what you want to achieve.</p>
-  <p>Text messaging should be one part of how you communicate with the people you serve, and it is best used to provoke
+  <div class="grid-row grid-gap-3">
-    action or influence behavior. Therefore, when starting to plan your texting campaign, it’s important to start with
+    <div class="tablet:grid-col">
-    the end in mind.
+      <p>Text messaging should be one part of how you communicate with the people you serve, and it is best used to
-  </p>
+        provoke
-  <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
+        action or influence behavior. Therefore, when starting to plan your texting campaign, it’s important to start
-    <div class="usa-summary-box__body">
+        with
-      <h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
+        the end in mind.
-        To establish clear goals, start by answering the following questions:
+      </p>
-      </h4>
+      <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
-      <div class="usa-summary-box__text">
+        <div class="usa-summary-box__body">
-        <ul class="usa-list">
+          <h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
-          <li><i>Who</i> do you want to text?</li>
+            To establish clear goals, start by answering the following questions:
-          <li><i>At what moments</i> do you want to text them?</li>
+          </h4>
-          <li><i>Why</i> do you want to text them?</li>
+          <div class="usa-summary-box__text">
-          <li>What do you want them to <i>do</i>?</li>
+            <ul class="usa-list">
-        </ul>
+              <li><i>Who</i> do you want to text?</li>
+              <li><i>At what moments</i> do you want to text them?</li>
+              <li><i>Why</i> do you want to text them?</li>
+              <li>What do you want them to <i>do</i>?</li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+    <div class="tablet:grid-col width-full padding-top-3">
-
+      <div class="grid-container">
-  <div class="grid-container">
+        <div class="usa-card__container border-0 width-full overflow-hidden maxh-mobile-lg">
-    <div class="tablet:grid-col-6">
+          <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
-      <div class="usa-card__container border-0 width-full overflow-hidden height-mobile">
+          <div class="position-absolute flex text-center padding-5 padding-top-15">
-        <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
+            <p class="sms-message-wrapper text-left">Dept. of Human Services: We believe your EBT card may have been
-        <div class="position-absolute flex text-cener padding-5 padding-top-9">
+              used by
-          <p class="sms-message-wrapper text-center">Dept. of Human Services: We believe your EBT card may have been
+              someone else. Please call the number on the back of your card (888-123-5555) to cancel and get a new
-            used by
+              one.
-            someone else. Please call the number on the back of your card (888-123-5555) to cancel and get a new one. If
+              If
-            you
+              you
-            need a new card immediately, please visit your local office.
+              need a new card immediately, please visit your local office.
-          </p>
+            </p>
+          </div>
         </div>
       </div>
     </div>
   </div>
 
   <hr>
-  <h2>Add new header here</h2>
+  <h2>When should you send a text?</h2>
   <div class="grid-row grid-gap-3">
     <div class="tablet:grid-col">
       <div class="do-dont">
@@ -171,6 +178,8 @@
     ideally, from people who receive the texts themselves to ensure your messages are clear and actionable.
   </p>
   <h2>Measure performance</h2>
+  <p>Building and operationalizing a texting initiative requires time and effort, and you want to be able to demonstrate
+    the results of that effort.</p>
   <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
     <div class="usa-summary-box__body">
       <div class="usa-summary-box__text">

app/templates/views/guidance/establish-trust.html

@@ -26,9 +26,14 @@
     key service locations as well as partnering with community organizations to get the word out about your new texting
     program.</p>
   <h3>An example of key messages in direct mail</h3>
-  <img src="{{asset_url('images/snap-renewal.png')}}" alt="snap-renewal">
+  <figure>
-  <h3>Prime your audiences to trust you</h3>
+    <img src="{{asset_url('images/snap-renewal.jpg')}}" alt="snap-renewal" width="100%">
+    <figcaption>A paper mailer sent out by the State of Connecticut, in partnership with Code for America, to get the
+      word out about their new SNAP texting initiative. Flier displays an image of an introduction text and includes key
+      messages to reinforce legitimacy.</figcaption>
+  </figure>
 
+  <h3>Prime your audiences to trust you</h3>
   <ul class="usa-card-group flex-1 flex-wrap padding-top-2">
     <li class="flex-1 width-full height-full padding-bottom-2">
       <div class="usa-card__container border-0">
@@ -40,7 +45,7 @@
           <li><b>Text types</b> – Be clear on the types of texts you intend to send, how often, and why they matter</li>
           <li><b>Privacy policy</b>– For example, state that you will not collect personal information, including the
             types of information you will never ask for</li>
-          <li><b>Places to verif</b>y – Include a phone number, website, or human where people can verify that the texts
+          <li><b>Places to verify</b> – Include a phone number, website, or human where people can verify that the texts
             are coming from you</li>
           <li><b>Opt out</b> – Provide opt-out instructions and a disclaimer for the potential cost of receiving the
             text
@@ -48,10 +53,10 @@
         </ol>
       </div>
     </li>
-    <li class="usa-card flex-1 usa-card--media-right width-full">
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
       <div class="usa-card__container border-0 width-full overflow-hidden height-phone-lg">
         <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
-        <div class="position-absolute flex text-cener padding-5 padding-top-9">
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
           <p class="sms-message-wrapper text-left">Dept. of Social Services: Welcome to text updates from the
             {{circle_number(1)}}<b>Department of Social Services.</b> {{ circle_number(2) }}<b>We’ll always text
               you from
@@ -75,21 +80,21 @@
     <li class="flex-1 width-full height-full padding-bottom-2">
       <div class="usa-card__container border-0">
         <ol start="7" class="guidance-list set-two">
-          <li>Identify yourself in the text message. Use a consistent and familiar program name to precede each text you
+          <li>Identify yourself in the text message. Use a consistent and familiar <b>program name</b> to precede each
-            send.</li>
+            text you send.</li>
-          <li>Personalize with first name. Through A/B testing, Code for America saw an increase in follow-through by
+          <li>Personalize with <b>first name</b>. Through A/B testing, Code for America saw an increase in
-            25% if someone’s first name was included.</li>
+            follow-through by 25% if someone’s first name was included.</li>
-          <li>Use full and direct .gov website URLs. Avoid link shorteners, as they obscure your links and potentially
+          <li>Use <b>full and direct .gov website URLs</b>. Avoid link shorteners, as they obscure your links and
-            make it easier for a malicious actor to spoof your text.</li>
+            potentially make it easier for a malicious actor to spoof your text.</li>
-          <li>If providing a phone number, use a familiar phone number and provide information on how to verify its
+          <li>If providing a phone number, use a familiar phone number and <b>provide information on how to verify</b>
-            legitimacy.</li>
+            its legitimacy.</li>
         </ol>
       </div>
     </li>
-    <li class="usa-card flex-1 usa-card--media-right width-full">
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-1">
       <div class="usa-card__container border-0 width-full height-mobile overflow-hidden">
         <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
-        <div class="position-absolute flex text-cener padding-5 padding-top-9">
+        <div class="position-absolute flex text-center padding-5 padding-top-10">
           <p class="sms-message-wrapper text-left">
             {{circle_number(7) }}<b>Dept. of Social Services:</b> Hi {{circle_number(8) }}<b>Julie,</b> Your Medicaid
             renewal is closing December 31, 2023. You can renew online at {{circle_number(9) }}<a
@@ -110,15 +115,15 @@
           generated if a recipient tries to text a response to your message. Use the auto-response to reaffirm your key
           messages around legitimacy and communicate to recipients that texts are coming from an automated system.</p>
         <ol class="guidance-list set-three">
-          <li>Provide a way to contact a human in any auto-response text</li>
+          <li>Provide <b>a way to contact a human</b> in any auto-response text</li>
-          <li>Provide information on how to opt out and opt back in</li>
+          <li>Provide <b>information on how to opt out</b> and opt back in</li>
         </ol>
       </div>
     </li>
-    <li class="usa-card flex-1 usa-card--media-right width-full">
+    <li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
       <div class="usa-card__container border-0 width-full overflow-hidden guidance">
         <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
-        <div class="position-absolute flex text-cener padding-5 padding-top-9">
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
           <p class="sms-message-wrapper text-left">
             Dept. of Social Services: This number is unmonitored. To {{circle_number(11) }} <b>contact us, call
               888-123-4567</b>. We will never ask for personal details in a text. If you have questions about how to

app/templates/views/guidance/rules-and-regulations.html

@@ -42,8 +42,9 @@
   },
   {
   "url_link":
-  "https://docs.google.com/document/d/1Q8shgH9ODs-aD3wiRolGge4kBSTJzMIebj29dNkqK9Q/edit#heading=h.ddk0bn7sfe86",
+  "images/TCPA_Overview.pdf",
   "url_text":"Download and share our overview of the TCPA with your legal counsel",
+  "is_downloadable": true,
   "p_text": 'It provides a baseline
   interpretation to aid your legal counsel in getting up to speed with what might be needed for your program or use
   case.
@@ -60,7 +61,11 @@
       <div class="usa-collection__body">
         {% if item.url_text %}
         <h4 class="usa-collection__heading">
-          <a class="use-link usa-link--external" href="{{ item.url_link }}" target="_blank">{{ item.url_text }}</a>
+          <a class="usa-link {% if item.is_downloadable %}usa-link--downloadable{% else %}usa-link--external{% endif %}"
+            href="{% if item.is_downloadable %}{{ asset_url(item.url_link) }}{% else %}{{ item.url_link }}{% endif %}"
+            target="_blank">
+            {{ item.url_text }}
+          </a>
         </h4>
         {% endif %}
         <p class="usa-collection__description">
@@ -69,6 +74,7 @@
       </div>
     </li>
     {% endfor %}
+
   </ul>
   <h3>Opting out</h3>
   <p>

app/templates/views/guidance/write-for-action.html

@@ -60,14 +60,13 @@
         </ol>
       </div>
     </li>
-    <li class="flex-1 usa-card--media-right width-full">
+    <li class="flex-1 usa-card--media-right width-full padding-top-3">
       <div class="usa-card__container border-0 width-full">
         <img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
-        <div class="position-absolute flex text-cener padding-5 padding-top-9">
+        <div class="position-absolute flex text-center padding-5 padding-top-15">
-          <p class="text-center">Write an introductory text before you start sending messages:</p>
+          <p class="sms-message-wrapper text-left">{{circle_number(1) }}State Medicare Agency: Hello, MEDICARE has
-          <p class="sms-message-wrapper text-center">{{circle_number(1) }}State Medicare Agency: Hello, MEDICARE has
             attempted to
-            send you an update about your claim, but the mail was returned. {{circle_number(2) }}Please go to
+            send you an update about your claim, but the mail was returned. <br>{{circle_number(2) }}Please go to
             https://www.medicare.gov/account/login?utm_source=TEXT, {{circle_number(3) }}log in to your account, and
             click “My
             Account Information” to verify that your address is correct. If you are having difficulty logging in,
@@ -103,22 +102,5 @@
   ] %}
   {% with card_contents=card_contents, text_align='left' %}{% include "components/guidance/cards.html" %}{%
   endwith %}
-  <!-- <ul class="usa-card-group">
-    {% for item in card_contents %}
-    <li class="usa-card tablet-lg:grid-col-4 widescreen:grid-col-4">
-      <div class="usa-card__container">
-        <div class="usa-card__header">
-          <h4 class="usa-card__heading">{{item.card_heading}}</h4>
-        </div>
-        <div class="usa-card__body">
-          <p>
-            {{item.p_text |safe}}
-          </p>
-        </div>
-      </div>
-    </li>
-    {% endfor %}
-  </ul> -->
-
 </section>
 {% endblock %}