Handle styles for a panel subtitle

scss/elements/_panels.scss

@@ -43,4 +43,12 @@
       padding: 0 ($gap * 4);
     }
   }
+
+  .panel__heading {
+    margin: ($gap * 2) 0;
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+  }
 }

scss/elements/_typography.scss

@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
  */
 
-* {
+ * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -17,6 +17,11 @@ p {
 h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
+
+  + .subtitle * {
+    margin-top: 0;
+  }
+
 }
 
 a,
@@ -36,3 +41,7 @@ dt {
   display: inline;
   font-weight: bold;
 }
+
+.subtitle {
+  color: $color-gray;
+}

templates/requests/screen-1.html.to

@@ -1,7 +1,10 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Details of Use</h2>
+{% end %}
+
 {% block form %}
-<h2>Details of Use</h2>
 
 {% autoescape None %}
 {% if f.errors %}

templates/requests/screen-2.html.to

@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Information About You</h2>
+{% end %}
+
 {% block form %}
 
 {% autoescape None %}
@@ -7,8 +11,6 @@
   <b class="usa-input-error-message">There were some errors, see below.</b>
 {% end %}
 
-
-<h2 id="Information About You">Information About You</h2>
 <p class="usa-font-lead">Please tell us more about yourself.</p>
 
 {{ f.fname_request.label }}

templates/requests/screen-3.html.to

@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Primary Government/Military <br> Point of Contact (POC)</h2>
+{% end %}
+
 {% block form %}
 
 {% autoescape None %}
@@ -7,7 +11,6 @@
   <b class="usa-input-error-message">There were some errors, see below.</b>
 {% end %}
 
-<h2 id="primary-poc">Primary Government/Military <br> Point of Contact (POC)</h2>
 <p class="usa-font-lead">Please designate a Primary Point of Contact that will be responsible for owning the workspace in the JEDI Cloud.</p>
 <p>The Point of Contact will become the primary owner of the <em>workspace</em> created to use the JEDI Cloud. As a workspace owner, this person will have the ability to:
   <ul>

templates/requests/screen-4.html.to

@@ -1,5 +1,9 @@
 {% extends '../requests_new.html.to' %}
 
+{% block subtitle %}
+  <h2>Review &amp; Submit</h2>
+{% end %}
+
 {% block form_action %}
   <form method='POST' action="{{ reverse_url('requests_submit', request_id) }}" autocomplete="off">
 {% end %}
@@ -11,8 +15,6 @@
 <b>There were some errors, see below.</b>
 {% end %}
 
-<h2 id="review-submit">Review &amp; Submit</h2>
-
 <p class="usa-font-lead">Before you can submit your request, please take a moment to review the information entered in the form. You may make changes by clicking the edit link on each section. When all information looks right, go ahead and submit.</p>
 
 <h3>Details of Use <a href="{{ reverse_url('request_form_update', 1, request_id) }}">Edit</a></h3>

templates/requests_new.html.to

@@ -11,6 +11,7 @@
     <main class="panel__content">
       <div class="panel__heading">
         <h1>New Request</h1>
+        <div class="subtitle">{% block subtitle %}{% end %}</div>
       </div>
 
         {% block form_action %}