Add stacked topic tag group modifier

docs/pages/tags.md

@@ -21,7 +21,7 @@ variation_groups:
             <li>
               <a href="#" class="a-tag-topic">
                 <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
-                <span class="a-tag-topic__text">Discrimination</span>
+                <span class="a-tag-topic__text">Access to credit</span>
               </a>
             </li>
 
@@ -32,6 +32,26 @@ variation_groups:
               </a>
             </li>
           </ol>
+
+      - variation_is_deprecated: false
+        variation_name: Topic tag (stacked)
+        variation_description: A topic tags group that is stacked at all screen sizes.
+        variation_code_snippet: >-
+          <ol class="m-tag-group m-tag-group--stacked">
+            <li>
+              <a href="#" class="a-tag-topic">
+                <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
+                <span class="a-tag-topic__text">Open government</span>
+              </a>
+            </li>
+
+            <li>
+              <a href="#" class="a-tag-topic">
+                <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
+                <span class="a-tag-topic__text">Banking</span>
+              </a>
+            </li>
+          </ol>
       - variation_is_deprecated: false
         variation_name: Filter tag
         variation_description: Filter tags are used as a part of

packages/cfpb-design-system/src/components/cfpb-forms/tag.scss

@@ -123,8 +123,13 @@ a.a-tag-filter {
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {
     display: flex;
-    gap: math.div(15px, $btn-font-size) + em;
+    column-gap: math.div(15px, $btn-font-size) + em;
     flex-wrap: wrap;
+
+    &--stacked {
+      flex-direction: column;
+      width: fit-content;
+    }
   }
 
   &:has(.a-tag-filter) {