adjusting css margin and nav

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

@@ -672,6 +672,6 @@ details form {
    border-radius: 7px;
 }
 
-#guidance-h1 {
-   margin-top: 0 !important;
+.usa-prose.margin-top-0 {
+   margin-top: 0;
 }

app/main/views/index.py

@@ -186,7 +186,7 @@ def trial_mode_new():
 @user_is_logged_in
 def guidance():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/guidance.html",
         navigation_links=guidance_nav(),
     )
 
@@ -195,9 +195,8 @@ def guidance():
 @user_is_logged_in
 def clear_goals():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/clear-goals.html",
         navigation_links=guidance_nav(),
-        title="Clear Goals",
     )
 
 
@@ -205,9 +204,8 @@ def clear_goals():
 @user_is_logged_in
 def rules_and_regulations():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/rules-and-regulations.html",
         navigation_links=guidance_nav(),
-        title="Rules and Regulations",
     )
 
 
@@ -215,9 +213,8 @@ def rules_and_regulations():
 @user_is_logged_in
 def establish_trust():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/establish-trust.html",
         navigation_links=guidance_nav(),
-        title="Establish Trust",
     )
 
 
@@ -241,16 +238,6 @@ def multiple_languages():
     )
 
 
-@main.route("/guidance/get-the-word-out")
-@user_is_logged_in
-def get_the_word_out():
-    return render_template(
-        "views/guidance/index.html",
-        navigation_links=guidance_nav(),
-        title="Get the Word Out",
-    )
-
-
 @main.route("/guidance/as-people-receive-text")
 @user_is_logged_in
 def as_people_receive_text():

app/main/views/sub_navigation_dictionaries.py

@@ -80,11 +80,11 @@ def guidance_nav():
             "sub_navigation_items": [
                 {
                     "name": "Get the word out",
-                    "link": "main.get_the_word_out",
+                    "link": "main.establish_trust#get-the-word-out",
                 },
                 {
                     "name": "As people receive texts",
-                    "link": "main.as_people_receive_text",
+                    "link": "main.establish_trust#as-people-receive-texts",
                 },
             ],
         },

app/templates/base.html

@@ -53,7 +53,24 @@
               <div class="grid-row">
                 {% if navigation_links %}
                   <div class="tablet:grid-col-2 margin-bottom-4">
-                    {{ sub_navigation(navigation_links) }}
+                    <nav class="nav">
+                      <ul class="usa-sidenav">
+                        {% for item in navigation_links %}
+                          <li class="usa-sidenav__item">
+                            <a class="{% if item['link'] == request.endpoint %} usa-current {% endif %}" href="{{ url_for(item.link) }}">{{ item.name }}</a>
+                            {% if item.sub_navigation_items %}
+                              <ul class="usa-sidenav__sublist">
+                                {% for sub_item in item.sub_navigation_items %}
+                                  <li>
+                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>
+                                  </li>
+                                {% endfor %}
+                              </ul>
+                            {% endif %}
+                          </li>
+                        {% endfor %}
+                      </ul>
+                    </nav>
                   </div>
                   <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
                 {% else %}

app/templates/components/guidance/cards.html

@@ -0,0 +1,23 @@
+<h3 class="margin-bottom-4">{{card_header}}</h3>
+<ul class="usa-card-group">
+  {% for item in card_contents %}
+  <li class="usa-card grid-col tablet:grid-col-4">
+    <div class="usa-card__container">
+      <div class="usa-card__header">
+        <h4 class="usa-card__heading text-center">{{item.card_heading}}</h4>
+      </div>
+      <div class="usa-card__media usa-card__media--inset">
+        <div class="usa-card__img">
+          <img src="{{item.image_src}}" alt="{{item.card_heading}} image" />
+        </div>
+      </div>
+      <div class="usa-card__body">
+        <p class="text-center">
+          {{item.p_text}}
+        </p>
+      </div>
+    </div>
+  </li>
+  {% endfor %}
+
+</ul>

app/templates/views/roadmap.html

@@ -33,7 +33,7 @@
   <ul class="list list-bullet">
     <li>Achieve compliance to begin piloting, such as ATO and privacy standards.
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-        use xlink:href="/assets/img/sprite.svg#check"></use>
+        <use xlink:href="/assets/img/sprite.svg#check"></use>
       </svg>
     </li>
     <li>Demonstrate that a government-run notifications tool provides a unique value.</li>