diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index ad4ccb1eb2c..3489a28f007 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -26,9 +26,6 @@ rule-empty-line-before -
 selector-id-pattern -
   Turned off.
   TODO: Turn on this rule and work out regex for BEM syntax.
-selector-class-pattern -
-  Turned off.
-  TODO: Turn on this rule and work out regex for BEM syntax.
 less/color-no-invalid-hex
 less/no-duplicate-variables
   Both of the above settings are turned off till
@@ -58,7 +55,10 @@ module.exports = {
       },
     ],
     'selector-id-pattern': null,
-    'selector-class-pattern': null,
+    'selector-class-pattern': [
+      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
+      { resolveNestedSelectors: true },
+    ],
     'less/color-no-invalid-hex': null,
     'less/no-duplicate-variables': null,
   },
diff --git a/cfgov/agreements/jinja2/agreements/_database_disclaimer.html b/cfgov/agreements/jinja2/agreements/_database_disclaimer.html
index df0079c2a6b..09aaf7c63d4 100755
--- a/cfgov/agreements/jinja2/agreements/_database_disclaimer.html
+++ b/cfgov/agreements/jinja2/agreements/_database_disclaimer.html
@@ -1,6 +1,6 @@
 {% import "v1/includes/molecules/social-media.html" as social_media with context %}
 
-<div class="block block__padded-top block__border-top">
+<div class="block block--padded-top block--border-top">
     <h2 id="find-issuer">
         Can't find an issuer?
     </h2>
diff --git a/cfgov/agreements/jinja2/agreements/_need_help.html b/cfgov/agreements/jinja2/agreements/_need_help.html
index 88d01bdef08..5edb06a9168 100755
--- a/cfgov/agreements/jinja2/agreements/_need_help.html
+++ b/cfgov/agreements/jinja2/agreements/_need_help.html
@@ -1,6 +1,6 @@
 <div class="m-related-links">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Need help with your credit cards?
         </h2>
     </header>
diff --git a/cfgov/agreements/jinja2/agreements/archive.html b/cfgov/agreements/jinja2/agreements/archive.html
index 8c19e9b9d56..8dc416491b4 100644
--- a/cfgov/agreements/jinja2/agreements/archive.html
+++ b/cfgov/agreements/jinja2/agreements/archive.html
@@ -11,7 +11,7 @@
 ] %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement archive</h1>
         {% if agreements | length == 0 %}
             We encountered an error fetching the credit card agreement archive. Please try again.
@@ -51,7 +51,7 @@ <h1>Credit card agreement archive</h1>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         {% include '_need_help.html' %}
     </div>
 {% endblock %}
diff --git a/cfgov/agreements/jinja2/agreements/index.html b/cfgov/agreements/jinja2/agreements/index.html
index 3305799169b..dc16770cfcd 100755
--- a/cfgov/agreements/jinja2/agreements/index.html
+++ b/cfgov/agreements/jinja2/agreements/index.html
@@ -10,7 +10,7 @@
 ] %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement database</h1>
 
         <div class="lead-paragraph">
@@ -46,7 +46,7 @@ <h2 id="issuer-select">
             for agreement submission instructions.
         </p>
 
-        <h3 class="block__sub"><a style="border-bottom-width:1px" href="./archive/">View the credit card agreement archive</a></h3>
+        <h3 class="block--sub"><a style="border-bottom-width:1px" href="./archive/">View the credit card agreement archive</a></h3>
 
         <h3>Looking for your own credit card agreement?</h3>
         <p>
@@ -80,7 +80,7 @@ <h3>College credit card agreements</h3>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         {% include '_need_help.html' %}
     </div>
 {% endblock %}
diff --git a/cfgov/agreements/jinja2/agreements/search.html b/cfgov/agreements/jinja2/agreements/search.html
index b6626105124..982e478063e 100755
--- a/cfgov/agreements/jinja2/agreements/search.html
+++ b/cfgov/agreements/jinja2/agreements/search.html
@@ -11,7 +11,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement database</h1>
     </div>
     <div class="block">
@@ -54,41 +54,41 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     aria-label="Pagination">
 
                 {% if page.has_previous() %}
-                <a class="a-btn m-pagination_btn-prev"
+                <a class="a-btn m-pagination__btn-prev"
                     href="?page={{ page.previous_page_number() }}#ccagrsearch">
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-prev" disabled>
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                <a class="a-btn m-pagination__btn-prev" disabled>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% endif %}
 
                 {% if page.has_next() %}
-                <a class="a-btn m-pagination_btn-next"
+                <a class="a-btn m-pagination__btn-next"
                     href="?page={{ page.next_page_number() }}#ccagrsearch">
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-next" disabled>
+                <a class="a-btn m-pagination__btn-next" disabled>
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% endif %}
 
-                <form class="m-pagination_form"
+                <form class="m-pagination__form"
                         action="#ccagrsearch">
-                    <label class="m-pagination_label"
-                            for="m-pagination_current-page">
+                    <label class="m-pagination__label"
+                            for="m-pagination__current-page">
                         Page
                         <span class="u-visually-hidden">
                             number {{ page.number }} out
                         </span>
-                        <input class="m-pagination_current-page"
-                                id="m-pagination_current-page"
+                        <input class="m-pagination__current-page"
+                                id="m-pagination__current-page"
                                 name="page"
                                 type="number"
                                 min="1"
@@ -100,8 +100,8 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     </label>
                     <button class="a-btn
                                     a-btn__link
-                                    m-pagination_btn-submit"
-                            id="m-pagination_btn-submit"
+                                    m-pagination__btn-submit"
+                            id="m-pagination__btn-submit"
                             type="submit">Go</button>
                 </form>
             </nav>
@@ -115,10 +115,10 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <div class="m-related-links">
             <header class="m-slug-header">
-                <h2 id="issuer-select" class="m-slug-header_heading">
+                <h2 id="issuer-select" class="m-slug-header__heading">
                     Search again
                 </h2>
             </header>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
index eda4aa1c062..8d561541a75 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
@@ -1,6 +1,6 @@
 <div class="block">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ disclaimer.sidefoot_heading }}
         </h2>
     </header>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
index 1a6d86b532e..bb19170c380 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
@@ -22,8 +22,8 @@
 
 {% block content_main %}
     <div class="block
-                block__flush-top
-                block__sub">
+                block--flush-top
+                block--sub">
         {% if last_edited %}
             <time datetime='{{ last_edited }}' class="answer-edited-date">{{ _('last reviewed') }}: {{ dt.format_date(last_edited) }}</time>
         {% endif %}
@@ -35,7 +35,7 @@ <h1>
         {{ translation_links.render() }}
     </div>
     <div class="block
-                block__flush-top">
+                block--flush-top">
 
         {% if page.short_answer %}
             <div class="lead-paragraph">
@@ -44,19 +44,19 @@ <h1>
         {% endif %}
 
         {% if page.notification %}
-            <div class="block block__sub">
+            <div class="block block--sub">
                 {{ page.notification }}
             </div>
         {% endif %}
 
-        <div class="block block__sub">
+        <div class="block block--sub">
 
             <div class="o-summary o-summary__mobile">
-                <div class="o-summary_content answer-text">
+                <div class="o-summary__content answer-text">
                     {% include_block page.answer_content %}
                 </div>
 
-                <button class="o-summary_btn u-hidden">
+                <button class="o-summary__btn u-hidden">
                     {{ _('Read full answer') }}
                     {{ svg_icon('plus-round') }}
                 </button>
@@ -65,19 +65,19 @@ <h1>
             <div class="block related-questions">
                 <h2>{{ _('Don\'t see what you\'re looking for?') }}</h2>
                 {% if related_questions %}
-                <div class="block block__sub">
+                <div class="block block--sub">
                     <h3>{{ _('Browse related questions') }} </h3>
                     <ul class="m-list m-list__unstyled m-list__links">
                         {% for question in related_questions %}
-                        <li class="m-list_item">
-                            <a href="{{ question.url }}" class="m-list_link">
+                        <li class="m-list__item">
+                            <a href="{{ question.url }}" class="m-list__link">
                                 {{ question.question | safe }}
                             </a>
                         </li>
                         {% endfor %}
                         {% if portal_page %}
-                        <li class="m-list_item m-list_item__last">
-                            <a href="{{ portal_page.url }}" class="m-list_link">
+                        <li class="m-list__item m-list__item__last">
+                            <a href="{{ portal_page.url }}" class="m-list__link">
                                 <b>
                                     {{ _('Learn more about') }}
                                     {{ portal_page.portal_topic.title(page.language) | lower }}
@@ -88,7 +88,7 @@ <h3>{{ _('Browse related questions') }} </h3>
                     </ul>
                 </div>
                 {% endif %}
-                <div class="block block__sub">
+                <div class="block block--sub">
                     {{ ask_search.render( language=page.language ) }}
                 </div>
             </div>
@@ -100,7 +100,7 @@ <h3>{{ _('Browse related questions') }} </h3>
 {% block content_sidebar scoped  %}
     {% if about_us %}
         <div class="block
-                    block__flush-top
+                    block--flush-top
                     about-us-text">
             {{ about_us.text | richtext }}
         </div>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
index b17c2a28020..9dda3d169ec 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
@@ -14,10 +14,10 @@
 
 {% block content_main %}
     <div class="block
-                block__flush-top">
+                block--flush-top">
         <h1>{{ _('Search our library of answers') }}</h1>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
         {{ ask_search.render( ask_query=tag or page.query, language=page.language, show_label=False, autocomplete=False, max_length=1024 ) }}
         </div>
 
@@ -35,7 +35,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
 
                 <div>
                 {% for question in results %}
@@ -47,7 +47,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
                 </div>
 
-                <div class="block block__sub">
+                <div class="block block--sub">
                     {{ pagination.render(
                         paginator.num_pages,
                         current_page | int,
@@ -62,7 +62,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
                 <div data-gtm_ask-no-results="true">
                     <h3 class="results-header">
                         {{ _('No results found for') }} “{{ tag or page.query }}”
@@ -79,7 +79,7 @@ <h3 class="results-header">
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
                 <h4>
                     {{ _('Please enter a search term in the box above.') }}
                 </h4>
@@ -92,7 +92,7 @@ <h4>
 
 {% block content_sidebar scoped -%}
     {% if about_us %}
-        <div class="block block__flush-top about-us-text">
+        <div class="block block--flush-top about-us-text">
             {{ about_us.text | richtext }}
         </div>
     {% endif %}
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
index fae467d9006..3517f17c7f8 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
@@ -21,12 +21,12 @@
 {% endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
 
         {% import 'v1/includes/molecules/translation-links.html' as translation_links with context %}
-        {{ translation_links.render(modifier_classes='block__flush-top') }}
+        {{ translation_links.render(modifier_classes='block--flush-top') }}
 
-        <section class="ask-search block__sub block__flush-top">
+        <section class="ask-search block--sub block--flush-top">
             {{ ask_search.render( language=page.language, is_subsection=False ) }}
         </section>
 
@@ -37,7 +37,7 @@
 
 {% block content_sidebar scoped -%}
     {% if about_us %}
-        <div class="block block__flush-top about-us-text">
+        <div class="block block--flush-top about-us-text">
             {{ about_us.text | richtext }}
         </div>
     {% endif %}
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
index 490c4894ae4..45aa7b7a645 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
@@ -18,7 +18,7 @@ <h1>
     {% if page.glossary_terms %}
         <dl class="terms" itemscope itemtype="https://schema.org/DefinedTermSet">
         {% for term in page.glossary_terms %}
-            <div class="term {{'' if loop.index == 1 else 'block block__border-top block__padded-top'}}"
+            <div class="term {{'' if loop.index == 1 else 'block block--border-top block--padded-top'}}"
                  id="{{ term.anchor(page.language) }}"
                  itemscope
                  itemtype="https://schema.org/DefinedTerm">
@@ -74,12 +74,12 @@ <h1>
             </article>
             {% endfor %}
 
-            <div class="block block__sub">
+            <div class="block block--sub">
                 {{ pagination.render( paginator.num_pages, current_page, '', 0 ) }}
             </div>
         </section>
         {% if not page.portal_category %}
-        <div class="block block__flush-bottom block__padded-bottom">
+        <div class="block block--flush-bottom block--padded-bottom">
             <p class="ask-search-link h4">
                 <span>{{ _("Don't see what you're looking for?") }}</span>
                 <a href="{{ _('/ask-cfpb/search/') }}">{{ _('Search our full library of answers') }}</a>
diff --git a/cfgov/ask_cfpb/tests/test_blocks.py b/cfgov/ask_cfpb/tests/test_blocks.py
index 2b5567d2554..c0832e1a422 100644
--- a/cfgov/ask_cfpb/tests/test_blocks.py
+++ b/cfgov/ask_cfpb/tests/test_blocks.py
@@ -67,7 +67,7 @@ def test_how_to_block_renders_schema(self):
         expected_html = (
             "<div itemscope"
             '     itemtype="https://schema.org/HowTo"'
-            '     class="schema-block schema-block__how-to">'
+            '     class="schema-block schema-block--how-to">'
             '<h2 itemprop="name" class="schema-block_title" id="test-title">'
             "test title</h2>"  # noqa
             '<div itemprop="description" class="schema-block_description">'
@@ -101,7 +101,7 @@ def test_faq_block_renders_schema(self):
         }
         expected_html = (
             '<div itemscope="" itemtype="https://schema.org/FAQPage" '
-            'class="schema-block schema-block__faq">'
+            'class="schema-block schema-block--faq">'
             '<div itemprop="description" class="schema-block_description">'
             "test description"
             "</div>"
diff --git a/cfgov/data_research/jinja2/data_research/mortgage-performance-downloads.html b/cfgov/data_research/jinja2/data_research/mortgage-performance-downloads.html
index 0d674c70fb1..99079f88cf9 100644
--- a/cfgov/data_research/jinja2/data_research/mortgage-performance-downloads.html
+++ b/cfgov/data_research/jinja2/data_research/mortgage-performance-downloads.html
@@ -101,7 +101,7 @@ <h2>Archived versions</h2>
       <h4> Download archival data {{ from_month_formatted }}{{ '&ndash;' | safe }}{{ download_files[date]['thru_month'] }}</h4>
     </div>
 </div>
-<div class="block block__flush-top">
+<div class="block block--flush-top">
 <table class="o-table">
     <thead>
         <tr>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
index 180b2cee53a..ac10556760c 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
@@ -1,4 +1,4 @@
-<div class="block block__flush-top">
+<div class="block block--flush-top">
     <h3>About us</h3>
     <p>
         The Consumer Financial Protection Bureau (CFPB) is a 21st century agency
@@ -10,7 +10,7 @@ <h3>About us</h3>
 <div class="block">
     <div class="m-related-links">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 About the Voluntary Diversity Self-Assessment
             </h2>
         </header>
@@ -49,8 +49,8 @@ <h2 class="m-slug-header_heading">
             </li>
         </ul>
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a href="/about-us/diversity-and-inclusion/self-assessment-regulated-entities/" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/diversity-and-inclusion/self-assessment-regulated-entities/" class="m-list__link">
                     Learn more about the Voluntary Diversity Self-Assessment
                 </a>
             </li>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
index 549f96261a2..08a7cb38356 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
@@ -15,17 +15,17 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Voluntary diversity assessment onboarding form</h1>
     </div>
     <div class="block">
         <div class="m-notification m-notification__visible m-notification__success">
             {{ svg_icon('approved-round') }}
-            <div class="m-notification_content">
-                <div class="m-notification_message">
+            <div class="m-notification__content">
+                <div class="m-notification__message">
                     Your voluntary diversity assessment onboarding has been submitted
                 </div>
-                <p class="m-notification_explanation">
+                <p class="m-notification__explanation">
                     We’ll use the information you submitted to give you access to the Inclusivity Portal.
                     You’ll receive an email when your portal account has been created with instructions for logging in.
                     If you have any questions, please contact the Office of Minority and Women Inclusion’s Diversity Assessments Support Team at
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
index 279d7412294..40f5556424f 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
@@ -23,7 +23,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>
             Privacy Act statement
         </h1>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
index dfc95a34927..0fe80847fa1 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
@@ -18,7 +18,7 @@
 {%- endblock %}
 
 {% block content_main -%}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Voluntary diversity assessment onboarding form</h1>
         <div class="lead-paragraph">
             <p>
@@ -57,7 +57,7 @@ <h2>Institution information</h2>
                 Please provide your institution’s name, headquarters location, and tax identification number.
             </p>
             <div class="o-well u-mb30">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.institution_name.id_for_label }}">
@@ -66,7 +66,7 @@ <h2>Institution information</h2>
                         {{ form.institution_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.institution_address.id_for_label }}">
@@ -75,9 +75,9 @@ <h2>Institution information</h2>
                         {{ form.institution_address }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="content-l">
-                        <div class="content-l_col content-l_col-1-2">
+                        <div class="content-l__col content-l__col-1-2">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_city.id_for_label }}">
@@ -86,7 +86,7 @@ <h2>Institution information</h2>
                                 {{ form.institution_city }}
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-4">
+                        <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_state.id_for_label }}">
@@ -95,7 +95,7 @@ <h2>Institution information</h2>
                                 {{ form.institution_state }}
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-4">
+                        <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_zip.id_for_label }}">
@@ -106,7 +106,7 @@ <h2>Institution information</h2>
                         </div>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.tax_id.id_for_label }}">
@@ -121,7 +121,7 @@ <h2>Contact information</h2>
                 Please provide the name and contact information for the individual who will be your institution’s diversity and inclusion point of contact.
             </p>
             <div class="o-well u-mb30">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_name.id_for_label }}">
@@ -130,7 +130,7 @@ <h2>Contact information</h2>
                         {{ form.contact_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_title.id_for_label }}">
@@ -139,7 +139,7 @@ <h2>Contact information</h2>
                         {{ form.contact_title }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_email.id_for_label }}">
@@ -148,7 +148,7 @@ <h2>Contact information</h2>
                         {{ form.contact_email }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_phone.id_for_label }}">
@@ -157,18 +157,18 @@ <h2>Contact information</h2>
                         {{ form.contact_phone }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_phone_alt.id_for_label }}">
                             {{ form.contact_phone_alt.label }}
-                            <small class="a-label_helper">(optional)</small>
+                            <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.contact_phone_alt }}
                     </div>
                 </div>
             </div>
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <input class="a-btn"
                            type="submit"
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
index 1bad7b83ce4..684028c4f84 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
@@ -29,8 +29,8 @@ <h3 class="report-header o-fig_heading">
     {% if data_fields.count() > 3 %}
         <ul class="m-list m-list__links">
             {% for field in data_fields %}
-                <li class="m-list_item">
-                    <a class="m-list_link"
+                <li class="m-list__item">
+                    <a class="m-list__link"
                        href="#{{field.info.get('short_name', '')}}">
                             Field {{ field.info.get('field_number', '') }}: {{ field.info.get('title', '') }}
                     </a>
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
index 46553f1a311..4b9ecc29c5b 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
@@ -20,9 +20,9 @@
     {% endif %}
     <h1>{{ page.page_header }}</h1>
     <div class="lead-paragraph">{{ page.subheader }}</div>
-    <div class="block block__border-top u-fig-print-link">
+    <div class="block block--border-top u-fig-print-link">
       <a class="a-link a-link__icon" href="javascript:window.print()">
-          <span class="a-link_text">Print this guide</span>
+          <span class="a-link__text">Print this guide</span>
           {{ svg_icon('print') }}
       </a>
     </div>
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
index 39f82d3f5ee..96b53607ffc 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
@@ -40,19 +40,19 @@
     <main class="u-layout-grid u-layout-grid__1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
         {% block hero -%}{%- endblock %}
         {% block pre_content scoped -%}
             {% include 'v1/layouts/_breadcrumbs.html' %}
         {%- endblock %}
         {% block body_content scoped %}
-        <aside class="u-layout-grid_secondary-nav u-layout-grid_secondary-nav__sticky">
+        <aside class="u-layout-grid__secondary-nav u-layout-grid__secondary-nav__sticky">
             {% import 'v1/includes/organisms/secondary-nav-fig.html' as secondary_nav with context %}
             {{ secondary_nav.render(version_status, effective_start_date, effective_end_date) }}
         </aside>
-        <div class="u-layout-grid_main
+        <div class="u-layout-grid__main
                     {% block content_main_modifiers -%}{%- endblock %}"
-                id="content_main">
+                id="content__main">
             {% block content_main scoped -%}{%- endblock %}
         </div>
         {% endblock %}
diff --git a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
index ecad19baffe..f87f9ddc8a5 100644
--- a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
+++ b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
@@ -87,21 +87,21 @@
             o-expandable__form-explainer
             o-expandable__form-explainer-category-{{ category_index }}"
      id="{{ id }}">
-    <button class="o-expandable_header"
+    <button class="o-expandable__header"
             tabindex="0">
-        <span class="o-expandable_label">
+        <span class="o-expandable__label">
             {{ item.heading }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
-    <div class="o-expandable_content" tabindex="0">
+    <div class="o-expandable__content" tabindex="0">
         {{ item.body | safe }}
     </div>
 </div>
diff --git a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
index 4de9977a4bd..180ba647946 100644
--- a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
+++ b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
@@ -1,8 +1,8 @@
 {% macro _render_filter_fields(form) %}
-    <div class="content-l_col
-                content-l_col-1-2">
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+    <div class="content-l__col
+                content-l__col-1-2">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <div class="m-form-field m-form-field__select">
                     <label class="a-label a-label__heading" for="id_geo">
                         Geographic area
@@ -21,10 +21,10 @@
             </fieldset>
         </div>
     </div>
-    <div class="content-l_col
-                content-l_col-1">
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+    <div class="content-l__col
+                content-l__col-1">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <legend class="a-legend">
                     Records included
                 </legend>
@@ -34,11 +34,11 @@
                     <label class="a-label" for="{{ radio.id_for_label }}">
                         {{ radio.choice_label}}
                         {% if radio.data.value == 'first-lien-owner-occupied-1-4-family-records' %}
-                            <small class="a-label_helper">
+                            <small class="a-label__helper">
                                 Most people start with this option
                             </small>
                         {% elif radio.data.value == 'all-records' %}
-                            <small class="a-label_helper">
+                            <small class="a-label__helper">
                                 Includes applications, denials, originations, institution purchases
                             </small>
                         {% endif %}
@@ -47,8 +47,8 @@
                {% endfor %}
             </fieldset>
         </div>
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <legend class="a-legend">
                     Variable descriptions
                 </legend>
@@ -58,7 +58,7 @@
                       <label class="a-label" for="{{ radio.id_for_label }}">
                           {{ radio.choice_label }}
                           {% if radio.data.value == 'codes' %}
-                              <small class="a-label_helper">
+                              <small class="a-label__helper">
                                   Choose only if you're already familiar with the HMDA reporting codes
                               </small>
                           {% endif %}
@@ -74,8 +74,8 @@
     <form method="get" action=".">
         <div class="content-l">
             {{ _render_filter_fields(form) }}
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <input class="a-btn"
                        type="submit"
diff --git a/cfgov/housing_counselor/jinja2/housing_counselor/index.html b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
index 4864cc18614..1e062be2bfd 100644
--- a/cfgov/housing_counselor/jinja2/housing_counselor/index.html
+++ b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block content_main %}
-    <section class="block block__flush-top">
+    <section class="block block--flush-top">
         <div class="u-print-only">
             <!-- Show different content on print -->
             <img src="{{ static( 'img/logo_237x50@2x.png' ) }}"
@@ -41,13 +41,13 @@ <h1>Housing counselors near you</h1>
         </div><!-- end .hud_hca_api_print-header -->
 
         <div class="block
-                    block__flush-top
+                    block--flush-top
                     u-screen-only
                     o-sidebar-breakout">
             <div class="content-l">
-                <div class="o-sidebar-breakout_col
-                            content-l_col
-                            content-l_col-2-3">
+                <div class="o-sidebar-breakout__col
+                            content-l__col
+                            content-l__col-2-3">
                     <h1>Find a housing counselor</h1>
                     <p>
                         Housing counselors throughout the country can
@@ -62,7 +62,7 @@ <h1>Find a housing counselor</h1>
                         no cost to you. There is also a
                         <a class="a-link a-link__icon"
                             href="https://www.hud.gov/program_offices/housing/sfh/hcc/hcc_home">
-                            <span class="a-link_text">list of nationwide HUD-approved counseling agencies</span></a>.
+                            <span class="a-link__text">list of nationwide HUD-approved counseling agencies</span></a>.
                     </p>
                     <p>
                         Using the search box below, you can find one
@@ -72,16 +72,16 @@ <h1>Find a housing counselor</h1>
                         each agency.</strong>
                     </p>
                 </div>
-                <aside class="o-sidebar-breakout_col
-                                content-l_col
-                                content-l_col-1-3">
+                <aside class="o-sidebar-breakout__col
+                                content-l__col
+                                content-l__col-1-3">
                     <header class="m-slug-header">
-                        <h2 class="m-slug-header_heading">
+                        <h2 class="m-slug-header__heading">
                             Coronavirus affecting your mortgage or housing?
                         </h2>
                     </header>
-                    <div class="o-sidebar-breakout_text-container">
-                        <div class="o-sidebar-breakout_text-body">
+                    <div class="o-sidebar-breakout__text-container">
+                        <div class="o-sidebar-breakout__text-body">
                             <p>
                                 We have resources from multiple federal agencies to help homeowners and renters understand options for relief and protection in light of the coronavirus emergency.
                             </p>
@@ -96,7 +96,7 @@ <h2 class="m-slug-header_heading">
             </div>
         </div>
 
-        <div class="block block__border u-screen-only">
+        <div class="block block--border u-screen-only">
             {#
                 Set the `no-js` class on page load,
                 which is reverted if and when the map is
@@ -120,11 +120,11 @@ <h2 class="m-slug-header_heading">
                                                 m-notification__error
                                                 m-notification__visible">
                                         {{ svg_icon('warning-round') }}
-                                        <div class="m-notification_content" role="alert">
-                                            <div class="m-notification_message">
+                                        <div class="m-notification__content" role="alert">
+                                            <div class="m-notification__message">
                                                 {{ error_message }}
                                             </div>
-                                            <div class="m-notification_explanation">
+                                            <div class="m-notification__explanation">
                                                 {{ error_help }}
                                             </div>
                                         </div>
@@ -145,12 +145,12 @@ <h2 class="m-slug-header_heading">
                                     data-cy="btn-fahc-submit">
                                 Find a counselor
                             </button>
-                            <div class="m-form-field-with-button_info">
+                            <div class="m-form-field-with-button__info">
                                 <p>
                                     This tool is powered by
                                     <a class="a-link a-link__icon"
                                         href="https://data.hud.gov/housing_counseling.html">
-                                        <span class="a-link_text">HUD's</span>
+                                        <span class="a-link__text">HUD's</span>
                                         {{ svg_icon('external-link') }}</a>
                                     official list of housing counselors.
                                 </p>
@@ -164,8 +164,8 @@ <h2 class="m-slug-header_heading">
 
                     {% if zipcode and zipcode_valid %}
                     <div class="skip-nav">
-                        <a class="skip-nav_link
-                                    skip-nav_link__flush-left"
+                        <a class="skip-nav__link
+                                    skip-nav__link--flush-left"
                             href="#hud_results-list_container">
                             Skip to results
                         </a>
@@ -192,22 +192,22 @@ <h2 class="m-slug-header_heading">
                 <ul class="m-list
                             m-list__horizontal
                             hud_hca_api_results_actions">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a class="a-link
                                     a-link__icon"
                             id="hud_print-page-link"
                             href="#">
-                            <span class="a-link_text">Print list</span>
+                            <span class="a-link__text">Print list</span>
                             {{ svg_icon('print') }}
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a class="a-link a-link__icon"
                             id="generate-pdf-link"
                             href="{{ pdf_url }}"
                             target="_blank"
                             rel="noopener noreferrer">
-                            <span class="a-link_text">Save list as <abbr title="Portable Document Format">PDF</abbr></span>
+                            <span class="a-link__text">Save list as <abbr title="Portable Document Format">PDF</abbr></span>
                             {{ svg_icon('download') }}
                         </a>
                     </li>
@@ -244,7 +244,7 @@ <h2 class="h4">
                                         {% if counselor.weburl %}
                                         <a class="a-link a-link__icon"
                                             href="{{ counselor.weburl }}">
-                                            <span class="a-link_text"><b itemprop="name">{{ counselor.nme }}</b></span>
+                                            <span class="a-link__text"><b itemprop="name">{{ counselor.nme }}</b></span>
                                             {{ svg_icon('external-link') }}
                                         </a>
                                         {% else %}
@@ -272,7 +272,7 @@ <h2 class="h4">
                                         <a class="a-link a-link__icon"
                                             href="{{ counselor.weburl }}"
                                             itemprop="url">
-                                            <span class="a-link_text">{{ counselor.weburl }}</span>
+                                            <span class="a-link__text">{{ counselor.weburl }}</span>
                                             {{ svg_icon('external-link') }}
                                         </a>
                                         </dd>
diff --git a/cfgov/jinja2/govdelivery-subscribe/error/index.html b/cfgov/jinja2/govdelivery-subscribe/error/index.html
index 808399b6ca1..294697bbe8c 100644
--- a/cfgov/jinja2/govdelivery-subscribe/error/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/error/index.html
@@ -9,7 +9,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>{{ svg_icon('error-round') }} Please try again.</h1>
         <p>
             Your subscription was not successfully received.<br>
diff --git a/cfgov/jinja2/govdelivery-subscribe/server-error/index.html b/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
index 2fd33a2ccd2..c7a20bcab03 100644
--- a/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
@@ -9,7 +9,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>{{ svg_icon('error-round') }} Please try again later.</h1>
         <p>
             Your subscription to GovDelivery was not successful because of a server error, please try again later.
diff --git a/cfgov/jinja2/govdelivery-subscribe/success/index.html b/cfgov/jinja2/govdelivery-subscribe/success/index.html
index 4bf08c14159..95a50aefca1 100644
--- a/cfgov/jinja2/govdelivery-subscribe/success/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/success/index.html
@@ -9,7 +9,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>{{ svg_icon('approved-round') }} Success!</h1>
         <p>Your subscription was successfully received.</p>
     </div>
diff --git a/cfgov/jinja2/know-before-you-owe/compare/index.html b/cfgov/jinja2/know-before-you-owe/compare/index.html
index e684a50b8b1..6ae7baf22a3 100644
--- a/cfgov/jinja2/know-before-you-owe/compare/index.html
+++ b/cfgov/jinja2/know-before-you-owe/compare/index.html
@@ -20,7 +20,7 @@
 
 {% block content_main %}
 <article>
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <header>
             <h1>How we improved the disclosures</h1>
         </header>
@@ -35,44 +35,44 @@ <h1>How we improved the disclosures</h1>
         </p>
 
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-testing.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our qualitative testing of the new disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_report_tila-respa_testing-spanish-refinancing.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our post-proposal qualitative testing of the new Spanish and refinance disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_study_tila-respa_disclosure-comparison.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our quantitative testing of the new disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
-                          m-list_link"
+                          m-list__link"
                    href="/regulations/integrated-mortgage-disclosures-under-the-real-estate-settlement-procedures-act-regulation-x-and-the-truth-in-lending-act-regulation-z/">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a detailed summary of the final rule
                     </span>
                 </a>
@@ -162,13 +162,13 @@ <h3>Closing Disclosure</h3>
         </div>
     </div>
 </article>
-<section class="u-layout-grid_breakout kbyo-footer">
+<section class="u-layout-grid__breakout kbyo-footer">
     <div class="wrapper wrapper__match-content">
         <div class="content-l">
-          <div class="content-l_col
-                      content-l_col-1-2">
+          <div class="content-l__col
+                      content-l__col-1-2">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Legal disclaimer
                 </h2>
             </header>
diff --git a/cfgov/jinja2/know-before-you-owe/index.html b/cfgov/jinja2/know-before-you-owe/index.html
index b5712c09a6c..bb126d5bd82 100644
--- a/cfgov/jinja2/know-before-you-owe/index.html
+++ b/cfgov/jinja2/know-before-you-owe/index.html
@@ -13,7 +13,7 @@
         background-color: #d6e5e4 !important;
     }
 
-    .m-hero_image {
+    .m-hero__image {
         background-image: url('{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}');
         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}',
@@ -22,7 +22,7 @@
     }
 
     @media screen and (min-width: 37.5625em) {
-        .m-hero_image {
+        .m-hero__image {
             background-image: url('{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}');
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}',
@@ -32,7 +32,7 @@
     }
 
     @media screen and (max-width: 56.250em) {
-        .kbyo-tools .content-l_col-1-2 {
+        .kbyo-tools .content-l__col-1-2 {
             width: 100%;
             margin-bottom: 30px;
         }
@@ -49,27 +49,27 @@
 
 {% block content_intro %}
 <section class="m-hero">
-    <div class="m-hero_wrapper wrapper">
-        <div class="m-hero_text">
-            <h1 class="m-hero_heading">Know Before You Owe | Mortgages</h1>
-            <div class="m-hero_subhead">
+    <div class="m-hero__wrapper wrapper">
+        <div class="m-hero__text">
+            <h1 class="m-hero__heading">Know Before You Owe | Mortgages</h1>
+            <div class="m-hero__subhead">
                 <p>The CFPB’s mortgage initiative is designed to help consumers understand their loan options, shop for the mortgage that’s best for them, and avoid costly surprises at the closing table.
                 </p>
             </div>
         </div>
-        <div class="m-hero_image-wrapper">
-            <div class="m-hero_image"></div>
+        <div class="m-hero__image-wrapper">
+            <div class="m-hero__image"></div>
         </div>
     </div>
 </section>
 {% endblock %}
 
 {% block content_main %}
-    <div class="content-l block block__flush-top">
-        <div class="content-l_col
-                    content-l_col-1-2">
+    <div class="content-l block block--flush-top">
+        <div class="content-l__col
+                    content-l__col-1-2">
             <div class="m-info-unit">
-                <div class="m-info-unit_content">
+                <div class="m-info-unit__content">
                     {{- video_player.render(
                         "AwZERLDHJf0",
                         "center",
@@ -79,10 +79,10 @@ <h1 class="m-hero_heading">Know Before You Owe | Mortgages</h1>
                 </div>
             </div>
         </div>
-        <div class="content-l_col
-                    content-l_col-1-2">
+        <div class="content-l__col
+                    content-l__col-1-2">
             <div class="m-info-unit">
-                <div class="m-info-unit_content">
+                <div class="m-info-unit__content">
                     <h2>Making the mortgage process easier</h2>
                     <p>
                         The Know Before You Owe mortgage disclosure rule replaces four disclosure forms with two new ones, the Loan Estimate and the Closing Disclosure. The new forms are easier to understand and easier to use. The rule also requires that you get three business days to review your Closing Disclosure and ask questions before you close on a mortgage.
@@ -91,12 +91,12 @@ <h2>Making the mortgage process easier</h2>
             </div>
         </div>
     </div>
-    <div class="o-info-unit-group block block__border-top block__padded-top">
+    <div class="o-info-unit-group block block--border-top block--padded-top">
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="kbyo-tools__intro">
                             <h2>Tools and resources</h2>
                             <p>Mortgages can be complex and confusing. To supplement the rule, we’ve created several resources to help you as you navigate the mortgage process. </p>
@@ -106,21 +106,21 @@ <h2>Tools and resources</h2>
             </div>
         </div>
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/loan-estimate_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Sample Loan Estimate</h3>
                                 <p>The Loan Estimate makes it easier to shop around and compare loan offers from multiple lenders. Our interactive sample form will help you double check the details and get definitions for terms used on the Loan Estimate.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/loan-estimate/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/loan-estimate/">
                                         Explore a sample Loan Estimate
                                         </a>
                                     </li>
@@ -130,21 +130,21 @@ <h3>Sample Loan Estimate</h3>
                     </div>
                 </div>
             </div>
-             <div class="content-l_col
-                        content-l_col-1-2">
+             <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/closing-disclosure_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Sample Closing Disclosure</h3>
                                 <p>The Closing Disclosure helps you avoid costly surprises at the closing table. Use our interactive sample form to help you compare your Loan Estimate to the Closing Disclosure and make sure that you understand the reason for any differences.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/closing-disclosure/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/closing-disclosure/">
                                         Explore a sample Closing Disclosure
                                         </a>
                                     </li>
@@ -156,21 +156,21 @@ <h3>Sample Closing Disclosure</h3>
             </div>
         </div>
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/owning-a-home_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Buying a House</h3>
                                 <p>This suite of tools and resources guides you through the process of getting a mortgage. It will help you explore interest rates in your area, understand loan options, and prepare you for closing.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/">
                                         Visit Buying a House
                                         </a>
                                     </li>
@@ -180,25 +180,25 @@ <h3>Buying a House</h3>
                     </div>
                 </div>
             </div>
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/home-loan-toolkit_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Your Home Loan Toolkit</h3>
                                 <p>This booklet takes you from budgeting to closing with worksheets, checklists, and conversation starters. You’ll get a copy when you apply for a home purchase mortgage, but you can also download a copy now.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
+                                    <li class="m-list__item">
                                         <a class="a-link
                                                   a-link__icon
-                                                  m-list_link"
+                                                  m-list__link"
                                            href="https://www.consumerfinance.gov/f/201503_cfpb_your-home-loan-toolkit-web.pdf">
-                                            <span class="a-link_text">Download the toolkit</span>
+                                            <span class="a-link__text">Download the toolkit</span>
                                             {{ svg_icon('download') }}
                                         </a>
                                     </li>
@@ -210,14 +210,14 @@ <h3>Your Home Loan Toolkit</h3>
             </div>
         </div>
     </div>
-    <div class="u-layout-grid_breakout kbyo-professional-resources">
+    <div class="u-layout-grid__breakout kbyo-professional-resources">
         <div class="wrapper wrapper__match-content">
             <div class="o-info-unit-group">
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                         <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="kbyo-tools__intro">
                                     <h2>Resources for professionals</h2>
                                     <p>Mortgages can be complex and confusing. To supplement the rule, we’ve created several resources to help you as you navigate the mortgage process.</p>
@@ -227,17 +227,17 @@ <h2>Resources for professionals</h2>
                     </div>
                 </div>
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Mortgage professionals</h3>
                                         <p>Since 2013, we have been working with lenders, creditors, compliance officers, software companies, and other groups to prepare for implementation of the rule.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link"
+                                            <li class="m-list__item">
+                                                <a class="m-list__link"
                                                 href="/regulatory-implementation/tila-respa/">
                                                     Visit the Regulatory Implementation page
                                                 </a>
@@ -248,17 +248,17 @@ <h3>Mortgage professionals</h3>
                             </div>
                         </div>
                     </div>
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Housing counselors</h3>
                                         <p>Assist consumers as they navigate through the new mortgage process. Educate your clients on the new disclosures and timing requirements with our tools and resources.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link" href="https://www.youtube.com/watch?v=ZS49Mmym6Ko">
+                                            <li class="m-list__item">
+                                                <a class="m-list__link" href="https://www.youtube.com/watch?v=ZS49Mmym6Ko">
                                                 View a webinar on the rule
                                                 </a>
                                             </li>
@@ -270,17 +270,17 @@ <h3>Housing counselors</h3>
                     </div>
                 </div>
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Media</h3>
                                         <p>We have created resources to help you understand and tell the story of the CFPB’s Know Before You Owe mortgage initiative, which has been a focal point of the Bureau since its start.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link"
+                                            <li class="m-list__item">
+                                                <a class="m-list__link"
                                                 href="/about-us/newsroom/cfpb-releases-new-owning-a-home-tools-to-help-consumers-shop-for-a-mortgage/">
                                                 Read the press release and download a press kit
                                                 </a>
@@ -298,10 +298,10 @@ <h3>Media</h3>
     <div class="block">
         <div class="o-info-unit-group">
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                     <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="kbyo-tools__intro">
                                 <h2>Creating new mortgage disclosures</h2>
                             </div>
@@ -310,18 +310,18 @@ <h2>Creating new mortgage disclosures</h2>
                 </div>
             </div>
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                 <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="m-info-unit">
-                                <div class="m-info-unit_content">
+                                <div class="m-info-unit__content">
                                     <h3>Why we created new disclosures</h3>
                                     <p>The Consumer Financial Protection Bureau (CFPB) is a government agency built to protect consumers. We help keep banks and other financial service providers consumers depend on every day operating fairly.</p>
                                     <p>After the housing crisis, Congress directed us to combine existing federal mortgage disclosures: the initial Truth–in-Lending disclosure with the Good Faith Estimate and the final Truth-in-Lending disclosure with the HUD-1 Settlement Statement. These disclosures had overlapping information and complicated terms, which made them hard for borrowers to understand and for lenders to explain.</p>
                                     <ul class="m-list m-list__links">
-                                        <li class="m-list_item">
-                                            <a class="m-list_link"
+                                        <li class="m-list__item">
+                                            <a class="m-list__link"
                                             href="/know-before-you-owe/compare/">
                                                 Compare the new disclosures to the old ones
                                             </a>
@@ -332,19 +332,19 @@ <h3>Why we created new disclosures</h3>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                 <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="m-info-unit">
-                                <div class="m-info-unit_content">
+                                <div class="m-info-unit__content">
                                     <h3>How we created new disclosures</h3>
                                     <p>We involved the people who will actually use the new forms—consumers, lenders, mortgage brokers, settlement agents—in helping to combine and improve them. After several rounds of qualitative testing, we found that users were able to see the difference between prices on their Loan Estimate to those quoted on the Closing Disclosure and they were able to identify costs they could shop for, among other findings.
                                     </p>
                                     <p>To be sure that the Loan Estimate and the Closing Disclosure are easier to use and understand than the existing forms, we tested them in a quantitative validation study. Participants provided more correct answers about a sample mortgage using the new forms than they did using the previous forms.</p>
                                     <ul class="m-list m-list__links">
-                                        <li class="m-list_item">
-                                            <a class="m-list_link" href="/know-before-you-owe/compare/">
+                                        <li class="m-list__item">
+                                            <a class="m-list__link" href="/know-before-you-owe/compare/">
                                             Review testing results
                                             </a>
                                         </li>
@@ -357,10 +357,10 @@ <h3>How we created new disclosures</h3>
             </div>
         </div>
     </div>
-    <div class="block block__border-top block__padded-top">
+    <div class="block block--border-top block--padded-top">
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <h2>Timeline</h2>
                 <p>
                     <a class="styled-link" href="/know-before-you-owe/timeline/">
@@ -371,77 +371,77 @@ <h2>Timeline</h2>
             </div>
         </div>
     </div>
-    <section class="u-layout-grid_breakout kbyo-footer">
+    <section class="u-layout-grid__breakout kbyo-footer">
         <div class="wrapper wrapper__match-content">
             <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Reports
                     </h2>
                 </header>
                 <ul class="m-list m-list__links">
-                <li class="m-list_item">
-                    <a class="a-m-list_link" href="/reports/leveraging-technology-to-empower-mortgage-consumers-at-closing/">
-                    <span class="a-link_text">Leveraging technology to empower mortgage consumers at closing</span>
+                <li class="m-list__item">
+                    <a class="a-m-list__link" href="/reports/leveraging-technology-to-empower-mortgage-consumers-at-closing/">
+                    <span class="a-link__text">Leveraging technology to empower mortgage consumers at closing</span>
                     </a>
                 </li>
-                <li class="m-list_item">
-                    <a class="m-list_link" href="/reports/consumers-mortgage-shopping-experience/">
-                    <span class="a-link_text">Consumers’ mortgage shopping experience</span>
+                <li class="m-list__item">
+                    <a class="m-list__link" href="/reports/consumers-mortgage-shopping-experience/">
+                    <span class="a-link__text">Consumers’ mortgage shopping experience</span>
                     </a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-sbrefa-feedback.pdf">
-                        <span class="a-link_text">A report on our discussions with small businesses</span>
+                        <span class="a-link__text">A report on our discussions with small businesses</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
-                <li class="m-list_item">
-                    <a class="m-list_link" href="/know-before-you-owe/compare/">
-                    <span class="a-link_text">Learn more about the research we did to develop the new forms</span>
+                <li class="m-list__item">
+                    <a class="m-list__link" href="/know-before-you-owe/compare/">
+                    <span class="a-link__text">Learn more about the research we did to develop the new forms</span>
                     </a>
                 </li>
                 </ul>
             </div><!-- /.kbyo-footer__col -->
 
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Related links
                     </h2>
                 </header>
                 <ul class="m-list m-list__links">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_kbyo_loan-estimate_blank.pdf">
-                        <span class="a-link_text">Download a blank Loan Estimate form</span>
+                        <span class="a-link__text">Download a blank Loan Estimate form</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                         href="https://files.consumerfinance.gov/f/201311_cfpb_kbyo_closing-disclosure_blank.pdf">
-                        <span class="a-link_text">Download a blank Closing Disclosure form</span>
+                        <span class="a-link__text">Download a blank Closing Disclosure form</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
                 </ul>
             </div><!-- /.kbyo-footer__col -->
-            <div class="content-l_col
-                        content-l_col-1-2
+            <div class="content-l__col
+                        content-l__col-1-2
                         u-mt45">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Legal disclaimer
                     </h2>
                 </header>
diff --git a/cfgov/jinja2/know-before-you-owe/timeline/index.html b/cfgov/jinja2/know-before-you-owe/timeline/index.html
index 40bc2d3d5fb..8430ad90b6f 100644
--- a/cfgov/jinja2/know-before-you-owe/timeline/index.html
+++ b/cfgov/jinja2/know-before-you-owe/timeline/index.html
@@ -20,7 +20,7 @@
 
 {% block content_main %}
     <article class="kbyo-timeline-page">
-        <div class="block block__flush-top">
+        <div class="block block--flush-top">
             <h1>Timeline</h1>
             <p>
                 Here’s a timeline of how we created the Loan Estimate
@@ -31,7 +31,7 @@ <h1>Timeline</h1>
                 use them.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event0" class="kbyo-timeline-page__date">July 21, 2010</span>
             </p>
@@ -40,19 +40,19 @@ <h2>The Dodd-Frank Wall Street Reform and Consumer Protection Act is signed into
                  <a class="a-link
                            a-link__icon"
                     href="https://www.gpo.gov/fdsys/pkg/BILLS-111hr4173enr/pdf/BILLS-111hr4173enr.pdf">
-                    <span class="a-link_text">new law</span>
+                    <span class="a-link__text">new law</span>
                     {{ svg_icon('download') }}
                 </a> required the CFPB to combine the Truth in Lending and Real Estate Settlement Procedures Act disclosures.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event1" class="kbyo-timeline-page__date">December 6, 2010</span>
             </p>
             <h2>The Treasury Department hosts a mortgage disclosure symposium.</h2>
             <p> The event brought together consumer advocates, industry, marketers, and more to discuss CFPB implementation of the combined disclosures. </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event2" class="kbyo-timeline-page__date">February 21, 2011</span>
             </p>
@@ -60,14 +60,14 @@ <h2>Design begins.</h2>
             <p> Starting with the legal requirements and the consumer in mind, we began sketching prototype forms for testing.</p>
             <p> During this process, the team discussed preliminary issues and ideas about mortgage disclosures. This session set the context for the disclosures and was a starting point for their development. The team continued to develop these issues and ideas over more than a year during the development process. </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event3" class="kbyo-timeline-page__date">May 18, 2011</span>
             </p>
             <h2>Know Before You Owe opens online.</h2>
             <p> We posted the first two prototype loan estimates. We asked consumers and industry to examine them and tell us what worked and what didn’t. We repeated this process for several future rounds. Over the course of the next ten months, people submitted more than 27,000 comments. </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event4" class="kbyo-timeline-page__date">May 19, 2011 – May 24, 2011</span>
             </p>
@@ -78,19 +78,19 @@ <h3 class="h5">Disclosures tested:</h3>
                  <a class="a-link
                            a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round1-Ficus-ANL.pdf">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round1-Pecan-ANL.pdf">
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event5" class="kbyo-timeline-page__date">June 27, 2011 – July 1, 2011</span>
             </p>
@@ -101,19 +101,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201106_cfpb_mortgage-disclosure-prototype-Round2-Dogwood.pdf">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201106_cfpb_mortgage-disclosure-prototype-Round2-Redbud.pdf" class="icon-link icon-link__download">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event6" class="kbyo-timeline-page__date">August 1, 2011 – August 3, 2011</span>
             </p>
@@ -124,19 +124,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201108_cfpb_mortgage-disclosure-prototype-Round3-Camellia.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201108_cfpb_mortgage-disclosure-prototype-Round3-Azalea.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event7" class="kbyo-timeline-page__date">September 12, 2011 – September 14, 2011</span>
             </p>
@@ -147,19 +147,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201109_cfpb_mortgage-disclosure-prototype-Round4-Jasmine.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201109_cfpb_mortgage-disclosure-prototype-Round4-Nandina.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event8" class="kbyo-timeline-page__date">October 17, 2011 – October 19, 2011</span>
             </p>
@@ -170,19 +170,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201110_cfpb_mortgage-disclosure-prototype-Round5-Yucca.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201110_cfpb_mortgage-disclosure-prototype-Round5-Pinyon.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event9" class="–">November 8, 2011 – November 10, 2011</span>
             </p>
@@ -193,19 +193,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201111_cfpb_mortgage-disclosure-prototype-Round6-Hornbeam-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round6-Ironwood-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event10" class="kbyo-timeline-page__date">December 13, 2011 – December 15, 2011</span>
             </p>
@@ -216,19 +216,19 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201112_cfpb_mortgage-disclosure-prototype-Round7-Mimosa.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201112_cfpb_mortgage-disclosure-prototype-Round7-Sassafras.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event11" class="kbyo-timeline-page__date">January 24, 2012 – January 26, 2012</span>
             </p>
@@ -239,26 +239,26 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Honeylocust-LE.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Hemlock-CD.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Butternut-CD.pdf" >
-                    <span class="a-link_text">Prototype C</span>
+                    <span class="a-link__text">Prototype C</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event12" class="kbyo-timeline-page__date">February 20, 2012 – February 23, 2012</span>
             </p>
@@ -269,26 +269,26 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201202_cfpb_mortgage-disclosure-prototype-Round9-Basswood-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201202_cfpb_mortgage-disclosure-prototype-Round9-Tupelo_LE.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event13" class="kbyo-timeline-page__date">February 21, 2012</span>
             </p>
             <h2>We convene a small business review panel.</h2>
             <p> A panel of representatives from the CFPB, the Small Business Administration (SBA), and the Office of Management and Budget (OMB) considered the potential impact of the proposals under consideration on small businesses that will provide the mortgage disclosures. </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event14" class="kbyo-timeline-page__date">March 6, 2012</span>
             </p>
@@ -297,14 +297,14 @@ <h2>We meet with small businesses.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-sbrefa-feedback.pdf" >
-                    <span class="a-link_text">This feedback is summarized in the panel’s report.</span>
+                    <span class="a-link__text">This feedback is summarized in the panel’s report.</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <em>(Note: Link to large PDF file.)</em>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event15" class="kbyo-timeline-page__date">March 26, 2012</span>
             </p>
@@ -315,26 +315,26 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-Ficus-LE.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-OptionA-CD.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-OptionB-CD.pdf" >
-                    <span class="a-link_text">Prototype C</span>
+                    <span class="a-link__text">Prototype C</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event16" class="kbyo-timeline-page__date">July 9, 2012</span>
             </p>
@@ -343,12 +343,12 @@ <h2>Proposal of the new rule.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_proposed-rule_integrated-mortgage-disclosures.pdf" >
-                    <span class="a-link_text">The CFPB released a Notice of Proposed Rulemaking.</span>
+                    <span class="a-link__text">The CFPB released a Notice of Proposed Rulemaking.</span>
                     {{ svg_icon('download') }}
                 </a> The notice proposed a new rule to implement the combined mortgage disclosures and requested your comments on the proposal.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event17" class="kbyo-timeline-page__date">November 6, 2012</span>
             </p>
@@ -357,14 +357,14 @@ <h2>Comment period on most of the proposed rule closes.</h2>
                 <a href="https://www.regulations.gov/#!documentDetail;D=CFPB-2012-0028-0001">the CFPB reviewed nearly 3,000 comments</a>. These comments helped us improve the disclosures and the final rule.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event18" class="kbyo-timeline-page__date">October 11, 2012 – December 13, 2012</span>
             </p>
             <h2>We test Spanish language versions of the disclosures across the country.</h2>
             <p> We conducted qualitative consumer testing on Spanish language versions of the proposed disclosures. We tested in three cities: Arlington, Va. (October 11-12); Phoenix, Az. (November 14-15); and Miami, Fla. (December 12-13). </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event19" class="kbyo-timeline-page__date">April 23, 2013 – June 13, 2013</span>
             </p>
@@ -373,12 +373,12 @@ <h2>Validating our testing</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_study_tila-respa_disclosure-comparison.pdf">
-                    <span class="a-link_text">a quantitative study of the new forms</span>
+                    <span class="a-link__text">a quantitative study of the new forms</span>
                     {{ svg_icon('download') }}
                 </a> with 858 consumers in 20 locations across the country. By nearly every measure, the study showed that the new forms offer a statistically significant improvement over the existing forms.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event20" class="kbyo-timeline-page__date">June 18, 2013 – July 26, 2013</span>
             </p>
@@ -387,12 +387,12 @@ <h2>Additional testing with modified disclosures</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_report_tila-respa_testing-spanish-refinancing.pdf">
-                    <span class="a-link_text">The modified disclosures tested well</span>
+                    <span class="a-link__text">The modified disclosures tested well</span>
                     {{ svg_icon('download') }}
                 </a> and are the ones included in the final rule.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event21" class="kbyo-timeline-page__date">November 20, 2013</span>
             </p>
@@ -401,7 +401,7 @@ <h2>A final rule</h2>
                 <a href="/rules-policy/final-rules/2013-integrated-mortgage-disclosure-rule-under-real-estate-settlement-procedures-act-regulation-x-and-truth-lending-act-regulation-z/">The CFPB issues a Final Rule.</a> The final rule creates new integrated mortgage disclosures and details the requirements for using them. The rule is effective for mortgage applications received starting August 1, 2015.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event22" class="kbyo-timeline-page__date">March 28, 2014</span>
             </p>
@@ -410,7 +410,7 @@ <h2>Resources for mortgage professionals are created.</h2>
                 <a href="/compliance/compliance-resources/mortgage-resources/tila-respa-integrated-disclosures/">TILA-RESPA Integrated Disclosure webpage</a> with the publication of a Small Entity Compliance Guide and sample forms.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event23" class="kbyo-timeline-page__date">April 18, 2014</span>
             </p>
@@ -419,12 +419,12 @@ <h2>A guide to forms is published for mortgage professionals.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201503_cfpb_tila-respa-integrated-disclosure-guide-to-the-loan-estimate-and-closing.pdf">
-                    <span class="a-link_text">Guide to Forms</span>
+                    <span class="a-link__text">Guide to Forms</span>
                     {{ svg_icon('download') }}
                 </a> to assist mortgage professionals in understanding the new rule, the forms, and how to use the forms.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event24" class="kbyo-timeline-page__date">September 3, 2014</span>
             </p>
@@ -433,7 +433,7 @@ <h2>A readiness guide is published for mortgage professionals.</h2>
                 <a href="/compliance/">Readiness Guide</a> for mortgage professionals, which is updated as we learn more from industry about their implementation. This guide is a tool to help professionals comply with the rule.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event25" class="kbyo-timeline-page__date">October 24, 2014</span>
             </p>
@@ -442,13 +442,13 @@ <h2>Owning a Home debuts.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://www.consumerfinance.gov/owning-a-home/resources/checklist_mortgage_closing.pdf">
-                    <span class="a-link_text">closing checklist</span>
+                    <span class="a-link__text">closing checklist</span>
                     {{ svg_icon('download') }}
                 </a> and
                 <a href="/owning-a-home/loan-options/">loan options guide</a>.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event26" class="kbyo-timeline-page__date">January 13, 2015</span>
             </p>
@@ -457,7 +457,7 @@ <h2>Owning a Home expands.</h2>
                 <a href="/owning-a-home/explore-rates/">adds a tool that empowers homebuyers to explore interest rates</a>, allowing people to see information on rates being offered to others in similar situations.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event27" class="kbyo-timeline-page__date">January 20, 2015</span>
             </p>
@@ -466,23 +466,23 @@ <h2>Amendments to the rule are issued.</h2>
                 minor amendments to the rule</a> that extend the timing requirement for revised disclosures when consumers lock a rate or extend a rate lock after the Loan Estimate is provided and permit certain language related to construction loans for transactions involving new construction on the Loan Estimate.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event28" class="kbyo-timeline-page__date">March 31, 2015</span>
             </p>
             <h2>Your Home Loan Toolkit, an informative guide to the mortgage process, is released.</h2>
             <p>This resource guides homebuyers through the mortgage process step-by-step with checklists, conversation starters, and worksheets. <a class="a-link a-link__icon"
                     href="https://files.consumerfinance.gov/f/201503_cfpb_your-home-loan-toolkit-web.pdf">
-                    <span class="a-link_text">The toolkit, available online</span> {{ svg_icon('download') }}</a>, is designed to replace the Settlement Cost Booklet for most mortgage loan transactions. Lenders are required to give potential borrowers a copy of the booklet within three business days after they apply for a home purchase mortgage loan.</p>
+                    <span class="a-link__text">The toolkit, available online</span> {{ svg_icon('download') }}</a>, is designed to replace the Settlement Cost Booklet for most mortgage loan transactions. Lenders are required to give potential borrowers a copy of the booklet within three business days after they apply for a home purchase mortgage loan.</p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event29" class="kbyo-timeline-page__date">April 1, 2015</span>
             </p>
             <h2>We publish examination procedures to ensure the rule is implemented correctly.</h2>
             <p>Part of our job as a Bureau is to oversee companies that provide consumer financial products and services. We published examination procedures for our examiners to use when making sure mortgage professionals are compliant with the rule. Industry can also use these procedures to improve their own assessment of compliance.</p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event30" class="kbyo-timeline-page__date">June 24, 2015</span>
             </p>
@@ -491,7 +491,7 @@ <h2>New Effective Date Proposed</h2>
                 <a href="/about-us/newsroom/cfpb-proposes-two-month-extension-of-know-before-you-owe-mortgage-rule/">The CFPB proposes a new effective date of October 3, 2015 for the Know Before You Owe mortgage disclosure rule.</a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event31" class="kbyo-timeline-page__date">July 21, 2015</span>
             </p>
@@ -500,7 +500,7 @@ <h2>New Effective Date Announced</h2>
                 <a href="/about-us/newsroom/cfpb-finalizes-two-month-extension-of-know-before-you-owe-effective-date/">The CFPB issues a final rule moving the effective date to October 3, 2015.</a>
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event32" class="kbyo-timeline-page__date">August 14, 2015</span>
             </p>
@@ -512,7 +512,7 @@ <h2>A consumer’s digital guide to the disclosures is unveiled.</h2>
                 <a href="/owning-a-home/mortgage-closing/">Closing Disclosure</a> to access an array of resources.
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event33" class="kbyo-timeline-page__date">August 14, 2015</span>
             </p>
@@ -520,7 +520,7 @@ <h2>A guide for real estate professionals is released.</h2>
             <p>We released the Know Before You Owe: Real estate professional’s guide. This resource helps real estate professionals educate their clients on the mortgage process to ensure smooth and on-time closings.&nbsp;
             </p>
         </div>
-        <div class="block block__border-top block__padded-top">
+        <div class="block block--border-top block--padded-top">
             <p>
                 <span id="event34" class="kbyo-timeline-page__date">September 17, 2015</span>
             </p>
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
index be173a708ba..bb89778ddff 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
@@ -22,7 +22,7 @@
    ========================================================================== #}
 
 {% macro render( links=[] ) %}
-<footer aria-label="Buying a House footer" class="u-layout-grid_breakout brand-footer">
+<footer aria-label="Buying a House footer" class="u-layout-grid__breakout brand-footer">
     <div class="brand-footer_wrapper">
         <h3 class="brand-footer_heading">
             {{ svg_icon('house') }}
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-header.html b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
index d587b6c8129..a23021b86fd 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-header.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
@@ -1,5 +1,5 @@
 <header aria-label="Buying a House header" class="brand-header">
-  <div class="content_wrapper">
+  <div class="content__wrapper">
     <div class="brand-header__1-2-container brand-header__1-2-container-with-icon">
       <div class="brand-header__headline">
         <span class="brand-header__icon" aria-hidden="true">{{ svg_icon('house') }}</span>
diff --git a/cfgov/jinja2/owning-a-home/_templates/no_js.html b/cfgov/jinja2/owning-a-home/_templates/no_js.html
index 4a50d4db2e3..242242224c2 100644
--- a/cfgov/jinja2/owning-a-home/_templates/no_js.html
+++ b/cfgov/jinja2/owning-a-home/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="m-notification_message">
+    <div class="m-notification__content">
+        <div class="m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/jinja2/owning-a-home/explore-rates/index.html b/cfgov/jinja2/owning-a-home/explore-rates/index.html
index b62f6a1371d..982cf3b25d9 100644
--- a/cfgov/jinja2/owning-a-home/explore-rates/index.html
+++ b/cfgov/jinja2/owning-a-home/explore-rates/index.html
@@ -28,13 +28,13 @@
 {% endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
 
         {% include "_templates/no_js.html" %}
 
         <div class="rate-checker">
             <section class="page-intro content-l">
-                <div class="content-l_col content-l_col-2-3">
+                <div class="content-l__col content-l__col-2-3">
                     <h1>Explore interest rates</h1>
                     <p class="lead">Use this tool throughout your homebuying process to explore the range of mortgage interest rates you can expect to receive.  See how your credit score, loan type, home price, and down payment amount can affect your rate.   Knowing your options and what to expect helps ensure that you get a mortgage that is right for you.  Check back often -- the rates in the tool are updated every Wednesday and Friday.</p>
                     <div class="page-intro_cols">
@@ -54,14 +54,14 @@ <h1>Explore interest rates</h1>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-3">
+                <div class="content-l__col content-l__col-1-3">
                     <div class="rc-illu-inner">
                         <img class ="rc-home-illu"
                                 src="{{ static('apps/owning-a-home/img/ill-chart.png') }}"
                                 alt="Illustration of interest rate chart">
                     </div>
                 </div>
-                <!-- /.content-l_col-1-3 -->
+                <!-- /.content-l__col-1-3 -->
             </section>
             <div class="calculator content-l" aria-controls="rate-results">
                 <section class="form-intro">
@@ -94,7 +94,7 @@ <h4>Explore rate options</h4>
                                 role="alert">
                             <div class="a-form-alert a-form-alert__error">
                                 {{ svg_icon('warning-round') }}
-                                <span class="a-form-alert_text">
+                                <span class="a-form-alert__text">
                                     Many lenders do not accept
                                     borrowers with credit scores less than 620.
                                     Even if your score is low, you may still have options.
@@ -227,7 +227,7 @@ <h4>Explore rate options</h4>
                             role="alert">
                         <div class="a-form-alert a-form-alert__warning">
                             {{ svg_icon('warning-round') }}
-                            <span class="a-form-alert_text">
+                            <span class="a-form-alert__text">
                                 Your down payment cannot be more than your
                                 house price.
                             </span>
@@ -238,7 +238,7 @@ <h4>Explore rate options</h4>
                             id="county-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text"></span>
+                        <span class="a-form-alert__text"></span>
                     </div>
                 </section>
                 <section class="calc-loan-details">
@@ -293,7 +293,7 @@ <h4>Explore rate options</h4>
                 <section class="form-sub warning u-hidden" id="arm-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text">
+                        <span class="a-form-alert__text">
                             While some lenders may offer FHA, VA, or 15-year adjustable-rate mortgages, they are rare. We don’t have enough data to display results for these combinations. Choose a fixed rate if you’d like to try these options.
                         </span>
                     </div>
@@ -301,7 +301,7 @@ <h4>Explore rate options</h4>
                 <section class="form-sub warning u-hidden" id="hb-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text"></span>
+                        <span class="a-form-alert__text"></span>
                     </div>
                 </section>
                 <section class="form-sub calc-subsection">
@@ -359,9 +359,9 @@ <h3>Data table</h3>
                                 m-notification__error"
                             role="alert">
                         {{ svg_icon('error-round') }}
-                        <div class="m-notification_content">
-                            <div class="m-notification_message">We're sorry!</div>
-                            <p class="m-notification_explanation">
+                        <div class="m-notification__content">
+                            <div class="m-notification__message">We're sorry!</div>
+                            <p class="m-notification__explanation">
                                 Based on the information you entered,
                                 we don't have enough data to display results.
                                 Change your settings or
@@ -378,9 +378,9 @@ <h3>Data table</h3>
                                 m-notification__error"
                             role="alert">
                         {{ svg_icon('error-round') }}
-                        <div class="m-notification_content">
-                            <div class="m-notification_message">We're sorry!</div>
-                            <p class="m-notification_explanation">
+                        <div class="m-notification__content">
+                            <div class="m-notification__message">We're sorry!</div>
+                            <p class="m-notification__explanation">
                                 <strong>We're sorry!</strong>
                                 We're having trouble connecting to our data.<br>
                                 Try again another time.
@@ -509,7 +509,7 @@ <h4 class="next-steps-heading">Watch your spending.</h4>
                                     href="/ask-cfpb/what-is-a-credit-score-en-315/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn more about credit scores</span>
+                                    <span class="a-link__text">Learn more about credit scores</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -524,7 +524,7 @@ <h4 class="next-steps-heading">Improve your credit scores.</h4>
                                     href="/ask-cfpb/how-do-i-get-and-keep-a-good-credit-score-en-318/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn about improving your credit scores</span>
+                                    <span class="a-link__text">Learn about improving your credit scores</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -539,7 +539,7 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                                     href="/ask-cfpb/what-kind-of-down-payment-do-i-need-how-does-the-amount-of-down-payment-i-make-affect-the-terms-of-my-mortgage-loan-en-120/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn more about down payments</span>
+                                    <span class="a-link__text">Learn more about down payments</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -549,9 +549,9 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
             </section>
             <!-- /.next-steps -->
             <div class="block
-                        block__border-top
-                        block__flush-top
-                        block__padded-top
+                        block--border-top
+                        block--flush-top
+                        block--padded-top
                         credit-note-ctr">
                 {# TODO: Look into using the default notification macro #}
                 <div class="m-notification__borderless
@@ -560,9 +560,9 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                             m-notification__visible"
                         role="alert">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">Check your credit</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">Check your credit</div>
+                        <p class="m-notification__explanation">
                             If you haven’t checked your credit report recently,
                             <a class="external-link"
                                 href="https://annualcreditreport.com"
@@ -577,7 +577,7 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                 </div>
             </div>
             <section id="about" class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <h3 class="subhead">About our data source for this tool</h3>
                     <p>The lenders in our data include a mix of large banks, regional banks, and credit unions. The data is updated semiweekly every Wednesday and Friday at 7 a.m. In the event of a holiday, data will be refreshed on the next available business day.</p>
                     <p>The data is provided by <a href="https://curinos.com/" target="_blank" rel="noopener noreferrer">Curinos</a>, New York, NY. Curinos collects the data directly from lenders and every effort is made to collect the most accurate data possible, but they cannot guarantee the data’s accuracy.</p>
diff --git a/cfgov/jinja2/rural-or-underserved/_templates/expandable.html b/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
index 57132739859..506e844b6c7 100644
--- a/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
+++ b/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
@@ -17,21 +17,21 @@
 
 {% macro render( heading, content ) %}
 <div class="o-expandable">
-    <button class="o-expandable_header"
+    <button class="o-expandable__header"
             title="Expand content">
-        <h3 class="o-expandable_label">
+        <h3 class="o-expandable__label">
             {{ heading|safe }}
         </h3>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
         <p>
             {{ content|safe }}
         </p>
diff --git a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
index 4a50d4db2e3..242242224c2 100644
--- a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
+++ b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="m-notification_message">
+    <div class="m-notification__content">
+        <div class="m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/jinja2/rural-or-underserved/index.html b/cfgov/jinja2/rural-or-underserved/index.html
index 2f97e689cda..6f39b0f0048 100644
--- a/cfgov/jinja2/rural-or-underserved/index.html
+++ b/cfgov/jinja2/rural-or-underserved/index.html
@@ -34,33 +34,33 @@
 
         {% include "_templates/no_js.html" %}
 
-        <section class="content_intro">
+        <section class="content__intro">
 
             <div class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <h5 class="report-date print-only"></h5>
                     <h1>Rural and underserved areas tool</h1>
                 </div>
             </div>
 
             <div class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     {# Display errors here. #}
                     <div id="file-error"
                          class="block
-                                block__flush-top
-                                block__flush-bottom
-                                block__padded-bottom
+                                block--flush-top
+                                block--flush-bottom
+                                block--padded-bottom
                                 u-hidden">
                         <div class="m-notification
                                     m-notification__visible
                                     m-notification__error">
                             {{ svg_icon('error-round') }}
-                            <div class="m-notification_content">
-                                <div class="m-notification_message">
+                            <div class="m-notification__content">
+                                <div class="m-notification__message">
                                     Formatting error
                                 </div>
-                                <div class="m-notification_explanation">
+                                <div class="m-notification__explanation">
                                     <strong>We've noticed the following errors:</strong>
                                     <div id="file-error-desc"></div>
                                 </div>
@@ -69,19 +69,19 @@ <h1>Rural and underserved areas tool</h1>
                     </div>
                     <div id="process-error"
                          class="block
-                                block__flush-top
-                                block__flush-bottom
-                                block__padded-bottom
+                                block--flush-top
+                                block--flush-bottom
+                                block--padded-bottom
                                 u-hidden">
                         <div class="m-notification
                                     m-notification__visible
                                     m-notification__error">
                             {{ svg_icon('error-round') }}
-                            <div class="m-notification_content">
-                                <div class="m-notification_message">
+                            <div class="m-notification__content">
+                                <div class="m-notification__message">
                                     Processing error
                                 </div>
-                                <div class="m-notification_explanation">
+                                <div class="m-notification__explanation">
                                     <p>
                                         <strong>The following addresses were not processed because the server was temporarily unavailable. To try again, start a new search.</strong>
                                     </p>
@@ -94,7 +94,7 @@ <h1>Rural and underserved areas tool</h1>
             </div>
 
             <div id="search-tool" class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
 
                     <h2>
                         Check status of properties for loans extended in
@@ -116,8 +116,8 @@ <h2>
                     </h2>
                 </div>
 
-                <div class="content-l_col content-l_col-1-2">
-                    <div class="block block__border block__bg block__sub">
+                <div class="content-l__col content-l__col-1-2">
+                    <div class="block block--border block--bg block--sub">
                         <h4>Enter addresses manually</h4>
                         <form id="geocode">
                             <p>
@@ -154,8 +154,8 @@ <h4>Enter addresses manually</h4>
                         </form>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
-                    <div class="block block__border block__bg block__sub">
+                <div class="content-l__col content-l__col-1-2">
+                    <div class="block block--border block--bg block--sub">
                         <h4>Upload a CSV file</h4>
                         <form id="geocode-csv">
                             <p>
@@ -197,7 +197,7 @@ <h4>Upload a CSV file</h4>
                     </div>
                 </div>
 
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <p>
                         Do not include personal information, such as names, phone numbers, and Social Security numbers.
                         The CFPB will not retain any information submitted through this tool.
@@ -208,7 +208,7 @@ <h4>Upload a CSV file</h4>
 
             <!-- results -->
             <section id="results" class="content-l u-hidden">
-                <div class="full-print content-l_col content-l_col-3-4">
+                <div class="full-print content-l__col content-l__col-3-4">
                     <h2 id="countMessage">
                         <span id="spinner">
                             {{ svg_icon('updating') }}
@@ -218,14 +218,14 @@ <h2 id="countMessage">
                         <strong class="chosenYear"></strong> rural or underserved area safe harbor designation.
                     </h2>
                 </div>
-                <p class="hide-print content-l_col content-l_col-1-4">
+                <p class="hide-print content-l__col content-l__col-1-4">
                     <a class="a-btn a-btn__secondary" href="/rural-or-underserved-tool/">
                         Start a new search
                     </a>
                 </p>
 
-                <div id="results-total" class="u-hidden block block__sub">
-                    <div class="content-l_col content-l_col-1-4">
+                <div id="results-total" class="u-hidden block block--sub">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="ruralCnt no-decoration counter no-decoration" href="#rural">
@@ -237,7 +237,7 @@ <h4>
                             <span class="ruralVerb verb">are</span> designated as rural or underserved
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="notRuralCnt no-decoration counter no-decoration" href="#notRural">
@@ -249,7 +249,7 @@ <h4>
                             <span class="notRuralVerb verb">are</span> <strong>not</strong> designated as rural or underserved
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="notFoundCnt no-decoration counter no-decoration" href="#notFound">
@@ -261,7 +261,7 @@ <h4>
                             could not be identified
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="duplicateCnt no-decoration counter no-decoration" href="#duplicate">
@@ -275,19 +275,19 @@ <h4>
                     </div>
                 </div>
 
-                <p class="content-l_col content-l_col-1">
+                <p class="content-l__col content-l__col-1">
                     <a class="margin-right-quarter" href="#" id="print" title="Print results">Print results</a>
                     |
                     <a class="download-link margin-left-quarter" href="#" id="download" title="Download results"><span>Download results</span></a>
                 </p>
 
                 {# Not a paragraph so that it is full-width. #}
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <em>If you are having problems with the download, please review the <a href="#faq-general-questions">“General questions” in the FAQ</a>.</em>
                 </div>
 
-                <div class="content-l_col content-l_col-1">
-                    <div id="rural" class="js-table u-hidden block block__flush-bottom">
+                <div class="content-l__col content-l__col-1">
+                    <div id="rural" class="js-table u-hidden block block--flush-bottom">
                         <h2 class="js-table-title">
                             <strong><span class="ruralCnt counter">0</span></strong> <span class="ruralCase case">addresses are</span> designated as rural or underserved for
                             <strong class="chosenYear"></strong>
@@ -311,17 +311,17 @@ <h2 class="js-table-title">
                         </div>
 
                         <p class="block
-                                  block__flush-top
-                                  block__flush-bottom
-                                  block__padded-top
-                                  block__padded-bottom
+                                  block--flush-top
+                                  block--flush-bottom
+                                  block--padded-top
+                                  block--padded-bottom
                                   m-btn-group">
                             <button data-table="rural" class="button-more u-hidden a-btn a-btn__secondary no-decoration" id="ruralMore">View 10 more</button>
                             <button data-table="rural" class="view-all u-hidden a-btn a-btn__link" id="ruralAll">View all</button>
                         </p>
                     </div>
 
-                    <div id="notRural" class="js-table u-hidden block block__flush-bottom">
+                    <div id="notRural" class="js-table u-hidden block block--flush-bottom">
                         <h2 class="js-table-title">
                         <strong><span class="notRuralCnt counter">0</span></strong> <span class="notRuralCase case">addresses are</span>
                         <strong>not</strong> designated as rural or underserved for
@@ -344,17 +344,17 @@ <h2 class="js-table-title">
                         </div>
 
                         <p class="block
-                                  block__flush-top
-                                  block__flush-bottom
-                                  block__padded-top
-                                  block__padded-bottom
+                                  block--flush-top
+                                  block--flush-bottom
+                                  block--padded-top
+                                  block--padded-bottom
                                   m-btn-group">
                             <button data-table="notRural" class="button-more u-hidden a-btn a-btn__secondary no-decoration" id="notRuralMore">View 10 more</button>
                             <button data-table="notRural" class="view-all u-hidden a-btn a-btn__link" id="notRuralAll">View all</button>
                         </p>
                     </div>
 
-                    <div id="notFound" class="js-table u-hidden block block__flush-bottom">
+                    <div id="notFound" class="js-table u-hidden block block--flush-bottom">
                         <h2 class="js-table-title">
                             <strong><span class="notFoundCnt counter">0</span></strong> <span class="notFoundCase case">addresses are</span> not identified
                         </h2>
@@ -380,17 +380,17 @@ <h2 class="js-table-title">
                         </div>
 
                         <p class="block
-                                  block__flush-top
-                                  block__flush-bottom
-                                  block__padded-top
-                                  block__padded-bottom
+                                  block--flush-top
+                                  block--flush-bottom
+                                  block--padded-top
+                                  block--padded-bottom
                                   m-btn-group">
                             <button data-table="notFound" class="button-more u-hidden a-btn a-btn__secondary no-decoration" id="notFoundMore">View 10 more</button>
                             <button data-table="notFound" class="view-all u-hidden a-btn a-btn__link" id="notFoundAll">View all</button>
                         </p>
                     </div>
 
-                    <div id="duplicate" class="js-table u-hidden block block__flush-bottom">
+                    <div id="duplicate" class="js-table u-hidden block block--flush-bottom">
                         <h2 class="js-table-title">
                             <strong><span class="duplicateCnt counter">0</span></strong> <span class="duplicateCase case">addresses are</span> identified as duplicate
                         </h2>
@@ -416,10 +416,10 @@ <h2 class="js-table-title">
                         </div>
 
                         <p class="block
-                                  block__flush-top
-                                  block__flush-bottom
-                                  block__padded-top
-                                  block__padded-bottom
+                                  block--flush-top
+                                  block--flush-bottom
+                                  block--padded-top
+                                  block--padded-bottom
                                   m-btn-group">
                             <button data-table="duplicate" class="button-more u-hidden a-btn a-btn__secondary no-decoration" id="duplicateMore">View 10 more</button>
                             <button data-table="duplicate" class="view-all u-hidden a-btn a-btn__link" id="duplicateAll">View all</button>
@@ -433,7 +433,7 @@ <h2 class="js-table-title">
 
     </div>
 
-    <div class="content_line"></div>
+    <div class="content__line"></div>
 
 {% endblock %}
 
@@ -452,7 +452,7 @@ <h2>About this tool</h2>
 
             <!-- faq -->
             <h2>Frequently asked questions</h2>
-            <div class="block block__sub">
+            <div class="block block--sub">
                 <h3>Questions on the tool</h3>
                 <div class="o-expandable-group">
                     {{ expandable.render(
@@ -490,21 +490,21 @@ <h3>Questions on the tool</h3>
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="o-expandable_label">
+                            <h3 class="o-expandable__label">
                                 How should I format the addresses that I upload to the tool?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 The tool provides a sample comma separated values (CSV) file to help you determine how to format the addresses for upload in the multiple address search tool.  For best results, the street address, city, state and ZIP Code should be included in the batch upload file or address entry.  The addresses within this CSV file should follow the rules set forth in Section 2, “Postal Addressing Standards” of the United States Postal Service Publication 28 - Postal Addressing Standards (<a href="https://pe.usps.com/text/pub28/welcome.htm" title="Publication 28,">https://pe.usps.com/text/pub28/welcome.htm</a>).  Per <a href="https://pe.usps.com/text/pub28/28c2_001.htm" title="Publication 28, Sub-Section 21">Publication 28, Sub-Section 21</a>, a complete property address consists of the “Delivery Address Line” and the “Last Line.”  “Delivery Address Line,” in the example below and in the tool CSV file format, consists of the “Street address” while the “Last Line,” in the example below and in the tool CSV file format, consists of three fields, “City”, “State” and “ZIP”.
                             </p>
@@ -712,21 +712,21 @@ <h3 class="o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="o-expandable_label">
+                            <h3 class="o-expandable__label">
                                 How do I resolve the addresses that could not be identified?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 You should check to see if the address was mistyped, some information was missing in the address entered, or the address is too new for the tool to return a definite result.  First, verify the address is correct.  If it is correct, try the Census Bureau’s automated address search tool, use the rural or underserved counties lists, or check the form of the address on the United States Postal Service site (<a href="https://tools.usps.com/go/ZipLookupAction_input" title="United States Postal Service site">https://tools.usps.com/go/ZipLookupAction_input</a>).  For instance, the address 6009 JFK Blvd East, West New York, NJ 07093 cannot be located by the tool.  When the address is entered into the usps.com site, the proper address is given, 6009 Kennedy Blvd E, West New York, NJ 07093-3740, and the address can now be identified in the tool.
                             </p>
@@ -788,21 +788,21 @@ <h3 id="faq-general-questions">General questions</h3>
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="o-expandable_label">
+                            <h3 class="o-expandable__label">
                                 What is CSV?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 A comma-separated values (CSV) file derives its name from a file containing multiple data fields separated by commas to distinguish where each field starts and ends.  Files are stored in plain text as numbers and letters with one record per line.
                             </p>
@@ -820,23 +820,23 @@ <h3 class="o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="o-expandable_label">
+                            <h3 class="o-expandable__label">
                                 My downloaded file is not opening in the
                                 correct format in Excel.
                                 How do I fix the format?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 If you used the ‘Download results’ link in Windows in either Chrome or Firefox and the file extension is not recognized on your computer, you will need to add a CSV extension to the end of the file in Windows Explorer before the file will launch in the correct format.
                             </p>
@@ -876,22 +876,22 @@ <h3 class="o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="o-expandable_label">
+                            <h3 class="o-expandable__label">
                                 My question is not answered here.
                                 Where can I find more information?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 Information about this automated tool and other safe
                                 harbor tools is provided by the Bureau’s regulation
@@ -910,10 +910,10 @@ <h3 class="o-expandable_label">
 {% endblock %}
 
 {% block content_sidebar scoped -%}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <div class="m-reusable-text-snippet">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Related information
                 </h2>
             </header>
@@ -932,24 +932,24 @@ <h2 class="m-slug-header_heading">
     <div class="block">
         <div class="m-related-links">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Related links
                 </h2>
             </header>
             <ul class="m-list m-list__links">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/rules-policy/regulations/1026/" title="Truth in Lending Act (Regulation Z)">Truth in Lending Act (Regulation Z)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/ability-repay-qualified-mortgage-rule/" title="Ability to repay and qualified mortgages (ATR/QM)">Ability to repay and qualified mortgages (ATR/QM)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/high-cost-mortgages/" title="High cost mortgages (HOEPA)">High cost mortgages (HOEPA)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/higher-priced-mortgage-loan-escrow-rule/" title="Rules governing escrows for higher priced mortgages">Rules governing escrows for higher priced mortgages</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/rural-and-underserved-counties-list/" title="Rural or Underserved Counties List">Rural or Underserved Counties List</a>
                 </li>
             </ul>
diff --git a/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html b/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
index 89461fe0afa..06af156c3bc 100644
--- a/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
+++ b/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
@@ -9,7 +9,7 @@
 {%- endblock %}
 
 {% block content_main %}
-<article class="block block__flush-top">
+<article class="block block--flush-top">
     <h1>How to Apply For a Federal Job with the CFPB</h1>
     <p>
         This is a job announcement on consumerfinance.gov.
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_details.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_details.html
index a0983bce97d..c8b4432dc0f 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_details.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_details.html
@@ -62,10 +62,10 @@
 {%- endmacro %}
 
 <section class="block
-                block__flush-top
-                block__sub">
+                block--flush-top
+                block--sub">
     <h1>{{ value.title }}</h1>
-    <dl class="vacancy-announcement_details">
+    <dl class="vacancy-announcement__details">
         <dt>Division/Office:</dt>
         <dd>{{ value.division }}</dd>
         <dt>Closing date:</dt>
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
index fffb2fac7ab..00082811f93 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
@@ -25,11 +25,11 @@
     <h3>Current openings</h3>
     <ul class="m-list m-list__unstyled m-list__links">
         {% for job in value.jobs %}
-        <li class="m-list_item">
-            <a class="m-list_link"
+        <li class="m-list__item">
+            <a class="m-list__link"
                href="{{ job.url }}">
                   {{ job.title }}
-                <span class="m-list_link-subtext">
+                <span class="m-list__link-subtext">
                     Closing
                     {% import 'v1/includes/macros/time.html' as time %}
                     {{ time.render(job.close_date, {'date': true}, text_format=True) }}
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
index 47788f935f6..64c07935677 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
@@ -34,7 +34,7 @@
 
         <div class="o-summary o-summary__mobile">
             <div id="job-description-expandable"
-                 class="o-summary_content">
+                 class="o-summary__content">
                 <h4>Summary</h4>
                 {{ page.description | safe }}
                 {% if page.responsibilities %}
@@ -70,7 +70,7 @@ <h4>Position type</h4>
                 {% endif %}
             </div>
 
-            <button class="o-summary_btn u-hidden">
+            <button class="o-summary__btn u-hidden">
                 Read full description
                 {{ svg_icon('plus-round') }}
             </button>
@@ -85,21 +85,21 @@ <h4>Position type</h4>
         <h2 id="interested">What to know if you apply</h2>
         <div class="block block__sub">
             <div class="content-l">
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="u-flexible-container">
-                        <iframe class="u-flexible-container_inner"
+                        <iframe class="u-flexible-container__inner"
                                 src="https://www.youtube.com/embed/XCbZnTIeTOY"
                                 frameborder="0"
                                 allowfullscreen>
                         </iframe>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <p>Put simply, federal hiring rules prioritize fairness. Our video and resources explain how the application process works, important parts to pay attention to, and what to expect after you apply.</p>
                     <a class="a-link
                               a-link__jump"
                         href="/about-us/careers/application-process/">
-                        <span class="a-link_text">Learn about the job application process</span>
+                        <span class="a-link__text">Learn about the job application process</span>
                     </a>
                 </div>
             </div>
@@ -113,8 +113,8 @@ <h2 id="interested">Apply for this position</h2>
         <div class="block block__sub">
             <div class="content-l">
                 {% for usajobs_link in usajobs_links %}
-                    <div class="content-l_col
-                                {{ 'content-l_col-1-2' if usajobs_links|length > 1 else 'content-l_col-1'}}">
+                    <div class="content-l__col
+                                {{ 'content-l__col-1-2' if usajobs_links|length > 1 else 'content-l__col-1'}}">
                         {% set applicant_type = usajobs_link.applicant_type %}
                         <h4>{{ applicant_type.display_title if applicant_type.display_title else applicant_type }}</h4>
                         <p>{{ applicant_type.description }}</p>
@@ -148,19 +148,19 @@ <h4>{{ email_link.label }}</h4>
 
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Working at the CFPB
             </h2>
         </header>
 
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a href="/about-us/careers/working-at-cfpb" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/careers/working-at-cfpb" class="m-list__link">
                     Working at the CFPB
                 </a>
             </li>
-            <li class="m-list_item">
-                <a href="/office-civil-rights/" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/office-civil-rights/" class="m-list__link">
                     Office of Civil Rights
                 </a>
             </li>
@@ -174,18 +174,18 @@ <h2 class="m-slug-header_heading">
     </div>
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Learn more about the CFPB's work
             </h2>
         </header>
         <ul class="m-list m-list__links u-mb0">
-            <li class="m-list_item">
-                <a href="/about-us/blog" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/blog" class="m-list__link">
                     CFPB Blog
                 </a>
             </li>
-            <li class="m-list_item">
-                <a href="/about-us/newsroom" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/newsroom" class="m-list__link">
                     Newsroom
                 </a>
             </li>
@@ -193,7 +193,7 @@ <h2 class="m-slug-header_heading">
     </div>
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Follow us on LinkedIn
             </h2>
         </header>
diff --git a/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html b/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
index 4a76bda4b57..16dca79c81c 100644
--- a/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
+++ b/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
@@ -179,7 +179,7 @@
                             <a class="{{ _content_classes( nav_depth, '-link' ) }}"
                                 href="{{ link.url }}">
                                 {{ svg_icon('favorite') }}
-                                <span><span class="a-link_text">{{ link.text }}</span></span>
+                                <span><span class="a-link__text">{{ link.text }}</span></span>
                             </a>
                         </li>
                         {% endfor %}
@@ -203,7 +203,7 @@
                                       {{- ' ' ~ _content_classes( nav_depth, '-link__current' ) if link.selected else '' -}}"
                             href="{{ link.url }}">
                                 {{ svg_icon( link.icon ) }}
-                                <span class="a-link_text">{{ link.text }}</span>
+                                <span class="a-link__text">{{ link.text }}</span>
                             </a>
                         </li>
                         {% endfor %}
diff --git a/cfgov/mega_menu/jinja2/mega_menu/preview.html b/cfgov/mega_menu/jinja2/mega_menu/preview.html
index 28984573637..2ac56a863fc 100644
--- a/cfgov/mega_menu/jinja2/mega_menu/preview.html
+++ b/cfgov/mega_menu/jinja2/mega_menu/preview.html
@@ -57,4 +57,4 @@
 eleifend risus quis finibus. Sed aliquam ullamcorper ipsum non fermentum.
 Vivamus malesuada orci et neque laoreet, id pretium odio dignissim.
 </p>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html b/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
index 4a50d4db2e3..242242224c2 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="m-notification_message">
+    <div class="m-notification__content">
+        <div class="m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
index 5a27632bfba..3145788f5db 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
@@ -1,14 +1,14 @@
 <div class="college-costs_intro-segment">
     {% if return_user %}
-        <div class="content_wrapper">
-            <div class="content_main">
+        <div class="content__wrapper">
+            <div class="content__main">
                 {% include "_templates/no_js.html" %}
                 <div class="m-notification
                             m-notification__visible
                             u-js-only">
                     {{ svg_icon('updating') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">The page is loading…</div>
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">The page is loading…</div>
                     </div>
                 </div>
             </div>
@@ -19,8 +19,8 @@
                 {% include_block block %}
             {% endif %}
         {%- endfor %}
-        <div class="content_wrapper">
-            <div class="content_main">
+        <div class="content__wrapper">
+            <div class="content__main">
                {% for block in page.header -%}
                     {% if block.block_type != 'hero' %}
                         {{ render_block.render(block, loop.index) }}
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
index e5677e0ad85..3e01bfe4a57 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
@@ -14,7 +14,7 @@ <h2 tabindex="-1">School & living situation</h2>
         </p>
         <div class="a-form-alert a-form-alert__error" data-state-based-visibility="school-required" role="alert">
           {{ svg_icon('warning-round') }}
-          <span class="a-form-alert_text">
+          <span class="a-form-alert__text">
               Please enter the school you are considering.
           </span>
         </div>
@@ -25,7 +25,7 @@ <h2 tabindex="-1">School & living situation</h2>
     </div>
 
     <div class="school-search_additional-info">
-        <div class="block block__sub program-question" id="school-search_program-type">
+        <div class="block block--sub program-question" id="school-search_program-type">
             <h3 class="h4">Select your program type</h3>
             {{ notification.render(
                 'information',
@@ -35,7 +35,7 @@ <h3 class="h4">Select your program type</h3>
             ) }}
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="type-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select your program type.
               </span>
             </div>
@@ -82,7 +82,7 @@ <h3 class="h4">Select your program type</h3>
             ) }}
         </div>
 
-        <div class="block block__sub program-select">
+        <div class="block block--sub program-select">
           <h3 class="h4">Select your program</h3>
           <div class="a-select">
             <select id="program-select">
@@ -91,11 +91,11 @@ <h3 class="h4">Select your program</h3>
           </div>
         </div>
 
-        <div class="block block__sub program-question" id="school-search_program-progress">
+        <div class="block block--sub program-question" id="school-search_program-progress">
           <h3 class="h4">How much progress have you made towards this degree, excluding credits from AP/IB exams?</h3>
           <div class="a-form-alert a-form-alert__error" data-state-based-visibility="progress-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select how much progress you have made towards this degree.
               </span>
           </div>
@@ -142,7 +142,7 @@ <h3 class="h4">How much progress have you made towards this degree, excluding cr
           }}
         </div>
 
-        <div class="block block__sub program-question" id="school-search_program-length">
+        <div class="block block--sub program-question" id="school-search_program-length">
             <h3 class="h4" data-state-based-visibility="is_first_year-false">How much longer do you expect your program to take, including the coming school year?</h3>
             <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you expect your program to take, including the coming school year?</h3>
             <div class="undergrad-content">
@@ -155,7 +155,7 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
             </div>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="length-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select your program length.
               </span>
             </div>
@@ -209,11 +209,11 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
             }}
         </div>
 
-        <div class="block block__sub program-question" id="school-search_program-rate" data-state-based-visibility="control-nonprivate">
+        <div class="block block--sub program-question" id="school-search_program-rate" data-state-based-visibility="control-nonprivate">
             <h3 class="h4">Which tuition rate will apply to you?</h3>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="rate-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select which tuition rate will apply to you.
               </span>
             </div>
@@ -236,11 +236,11 @@ <h3 class="h4">Which tuition rate will apply to you?</h3>
             <!-- TODO: add option for N/A -- all students pay the same rate OR hide this question if N/A -->
         </div>
 
-        <div class="block block__sub program-question undergrad-content" id="school-search_program-housing">
+        <div class="block block--sub program-question undergrad-content" id="school-search_program-housing">
             <h3 class="h4">Where do you plan to live while in school?</h3>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="housing-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select where you plan to live while in school.
               </span>
             </div>
@@ -270,12 +270,12 @@ <h3 class="h4">Where do you plan to live while in school?</h3>
             }}
         </div>
 
-        <div class="block block__sub program-question undergrad-content" id="school-search_program-dependency">
+        <div class="block block--sub program-question undergrad-content" id="school-search_program-dependency">
             <h3 class="h4">Are you considered a dependent or independent student?</h3>
             <p><a href="https://studentaid.gov/help/view-sar" target="_blank" rel="noreferrer noopener">Check your Student Aid Report (SAR)</a> if you’re not sure.</p>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="dependency-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select whether you are considered a dependent or independent student.
               </span>
             </div>
@@ -305,13 +305,13 @@ <h3 class="h4">Are you considered a dependent or independent student?</h3>
             'Form is incomplete',
             'Please make selections for the following fields on this page:
             <ul class="m-list m-list__links">
-            <div data-state-based-visibility="school-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_what-school" data-gtm_ignore="true">What school are you considering?</a></li></div>
-            <div data-state-based-visibility="type-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-type" data-gtm_ignore="true">Select your program type</a></li></div>
-            <div data-state-based-visibility="length-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-length" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
-            <div data-state-based-visibility="progress-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-progress" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
-            <div data-state-based-visibility="rate-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-rate" data-gtm_ignore="true">Which tuition rate will apply to you?</a></li></div>
-            <div data-state-based-visibility="housing-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-housing" data-gtm_ignore="true">Where do you plan to live while in school?</a></li></div>
-            <div data-state-based-visibility="dependency-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-dependency" data-gtm_ignore="true">Are you considered a dependent or independent student?</a></li></div>
+            <div data-state-based-visibility="school-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_what-school" data-gtm_ignore="true">What school are you considering?</a></li></div>
+            <div data-state-based-visibility="type-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-type" data-gtm_ignore="true">Select your program type</a></li></div>
+            <div data-state-based-visibility="length-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-length" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
+            <div data-state-based-visibility="progress-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-progress" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
+            <div data-state-based-visibility="rate-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-rate" data-gtm_ignore="true">Which tuition rate will apply to you?</a></li></div>
+            <div data-state-based-visibility="housing-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-housing" data-gtm_ignore="true">Where do you plan to live while in school?</a></li></div>
+            <div data-state-based-visibility="dependency-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-dependency" data-gtm_ignore="true">Are you considered a dependent or independent student?</a></li></div>
             </ul>' | safe
         ) }}
     </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-costs.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-costs.html
index 8714903f4f9..dfca4dfcb2e 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-costs.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-costs.html
@@ -31,19 +31,19 @@ <h2 tabindex="-1">This year's costs</h2>
         </div>
     </div>
 
-    <div class="costs_content-section costs_content-section_content block block__sub" data-state-based-visibility="costs-question-yes">
+    <div class="costs_content-section costs_content-section_content block block--sub" data-state-based-visibility="costs-question-yes">
         <p> Type in the costs listed in your offer, adding additional costs as needed. </p>
         <p>These are estimates based on students’ reported spending. Your actual expenses will depend on which courses you take, whether you have dependents, your personal budgeting, and other factors.</p>
         <p>The school uses these estimates to calculate how much aid you can receive. If you think you will spend more, contact the school’s financial aid office—you may be eligible for more aid.</p>
     </div>
 
-    <div class="costs_content-section costs_content-section_content block block__sub" data-state-based-visibility="costs-question-no">
+    <div class="costs_content-section costs_content-section_content block block--sub" data-state-based-visibility="costs-question-no">
         <p> This is the most recent data from the U.S. Department of Education, but it is at least one year old. Ask the financial aid office for up-to-date estimates. Your actual spending will depend on which courses you take, whether you have dependents, your personal budgeting, and other factors.</p>
         <p> The school uses these estimates to calculate how much aid you can receive. If you will spend more, contact the school’s financial aid office—you may be eligible for more aid.</p>
     </div>
 
     <div class="costs_content-section financial-items" id="costs_inputs-section">
-        <div class="block block__mid">
+        <div class="block block--mid">
             <h3 class="u-border-bottom">Direct costs</h3>
             <p> Direct costs are what you will owe the school at the beginning of each term. Your actual bill will vary from the numbers here. </p>
             {{
@@ -82,7 +82,7 @@ <h3 class="u-border-bottom">Direct costs</h3>
                 })
             }}
         </div>
-        <div class="block block__mid">
+        <div class="block block--mid">
             <h3 class="u-border-bottom">Indirect costs</h3>
             <p> Indirect costs are other school year necessities, like childcare and traveling between home and school. Though these vary from student to student, start with the numbers in your offer and then adjust as needed.</p>
 
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-grants-and-scholarships.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-grants-and-scholarships.html
index 60bde71d805..7954eeccf37 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-grants-and-scholarships.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-grants-and-scholarships.html
@@ -8,7 +8,7 @@ <h2 tabindex="-1">Grants and scholarships</h2>
         'Not sure where your grants and scholarships are listed? One way to identify grants and scholarships on your offer is to use the <a href="http://www.myfinancialaidletter.org/" target="_blank" class="external-link" rel="noreferrer noopener">Hechinger Report’s OfferLetterDECODER</a>, which color codes the different types of funding in offers uploaded as PDFs. (This links to a third-party resource. We do not endorse the third-party or guarantee the accuracy of this third-party information. There may be other resources that also serve your needs.)' | safe
     ) }}
     <div class="grants-and-scholarships_content-section financial-items">
-        <div class="block block__mid">
+        <div class="block block--mid">
             <h3 class="u-border-bottom">Grants</h3>
             <div class="undergrad-content">
                 {{
@@ -68,7 +68,7 @@ <h3 class="u-border-bottom">Grants</h3>
                     'data_attribute': 'data-financial-item="grant_other"'
                 })
             }}
-            <div class="block block__sub">
+            <div class="block block--sub">
                 <h4 class="u-border-bottom">Servicemember benefits</h4>
                 {{
                     input.render({
@@ -100,7 +100,7 @@ <h4 class="u-border-bottom">Servicemember benefits</h4>
         </div>
     </div>
     <div class="grants-and-scholarships_content-section financial-items">
-        <div class="block block__mid">
+        <div class="block block--mid">
             <h3 class="u-border-bottom">Scholarships</h3>
             {{
                 input.render({
@@ -129,7 +129,7 @@ <h3 class="u-border-bottom">Scholarships</h3>
         </div>
     </div>
     <div class="grants-and-scholarships_content-section financial-items">
-        <div class="block block__mid">
+        <div class="block block--mid">
             {{
                 text_item.render({
                     'label': 'Total grants and scholarships',
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/04-work-study.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/04-work-study.html
index 4cee8c8411f..7d63b9a51f3 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/04-work-study.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/04-work-study.html
@@ -2,7 +2,7 @@
     <h2 tabindex="-1">Work-study</h2>
     <p>Work-study programs are part-time jobs on campus. If your offer includes work-study, that means you are eligible to apply for work-study jobs&mdash;a job will not be lined up for you. The work-study amount in your offer is the maximum you can earn. It is estimated and <strong>not guaranteed.</strong></p>
 
-    <div class="block block__mid">
+    <div class="block block--mid">
         {{
             input.render({
                 'label': 'Maximum, estimated work-study income',
@@ -40,7 +40,7 @@ <h2 tabindex="-1">Work-study</h2>
         ) }}
     </div>
 
-    <div class="block block__mid grants-scholarships_grad-fellowships graduate-content">
+    <div class="block block--mid grants-scholarships_grad-fellowships graduate-content">
         <h3>Fellowships and assistantships</h3>
         <p>In addition to work-study, graduate students may be eligible to earn additional funding from fellowships and/or assistantships.</p>
         {{
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/05-federal-loans.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/05-federal-loans.html
index 730927ef2b5..cdff6443750 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/05-federal-loans.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/05-federal-loans.html
@@ -17,7 +17,7 @@ <h2 tabindex="-1">Federal loans</h2>
     ) }}
 
     <div class="financial-items">
-        <div class="block block__mid undergrad-content">
+        <div class="block block--mid undergrad-content">
             {{
                 input.render({
                     'label': 'Direct Subsidized Loan',
@@ -44,7 +44,7 @@ <h2 tabindex="-1">Federal loans</h2>
                 })
             }}
         </div>
-        <div class="block block__mid">
+        <div class="block block--mid">
             {{
                 input.render({
                     'label': 'Direct Unsubsidized Loan',
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/06-school-loans.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/06-school-loans.html
index ae058e8861f..55188034816 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/06-school-loans.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/06-school-loans.html
@@ -11,7 +11,7 @@ <h2 tabindex="-1">Other loans (loans from your state, the school, and nonprofits
         '',
         'Only borrow what you need. Entering the amount here does not obligate you to borrow this money.'
     ) }}
-    <div class="block block__mid block__flush-top financial-item-group">
+    <div class="block block--mid block--flush-top financial-item-group">
         {{
             input.render({
                 'label': 'Loan from your state',
@@ -37,7 +37,7 @@ <h2 tabindex="-1">Other loans (loans from your state, the school, and nonprofits
             })
         }}
     </div>
-    <div class="block block__mid financial-item-group">
+    <div class="block block--mid financial-item-group">
         {{
             input.render({
                 'label': 'Loan from the school',
@@ -63,7 +63,7 @@ <h2 tabindex="-1">Other loans (loans from your state, the school, and nonprofits
             })
         }}
     </div>
-    <div class="block block__mid block__flush-bottom financial-item-group">
+    <div class="block block--mid block--flush-bottom financial-item-group">
 
         {{
             input.render({
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/07-other-resources.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/07-other-resources.html
index d5dc91deb4a..d61b87cf9c8 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/07-other-resources.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/07-other-resources.html
@@ -9,7 +9,7 @@ <h2 tabindex="-1">Other sources</h2>
         'Have you or your family lost income or experienced other financial hardship since you applied to school? Talk to the financial aid office if your or your family\'s financial situation has changed. They may be able to adjust your aid.' | safe
     ) }}
 
-    <div class="block block__mid financial-items">
+    <div class="block block--mid financial-items">
         {{
             input.render({
                 'label': 'Personal funds',
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/09-make-a-plan.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/09-make-a-plan.html
index cfc35b1399c..e8033cd7c32 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/09-make-a-plan.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/09-make-a-plan.html
@@ -29,7 +29,7 @@ <h3 class="h4 header_border-bottom">Costs vs. funding</h3>
 
     <div id="make-a-plan_chart"></div>
 
-    <div class="block block__mid">
+    <div class="block block--mid">
         <h3>Get your uncovered costs down to $0</h3>
 
         <p>From cheapest to most expensive, here are your options for closing that gap:</p>
@@ -329,7 +329,7 @@ <h3>Get your uncovered costs down to $0</h3>
                 'note': '<strong>Take out more federal loans:</strong> Generally, your financial aid offer includes the maximum amount of Direct Loans available to you. Contact the financial aid office to find out more.' | safe
             } %}
             {% call() flyout(flyout_settings) %}
-                <div class="block block__mid block__flush-top financial-item-group undergrad-content">
+                <div class="block block--mid block--flush-top financial-item-group undergrad-content">
                     {{
                         input.render({
                             'label': 'Direct Subsidized Loan',
@@ -356,7 +356,7 @@ <h3>Get your uncovered costs down to $0</h3>
                         })
                     }}
                 </div>
-                <div class="block block__mid block__flush-bottom financial-item-group">
+                <div class="block block--mid block--flush-bottom financial-item-group">
                     {{
                         input.render({
                             'label': 'Direct Unsubsidized Loans',
@@ -392,7 +392,7 @@ <h3>Get your uncovered costs down to $0</h3>
                 'note': '<strong>Borrow more from the school:</strong> Contact the financial aid office to find out more. Remember, these loans may not offer the same protections as federal student loans.' | safe
             } %}
             {% call() flyout(flyout_settings) %}
-                <div class="block block__mid block__flush-top financial-item-group">
+                <div class="block block--mid block--flush-top financial-item-group">
                     {{
                         input.render({
                             'label': 'Loan from your state',
@@ -418,7 +418,7 @@ <h3>Get your uncovered costs down to $0</h3>
                         })
                     }}
                 </div>
-                <div class="block block__mid financial-item-group">
+                <div class="block block--mid financial-item-group">
                     {{
                         input.render({
                             'label': 'Loan from this school',
@@ -444,7 +444,7 @@ <h3>Get your uncovered costs down to $0</h3>
                         })
                     }}
                 </div>
-                <div class="block block__mid block__flush-bottom financial-item-group">
+                <div class="block block--mid block--flush-bottom financial-item-group">
                     {{
                         input.render({
                             'label': 'Loan from a non-profit',
@@ -471,7 +471,7 @@ <h3>Get your uncovered costs down to $0</h3>
                     }}
                 </div>
             {% endcall %}
-            <div class="block block__mid">
+            <div class="block block--mid">
                 <h3 class="other-loan-options">Additional loan options</h3>
                 <p> If you still have uncovered costs after working with the financial aid office to exhaust all the options listed above, you and your family have two more loan options to consider: </p>
                 <ul>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/11-cost-of-borrowing.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/11-cost-of-borrowing.html
index f8d5eb16b15..8296f7beef0 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/11-cost-of-borrowing.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/11-cost-of-borrowing.html
@@ -8,7 +8,7 @@ <h2 tabindex="-1">Estimated total cost of these loans with a standard 10-year re
 
     <p class="median-salary-note"><strong>Note:</strong> Median salary is for financially-aided students working and not enrolled in school 6 years after starting at this school. It includes students who did not graduate. Students tend to overestimate their starting salaries. A median is the middle&mdash;half of the students make more, but half make less.</p>
 
-    <div class="block block__mid">
+    <div class="block block--mid">
         <div class="equation-row">
             {{
                 text_item.render({
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/12-affording-your-loan.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/12-affording-your-loan.html
index c63706440a5..3bc76f750bc 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/12-affording-your-loan.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/12-affording-your-loan.html
@@ -7,7 +7,7 @@ <h2><strong>Your estimated monthly payment is <span data-financial-item="debt_te
 
     <h2>1. Check out two ways to help you decide if you can afford this payment</h2>
 
-    <div class="affording-loans-choices block block__sub">
+    <div class="affording-loans-choices block block--sub">
         {{
             radio.render({
               'name':  "affording-display-radio",
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
index 53c2d2bd297..21b7f09c7fe 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
@@ -19,7 +19,7 @@ <h2 tabindex="-1">Compare this school to others like it</h2>
 
         <h3 class="u-border-bottom"><span data-school-item="school">Example University</span></h3>
         <div class="content-l">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <div class="school-fact">
                     <strong>Location:</strong>
                     <span data-school-item="city">City</span>, <span data-school-item="state">State</span>
@@ -33,7 +33,7 @@ <h3 class="u-border-bottom"><span data-school-item="school">Example University</
                     <span data-school-item="enrollment">1</span>
                 </div>
             </div>
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <div>
                     <strong>Highest degree offered:</strong>
                     <span data-school-item="highestDegree">degree</span>
@@ -57,14 +57,14 @@ <h3 class="u-border-bottom"><span data-school-item="school">Example University</
         ) }}
 
         <div class="undergrad-content">
-            <div class="block block__mid school-results_comparison-section school-results_comparison-section__grad-rate">
+            <div class="block block--mid school-results_comparison-section school-results_comparison-section__grad-rate">
                 <h4>Graduation rate</h4>
                 <p>The proportion of full-time, first-time, degree/certificate-seeking undergraduates who completed a degree or certificate within 150% of normal time. For bachelor's degrees, 150% of normal time is typically 6 years. For associate's degrees, 150% of normal time is 3 years. For certificate programs it varies by length; for example, 150% of a typically 6-month program is 9 months.</p>
                 <div class="school-results_rank-display">
                     <div class="big-percentile"><span data-school-item="rateGraduation" data-number-display="percentage"></span></div>
                     <div><span data-school-item="school"></span>'s graduation rate is <strong><span data-school-item="rateGraduation" data-number-display="percentage"></span></strong>. If you are going to school to earn more money, you need to complete your degree to get that payoff.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other <span class="community-college">2</span><span class="four-year-college">4</span> year schools that are also:
                     </legend>
@@ -101,13 +101,13 @@ <h4>Graduation rate</h4>
                 <p><span data-school-item="school"></span>'s graduation rate falls in the <strong><span data-state-item="gradMeterThird"></span></strong> of all <span data-state-item="gradMeterCohortName"></span> schools granting <span class="community-college">2</span><span class="four-year-college">4</span>-year degrees.</p>
             </div>
 
-            <div class="block block__mid community-college-content school-results_comparison-section school-results_comparison-section__transfer-rate" data-state-based-visibility="transfer-to-graduation-rate">
+            <div class="block block--mid community-college-content school-results_comparison-section school-results_comparison-section__transfer-rate" data-state-based-visibility="transfer-to-graduation-rate">
                 <h4>Transfer to graduation rate</h4>
                 <div class="school-results_rank-display">
                     <div class="big-percentile"><span data-school-item="??"></span></div>
                     <div><span data-school-item="school"></span>'s transfer to graduation rate is <strong><span data-school-item="" data-number-display="percentage"></span></strong>. If you are going to school to earn more money, you need to complete your degree to get that payoff.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other 2 year schools that are also:
                     </legend>
@@ -134,7 +134,7 @@ <h4>Transfer to graduation rate</h4>
                 <p><span data-school-item="school"></span>'s transfer to graduation rate is [2% higher] than the median of all US community colleges. It falls in the <strong>[middle third]</strong> of these schools.</p>
             </div>
 
-            <div class="block block__mid school-results_comparison-section school-results_comparison-section__default-rate">
+            <div class="block block--mid school-results_comparison-section school-results_comparison-section__default-rate">
                 <h4>Loan default rate</h4>
                 <p>The 3-year default rate is the proportion of student borrowers who defaulted on their federal loans within 3 years of starting to repay them, as a result of missing several monthly payments in a row (typically 9 for federal loans). It does not include defaults on private student loans.</p>
                 <div class="school-results_rank-display">
@@ -143,14 +143,14 @@ <h4>Loan default rate</h4>
                 </div>
             </div>
 
-            <div class="block block__mid school-results_comparison-section school-results_comparison-section__repayment-rate" data-status="min">
+            <div class="block block--mid school-results_comparison-section school-results_comparison-section__repayment-rate" data-status="min">
                 <h4>Loan repayment rate</h4>
                 <p>The repayment rate is the proportion of student borrowers who have reduced the original principal balance of their federal student debt by at least $1 within 3 years of entering repayment. </p>
                 <div class="school-results_rank-display">
                     <div class="big-percentile"><span data-school-item="repay3yr" data-number-display="percentage"></span></div>
                     <div><span data-school-item="school"></span>'s repayment rate is <strong><span data-school-item="repay3yr" data-number-display="percentage"></span></strong>. This tells you how many student borrowers have earned enough money to start paying down their debt.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other <span class="community-college">2</span><span class="four-year-college">4</span> year schools that are also:
                     </legend>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html
index 5f3afe0add7..ed0c520ea01 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html
@@ -1,5 +1,5 @@
 <section class="college-costs_tool-section college-costs_tool-section__summary" data-tool-section="summary">
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h2 tabindex="-1">Review your plan and projected outcomes</h2>
 
         <p>Here is an overview of this school’s costs, your plan for covering them, the debt you are considering, and the school’s results on a few key metrics. As you look over these numbers again, think about whether you are feeling good about going to this school with this financial plan. If you have multiple offers, use this summary to compare them.</p>
@@ -9,7 +9,7 @@ <h2 tabindex="-1">Review your plan and projected outcomes</h2>
                       a-link__icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
-                <span class="a-link_text">Print</span>
+                <span class="a-link__text">Print</span>
             </a>
         </p>
         <div data-state-based-visibility="none">
@@ -19,7 +19,7 @@ <h2 tabindex="-1">Review your plan and projected outcomes</h2>
         </div>
     </div>
 
-    <div class="block block__mid school-summary">
+    <div class="block block--mid school-summary">
         <h3 class="summary_header">School and living situation</h3>
         <dl>
             <dt>School:</dt>
@@ -37,7 +37,7 @@ <h3 class="summary_header">School and living situation</h3>
         </dl>
     </div>
 
-    <div class="block block__mid m-full-width-text">
+    <div class="block block--mid m-full-width-text">
         <h3 class="summary_header">Covering your costs</h3>
         <div class="costs-not-covered">
             {{ notification.render(
@@ -99,7 +99,7 @@ <h3 class="summary_header">Covering your costs</h3>
             </tbody>
         </table>
     </div>
-    <div class="block block__mid m-full-width-text">
+    <div class="block block--mid m-full-width-text">
         <table class="o-table o-table__financial u-w100pct">
             <thead>
                 <tr>
@@ -217,7 +217,7 @@ <h3 class="summary_header">Affording your loans</h3>
                 </tr>
             </tbody>
         </table>
-        <div class="block block__mid">
+        <div class="block block--mid">
             <table class="o-table u-w100pct">
                 <thead>
                     <tr>
@@ -237,7 +237,7 @@ <h3 class="summary_header">Affording your loans</h3>
                 </tbody>
             </table>
         </div>
-        <div class="block block__mid">
+        <div class="block block--mid">
             <table class="o-table u-w100pct">
                 <thead>
                     <tr>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/15-action-plan.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/15-action-plan.html
index c72e3fa3cb9..5dfc9e17188 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/15-action-plan.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/15-action-plan.html
@@ -5,7 +5,7 @@ <h2 tabindex="-1">What to do next</h2>
 
     <p>Do you want to put this plan into action or consider other options?</p>
 
-    <div class="action-plan_choices block block__sub">
+    <div class="action-plan_choices block block--sub">
         {{
             radio.render({
               'name':  "action-plan-radio",
@@ -26,7 +26,7 @@ <h2 tabindex="-1">What to do next</h2>
         }}
     </div>
 
-    <div class="block block__sub action-plan_steps" data-state-based-visibility="put-into-action">
+    <div class="block block--sub action-plan_steps" data-state-based-visibility="put-into-action">
         <h3>How to put this plan into action</h3>
         <div data-state-based-visibility="none">
             <button class="a-btn">Print summary</button>
@@ -34,117 +34,117 @@ <h3>How to put this plan into action</h3>
             <p class="u-mt15"><small>You will also have a chace to print all documents at the end.</small></p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Ask the financial aid office any questions you still have.</h4>
             <p>It’s first on this list, but you should do it whenever you’re confused or unsure of what to do next. They want to help you (and it’s their job)! You will not jeopardize your funding by asking too many questions.</p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Find out what it takes to enroll.</h4>
             <p>How much is the deposit? What paperwork do you need to send in? When are the deposit and any other paperwork due?</p>
         </div>
 
-        <div class="block block__sub undergrad-content associates-content">
+        <div class="block block--sub undergrad-content associates-content">
             <h4>Research the details of your grants and scholarships.</h4>
             <p>Read or ask about the requirements of each grant and scholarship. Ask if they are renewable for following years—if not, you’ll need to find replacement funding next year. </p>
         </div>
 
-        <div class="block block__sub graduate-content">
+        <div class="block block--sub graduate-content">
             <h4>Research the details of your grants, scholarships, fellowships, and assistantships.</h4>
             <p>Read or ask about the requirements of each grant and scholarship. Ask if they are renewable for following years—if not, you’ll need to find replacement funding next year. </p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Make a budget.</h4>
             <p><a href="https://files.consumerfinance.gov/f/documents/cfpb_your-money-your-goals_cash_flow_budget_tool_2018-11_ADA.pdf" target="_blank" class="external-link" rel="noreferrer noopener">Use this cashflow budget</a> to plan out when you’ll get money and when you’ll have to pay it.</p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Double check that you’ll have enough money when you need it.</h4>
             <p>If you have uncovered upfront costs, talk to the financial aid office about options to reduce the amount due at the beginning of the school year, like tuition installment plans. Or can you (or your family) start saving for these now? </p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Accept the loans you want.</h4>
             <p> More paperwork ahead! You’ll also need to do entrance counseling for federal loans. Remember, you don’t need to accept all the loans you’re offered or the full amount.</p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Put a reminder in your calendar to fill out FAFSA on October 1.</h4>
             <p>If you’ll be in school next year, you’ll need to start this process again in a few months.</p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Set another reminder to visit the financial aid office every term.</h4>
             <p>Ask about new opportunities for funding. For example, some scholarships are only open to certain majors or only for upperclassmen.</p>
         </div>
 
-        <div class="block block__sub undergrad-content associates-content">
+        <div class="block block--sub undergrad-content associates-content">
             <h4>Know how many credits you already have and plan to graduate on time.</h4>
             <p> Make sure you get credit for your AP, IB, dual-enrollment, and transfer courses. Work with an academic adviser to stay on track for on-time graduation.</p>
         </div>
 
-        <div class="block block__sub undergrad-content">
+        <div class="block block--sub undergrad-content">
             <h4>Ask about getting credits from a more affordable school.</h4>
             <p>Reach out to your academic advisor about taking core requirements at community college. (But be strategic about when you take them&mdash;if you start school with enough credits to count as a second- or third-year student, you may be disqualified from grants and scholarships for first-year students.)</p>
         </div>
 
-        <div class="block block__sub graduate-content">
+        <div class="block block--sub graduate-content">
             <h4>Ask about getting credits from a more affordable school.</h4>
             <p>Graduate programs may allow you to transfer credits.</p>
         </div>
 
-        <div class="block block__sub undergrad-content associates-content">
+        <div class="block block--sub undergrad-content associates-content">
             <h4>Apply for additional institutional or private student loans.</h4>
             <p>To get the best deal for your situation, read the fine print and shop around for the lowest interest rates and fees. You’ll probably need a cosigner.</p>
         </div>
 
-        <div class="block block__sub graduate-content">
+        <div class="block block--sub graduate-content">
             <h4>Apply for additional loans, including Grad PLUS and private options.</h4>
             <p>To get the best deal for your situation, read the fine print and shop around for the lowest interest rates and fees. You’ll probably need a cosigner.</p>
         </div>
 
     </div>
 
-    <div class="block block__sub action-plan_steps" data-state-based-visibility="consider-other-options">
+    <div class="block block--sub action-plan_steps" data-state-based-visibility="consider-other-options">
         <h3>Consider other options</h3>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Reduce your living costs.</h4>
             <p>Can you live at home? Stick to public transit?</p>
         </div>
 
-        <div class="block block__sub undergrad-content">
+        <div class="block block--sub undergrad-content">
             <h4>Ask about getting credits from a more affordable school.</h4>
             <p>Reach out to your academic advisor about taking core requirements at community college. (But be strategic about when you take them&mdash;if you start school with enough credits to count as a second- or third-year student, you may be disqualified from grants and scholarships for first-year students.)</p>
         </div>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <h4>Look for more grants and scholarships.</h4>
             <p>There are always more available, even if school starts soon! <a href="https://www.careeronestop.org/Toolkit/Training/find-scholarships.aspx" target="_blank" class="external-link" rel="noreferrer noopener">Scholarship Finder</a> is one place to look.</p>
         </div>
 
-        <div class="block block__sub associates-content">
+        <div class="block block--sub associates-content">
             <h4>Consider working.</h4>
             <p>A job can reduce your borrowing and provide other benefits, but working more than 20 hours a week is associated with lower grades.</p>
         </div>
 
-        <div class="block block__sub undergrad-content graduate-content">
+        <div class="block block--sub undergrad-content graduate-content">
             <h4>Consider working.</h4>
             <p>While working can reduce borrowing and provide enriching experiences, remember that over 20 hours a week is associated with lower grades.</p>
         </div>
 
-        <div class="block block__sub undergrad-content associates-content">
+        <div class="block block--sub undergrad-content associates-content">
             <h4>Think about other programs at this school.</h4>
             <p> You might want to consider choosing a major that will open the door to more lucrative career fields.</p>
         </div>
 
-        <div class="block block__sub undergrad-content">
+        <div class="block block--sub undergrad-content">
             <h4>Explore other schools.</h4>
             <p>Even if this is the only school you applied to this year, it’s not your only option. For example, if you are pursuing a bachelor's degree, you can always start att community college this year and apply to transfer to another school next year.</p>
         </div>
 
-        <div class="block block__sub graduate-content">
+        <div class="block block--sub graduate-content">
             <h4>Explore other schools.</h4>
             <p>Even if this is the only school you applied to this year, it’s not your only option. Take this year to work, save money, and pursue enrichment opportunities in your field while preparing to apply again next year.</p>
         </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
index 102e04ae6b4..d2857c7a7cf 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
@@ -1,17 +1,17 @@
 <section class="college-costs_tool-section college-costs_tool-section__finish" data-tool-section="save-and-finish">
     <h2 tabindex="-1">Great job!</h2>
     <div class="m-info-unit m-info-unit__inline u-mb30">
-        <div class="m-info-unit_image m-info-unit_image__square" style="background-image: url( {{ static('apps/paying-for-college/img/finish-page.png') }} );">
+        <div class="m-info-unit__image m-info-unit__image__square" style="background-image: url( {{ static('apps/paying-for-college/img/finish-page.png') }} );">
         </div>
-        <div class="m-info-unit_content">
+        <div class="m-info-unit__content">
             <p>You've made a plan to cover your school costs and graduate with as little debt as possible, and learned about the impact of loans on your future.</p>
             <p>Copy and save this link so that you can come back and review your plan. We won't store this information.</p>
         </div>
     </div>
     {% include 'copy-link-form.html' %}
-    <div class="o-form_group">
-        <div class="block block__mid">
-            <fieldset class="o-form_fieldset" data-impact="impactOffer">
+    <div class="o-form__group">
+        <div class="block block--mid">
+            <fieldset class="o-form__fieldset" data-impact="impactOffer">
                 <legend>
                     <h3>Did this tool help you understand your financial aid offer?</h3>
                 </legend>
@@ -44,10 +44,10 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
                 }}
             </fieldset>
         </div>
-        <div class="block block__mid">
+        <div class="block block--mid">
 
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset" data-impact="impactLoans">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset" data-impact="impactLoans">
                     <legend>
                         <h3>Did this tool help you understand the potential impact of student loans?</h3>
                     </legend>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
index e9c87e3a7f5..4399c0ae753 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
@@ -1,4 +1,4 @@
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field">
         <label class="a-label a-label__heading" for="finish_link">
             Your link
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
index 13e68c571da..164d50ce582 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
@@ -15,43 +15,43 @@
 {% macro render( nav_items ) %}
 <nav class="o-secondary-nav"
      aria-label="Section navigation">
-    <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-        <span class="o-secondary-nav_label">
+    <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+        <span class="o-secondary-nav__label">
             {{ _('Navigate this section') }}
         </span>
-        <span class="o-secondary-nav_cues">
-            <span class="o-secondary-nav_cue-open" aria-label="Show">
+        <span class="o-secondary-nav__cues">
+            <span class="o-secondary-nav__cue-open" aria-label="Show">
                 {{ svg_icon('down') }}
             </span>
-            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                 {{ svg_icon('up') }}
             </span>
         </span>
     </button>
 
-    <div class="o-secondary-nav_content">
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents" role="tablist">
+    <div class="o-secondary-nav__content">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents" role="tablist">
         {%- for item in nav_items %}
             {# TODO: refactor JS to rid of custom `o-secondary-nav_li__parent` #}
-            <li class="o-secondary-nav_list-item__parent"
+            <li class="o-secondary-nav__list-item__parent"
                 data-nav-is-active="{{item.current if item.current else 'False'}}"
                 data-nav-is-open="False"
                 role="tab">
-                <a class="o-secondary-nav_link
-                          o-secondary-nav_link__parent"
+                <a class="o-secondary-nav__link
+                          o-secondary-nav__link__parent"
                     href="#"
                     data-gtm_ignore="true"
                     data-nav_section="{{ item.data }}">
                     {{ item.title }}
                 </a>
             {%- if item.children -%}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children"
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children"
                     role="tablist">
                 {%- for child in item.children -%}
                     <li role="tab">
-                        <a class="o-secondary-nav_link"
+                        <a class="o-secondary-nav__link"
                            href="#"
                            data-gtm_ignore="true"
                            data-nav_item="{{ child.data }}">
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
index be6c9ca4b95..b7b179164b7 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
@@ -1,6 +1,6 @@
 {% import 'college-cost-blocks/macros/secondary-nav.html' as secondary_nav with context %}
 
-<aside class="content_sidebar
+<aside class="content__sidebar
               content__flush-top-on-small
               content__flush-sides-on-small
               content__half-top-on-desk
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
index 8f5ded3846d..47040e13229 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
@@ -17,10 +17,10 @@
     <main class="content college-costs" data-state_gotstarted="false"
           id="main"> <!-- content__hide-horizontal-overflow removed for position sticky to work-->
         {%- include 'college-cost-blocks/0-intro.html' -%}
-        <div class="college-costs_app-segment content content__1-3 block block__flush-top">
-            <div class="content_wrapper">
+        <div class="college-costs_app-segment content content__1-3 block block--flush-top">
+            <div class="content__wrapper">
                 {%- include 'college-cost-blocks/nav.html' -%}
-                <div class="content_main
+                <div class="content__main
                             content__flush-top-on-small
                             content__half-top-on-desk
                             content__flush-bottom">
@@ -42,11 +42,11 @@
                             {%- include 'college-cost-blocks/14-summary.html' with context -%}
                             {%- include 'college-cost-blocks/15-action-plan.html' with context -%}
                             {%- include 'college-cost-blocks/16-save-and-finish.html' with context -%}
-                            <div class="college-costs_tool-section_buttons block block__mid">
+                            <div class="college-costs_tool-section_buttons block block--mid">
                                 <button class="a-btn college-costs_buttons__next btn__next-step">Next step</button>
                                 <button class="a-btn a-btn__link btn__save" data-app-button="save-and-finish-later">Save and finish later</button>
                             </div>
-                            <div class="college-costs_save-for-later block block__mid" data-state-based-visibility="save-for-later">
+                            <div class="college-costs_save-for-later block block--mid" data-state-based-visibility="save-for-later">
                                 <p>Copy and save this link so that you can come back and review your plan.</p>
                                 {% include 'college-cost-blocks/copy-link-form.html' %}
                             </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
index 81e0d606865..8c6d5679c03 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
@@ -14,35 +14,35 @@
 <main id="main" data-context="{{url_root}}">
     <div id="financial-offer" class="understanding-financial-aid-offer">
         <section class="m-hero">
-            <div class="m-hero_wrapper wrapper">
-                <div class="m-hero_text">
-                    <h1 class="m-hero_heading">
+            <div class="m-hero__wrapper wrapper">
+                <div class="m-hero__text">
+                    <h1 class="m-hero__heading">
                         Understanding your financial aid offer
                     </h1>
-                    <p class="m-hero_subhead">
+                    <p class="m-hero__subhead">
                         This personalized summary will help you evaluate your
                         financial aid offer from your school to see how
                         student debt may impact your future finances. </p>
                 </div>
-                <div class="m-hero_image-wrapper">
-                  <div class="m-hero_image"></div>
+                <div class="m-hero__image-wrapper">
+                  <div class="m-hero__image"></div>
                 </div>
             </div>
         </section>
-        <div class="content_line"></div>
-        <section class="verify step content_wrapper">
-            <div class="content_main">
+        <div class="content__line"></div>
+        <section class="verify step content__wrapper">
+            <div class="content__main">
 
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noSchool">
                     {{ svg_icon('error-round') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the school ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right school ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -51,13 +51,13 @@ <h1 class="m-hero_heading">
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noProgram">
                    {{ svg_icon('error-round') }}
-                   <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                   <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the program ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right program ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -65,13 +65,13 @@ <h1 class="m-hero_heading">
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noOffer">
                     {{ svg_icon('error-round') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation"></p>
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation"></p>
                             The information your school provided is missing the offer ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right offer ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation"></p>
+                        <p class="m-notification__explanation"></p>
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -196,12 +196,12 @@ <h2 class="verify_prompt">
                         </form>
                     </div>
                 </div>
-                <div class="content_line"></div>
+                <div class="content__line"></div>
             </div>
         </section>
         <section id="info-right" class="information-right" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__right">
@@ -246,11 +246,11 @@ <h2 class="instructions_about-heading">
                             </div>
                         </div>
                     </div>
-                    <div class="content_line"></div>
+                    <div class="content__line"></div>
                 </div>
             </section>
-            <section class="review step content_wrapper" data-section="review">
-                <div class="content_main">
+            <section class="review step content__wrapper" data-section="review">
+                <div class="content__main">
                     <div class="review_wrapper">
                         <div class="review_intro">
                             <h2 class="step_heading">
@@ -390,7 +390,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -564,7 +564,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -620,7 +620,7 @@ <h4 class="aid-form_summary-heading">
                                         </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -818,7 +818,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="workstudy"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -869,7 +869,7 @@ <h4 class="aid-form_summary-heading">
                                         </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -959,7 +959,7 @@ <h3 class="offer-part_heading">
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="perkins"></div>
+                                    <div class="content__line loans_line" data-section="perkins"></div>
                                     <div class="form-group_item"
                                     data-section="subsidized">
                                         <div class="aid-form_label-wrapper">
@@ -1011,7 +1011,7 @@ <h3 class="offer-part_heading">
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line"
+                                    <div class="content__line loans_line"
                                     data-section="subsidized"></div>
                                     <div class="form-group_item"
                                     data-section="unsubsidized">
@@ -1065,7 +1065,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div data-section="gradPlus">
-                                      <div class="content_line loans_line"></div>
+                                      <div class="content__line loans_line"></div>
                                       <div class="form-group_item">
                                           <div class="aid-form_label-wrapper">
                                               <label class="form-label"
@@ -1114,7 +1114,7 @@ <h3 class="offer-part_heading">
                                     </div>
                                     <div class="aid-form_inline-subtotal"
                                     data-section="federalLoans">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1480,7 +1480,7 @@ <h3 class="offer-part_heading">
                                         </button>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1577,7 +1577,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="tuitionpaymentplan">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1655,7 +1655,7 @@ <h4 class="aid-form_summary-heading">
                                     </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1724,7 +1724,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="summaryLoanTotal"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1853,7 +1853,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="summaryLoanTotal"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1950,8 +1950,8 @@ <h4 class="aid-form_summary-heading">
                 </div>
             </section>
             <section class="continue step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="continue_wrapper">
                             <div class="continue_content">
                                 <h2 class="step_heading">
@@ -1979,9 +1979,9 @@ <h2 class="step_heading">
                     </div>
                 </div>
             </section>
-            <section class="evaluate step content_wrapper"
+            <section class="evaluate step content__wrapper"
             data-section="evaluate">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="evaluate_wrapper">
                         <div class="evaluate_intro">
                             <h2 class="step_heading">
@@ -2792,7 +2792,7 @@ <h4 class="aid-form_title">
                                     </div>
                                 </form>
                                 <div class="aid-form_summary">
-                                    <div class="content_line
+                                    <div class="content__line
                                     aid-form_equals-line"></div>
                                     <div class="line-item line-item__total">
                                         <div class="line-item_title">
@@ -2935,8 +2935,8 @@ <h4 class="metric_heading">
                 </div>
             </section>
             <section class="question step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="question_wrapper">
                             <div class="question_content">
                                 <h2 class="step_heading step_settlement">
@@ -2985,9 +2985,9 @@ <h2 class="step_heading step_nonsettlement">
                     </div>
                 </div>
             </section>
-            <section class="get-options step content_wrapper
+            <section class="get-options step content__wrapper
             column-well_wrapper">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="get-options_wrapper">
                         <div class="get-options_intro followup__no-not-sure">
                             <h2 class="step_heading">
@@ -3138,7 +3138,7 @@ <h3 class="option_heading">
                         <aside class="get-options__sidebar
                                       column-well
                                       column-well__emphasis
-                                      content_sidebar">
+                                      content__sidebar">
                             <div class="column-well_content">
                                 <h3 class="option__take-action-header">
                                     What you can do
@@ -3205,9 +3205,9 @@ <h4>
                     </div>
                 </div>
             </section>
-            <section class="next-steps step content_wrapper">
-                <div class="content_main">
-                    <div class="content_line"></div>
+            <section class="next-steps step content__wrapper">
+                <div class="content__main">
+                    <div class="content__line"></div>
                     <div class="next-steps_wrapper">
                         <div class="next-steps_intro">
                             <h2 class="step_heading">
@@ -3256,7 +3256,7 @@ <h2 class="step_heading">
                                 <button class="a-btn a-btn__full-on-xs"
                                 type="button"
                                 data-gtm_ignore="true">
-                                    <span class="a-btn_icon__on-left">
+                                    <span class="a-btn__icon--on-left">
                                         {{ svg_icon('print') }}
                                     </span>
                                     Print
@@ -3268,8 +3268,8 @@ <h2 class="step_heading">
             </section>
         </section>
         <section id="info-wrong" class="information-wrong" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__wrong">
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html
index 2b21e1302f8..e3f45ad305f 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html
@@ -16,16 +16,16 @@ <h1>
             includes:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Where the data comes from
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Explanations of the calculations
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Definitions of financial aid terms
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Links to resources to learn more about
                 related topics
             </li>
@@ -76,41 +76,41 @@ <h2 id="assumptions">
             students:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Total cost of attendance, including tuition and
                 fees, remains the same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Total amount of scholarships and grants remains the
                 same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Amount you can contribute remains the same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan amounts and interest rates remain the same each
                 year (since changes in interest rates are difficult
                 to predict, we assume they will stay the same while
                 you are in school)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility for your federal, private, and
                 school-provided loans remain the same, and if your
                 parents are borrowing a PLUS loan their eligibility
                 remains the same.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will successfully complete your program on time
                 (based on the length of time you selected at the
                 beginning of the tool)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will repay your loan under the standard, 10-year
                 repayment plan, unless you appear to meet the
                 eligibility rules for the 25-year extended repayment
                 plan and you select the longer repayment option.
                 <ul class="m-list">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         The 25-year extended repayment plan is
                         available for borrowers who owe at least
                         $30,000 in Direct student loans at the time
@@ -119,12 +119,12 @@ <h2 id="assumptions">
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will begin repayment after you graduate, and the
                 allotted grace period expires (between 6-9 months
                 after graduating, depending on the type of loan)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For the purposes of calculating interest and
                 repayments, we assume student loans are fully
                 disbursed (meaning the funds are sent to the school)
@@ -132,7 +132,7 @@ <h2 id="assumptions">
                 typically they are disbursed over the course of
                 different academic terms.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility requirements or types of federal aid
                 available to you do not change while you are
                 attending school
@@ -189,14 +189,14 @@ <h3>
             withdraw from school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Mainly for undergraduates who have not previously
                 earned a degree
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ pellCap }} per academic
                 year
             </li>
@@ -213,11 +213,11 @@ <h3>
             school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For active-duty or reserve servicemembers who are
                 pursuing higher education
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ militaryAssistanceCap }} per
                 academic year depending on your service
             </li>
@@ -234,10 +234,10 @@ <h3>
             school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For servicemembers and veterans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Benefits include funds to cover tuition and fees, a
                 monthly living allowance, and an annual book stipend
             </li>
@@ -316,32 +316,32 @@ <h4>
             will not see this as an option under federal loans.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ perkinsUnderCap }} per
                 academic year for undergraduates
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ perkinsGradCap }} for graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ perkinsRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts nine months after you leave school
                 or drop below half time (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest doesn’t start accruing until you leave
                 school and your grace period ends
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 No fee to take out loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Due to limited funds for this type of loan, not
                 everyone who qualifies for this program will receive
                 one
@@ -352,37 +352,37 @@ <h4>
             also known as a Direct Subsidized Loan.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need to undergraduate
                 students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ subsidizedCapYearOne }}
                 per academic year for the first year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 The maximum amount you can borrow per year increases
                 every year you are in school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ subsidizedRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 The Department of Education pays any interest
                 accruing on your loans while you are in school
                 (attending at least half-time) and during your grace
                 period
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ DLOriginationFee }} of the
                 total loan amount
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Graduate students are not eligible
             </li>
         </ul>
@@ -391,39 +391,39 @@ <h4>
             loan also known as a Direct Unsubsidized Loan.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For all students, regardless of financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapYearOne }} for the
                 first year in school for dependent undergraduates
                 <ul>
-                    <li class="m-list_item__spaced">
+                    <li class="m-list__item__spaced">
                         Increases as you progress through school, up
                         to {{ unsubsidizedCapYearThree }}
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapIndepYearOne }}
                 for the first year for independent undergraduate
                 students (students who are not required to provide
                 parental information when applying for federal
                 financial aid)
                 <ul class="m-list">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         Increases as you progress through school, up
                         to {{ unsubsidizedCapIndepYearThree }}
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapGrad }} for
                 graduate or professional students – higher annual
                 limits apply to students pursuing degrees in the
                 health professions.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 If you take out both subsidized and unsubsidized
                 loans the subsidized loans count toward the
                 unsubsidized loan cap. For example, if you are a
@@ -431,24 +431,24 @@ <h4>
                 loans you would only be eligible for $2,000 in
                 unsubsidized loans your first year.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ unsubsidizedRateUndergrad }} interest rate
                 for undergraduates fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ unsubsidizedRateGrad }} interest rate
                 for graduate or professional students fixed
                 for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest starts accruing while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ DLOriginationFee }} of the
                 total loan amount
             </li>
@@ -460,37 +460,37 @@ <h4>
             loan option.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For all graduate and professional students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Available to those who need to borrow more than the
                 maximum unsubsidized loan amounts to cover the cost
                 of attendance
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility is based on the borrower’s credit
                 history, but the credit check does not look at the
                 borrower’s credit score or income
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Can borrow up to the program’s cost of attendance,
                 minus any other financial assistance received ,
                 including other federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ gradPlusRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest starts accruing while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (deferment period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ plusOriginationFee }} of the
                 total loan amount
             </li>
@@ -517,35 +517,35 @@ <h3>
             vary, and private loans are not always available.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For undergraduate or graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Requires credit check
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Borrowers may need to apply with cosigner to meet
                 credit standards or qualify for a lower interest
                 rate
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually carry higher interest rates than federal
                 loans; many private loan products charge variable
                 rates that change over the life of the loan, unlike
                 federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest generally starts accruing while you are
                 still in school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment typically starts after you leave school,
                 and most lenders currently offer a six-month grace
                 period. Some private loans programs require
                 borrowers to start making monthly payments during
                 school or right after graduation.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually do not offer the flexible repayment options
                 that are available for federal student loans
             </li>
@@ -563,28 +563,28 @@ <h3>
             installment contract.&rdquo;
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For undergraduate or graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 May require credit check and/or a cosigner to
                 qualify
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually carry higher interest rates than federal
                 loans; many private loan products charge variable
                 rates that change over the life of the loan, unlike
                 federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest doesn’t start accruing until you leave
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment likely starts while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually do not offer the flexible repayment options
                 available for federal student loans
             </li>
@@ -808,33 +808,33 @@ <h3>
             Categories of BLS CE data:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Housing (includes utilities, cell phone bills, and
                 house repairs)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Food
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Clothing (apparel and services)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Transportation
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Healthcare (includes health insurance and
                 prescriptions)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Entertainment spending
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Pension and Social Security
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Taxes
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Other (cash contributions, alcohol, tobacco,
                 personal care products and services, reading,
                 education, and miscellaneous expenses)
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
index b154f450d7d..c4dc839ceb6 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
@@ -28,7 +28,7 @@
     {% set default_text = 'No information provided' %}
     <h1>{{ product.name }}</h1>
     <div class="content-l">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <dl>
                     <dt><h2>Issuer name</h2></dt>
                     <dd>{{ product.issuer_name }}</dd>
@@ -36,7 +36,7 @@ <h1>{{ product.name }}</h1>
                     <dd>{{ product.prepaid_type if product.prepaid_type else default_text }}</dd>
                 </dl>
             </div>
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <dl>
                     <dt><h2>Program manager</h2></dt>
                     <dd>{{ product.program_manager if product.program_manager else default_text }}</dd>
@@ -51,15 +51,15 @@ <h1>{{ product.name }}</h1>
                 {% if product.other_relevant_parties %}
                     {% if product.other_relevant_parties | length > 500 %}
                         <div class="o-summary-minimal">
-                            <div class="o-summary-minimal_content">
+                            <div class="o-summary-minimal__content">
                                 {{ product.other_relevant_parties | replace('\n', '; ') }}
                             </div>
-                            <button class="o-summary-minimal_btn">
-                                <span class="o-summary-minimal_cue-open">
+                            <button class="o-summary-minimal__btn">
+                                <span class="o-summary-minimal__cue-open">
                                     Show full list of relevant parties
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-summary-minimal_cue-close">
+                                <span class="o-summary-minimal__cue-close">
                                     Hide full list of relevant parties
                                     {{ svg_icon('minus-round') }}
                                 </span>
@@ -115,7 +115,7 @@ <h2 class="h3">Download older agreements</h2>
     {% if support_text %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 {{ support_text.sidefoot_heading | safe }}
             </h2>
             </header>
@@ -126,7 +126,7 @@ <h2 class="m-slug-header_heading">
     {% if disclaimer_text %}
         <div class="block">
             <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 {{ disclaimer_text.sidefoot_heading | safe }}
             </h2>
             </header>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
index d4166722f3c..522a5927e65 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
@@ -67,7 +67,7 @@ <h3 class="h4 u-mb5">Search within</h3>
                     <div class="flex-all">
                         <div class="m-btn-inside-input input-contains-label">
                             <label for="searchText"
-                                   class="input-contains-label_before input-contains-label_before__search"
+                                   class="input-contains-label__before input-contains-label__before__search"
                                    aria-hidden="true">
                                 {{ svg_icon('search') }}
                             </label>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
index daea23a6fce..c8929d28e03 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
@@ -5,7 +5,7 @@ <h4 class="h3">
         <a href="{{ result.get_absolute_url() }}">{{ result.name }}</a>
     </h4>
     <div class="content-l">
-        <div class="content-l_col content-l_col-1-2">
+        <div class="content-l__col content-l__col-1-2">
             <dl>
                 <dt>Issuer name</dt>
                 <dd>{{ result.issuer_name }}</dd>
@@ -19,7 +19,7 @@ <h4 class="h3">
                 <dd>{{ result.status if result.status else default_text }}</dd>
             </dl>
         </div>
-        <div class="content-l_col content-l_col-1-2">
+        <div class="content-l__col content-l__col-1-2">
             <h5 class="h4 u-mb5">Download most recent agreement files</h5>
             {% set latest_agreement = result.most_recent_agreement %}
             <p class="u-break-word">
@@ -27,7 +27,7 @@ <h5 class="h4 u-mb5">Download most recent agreement files</h5>
                     {{ latest_agreement.filename }}
                 </a>
             </p>
-            <div class="block block__sub">
+            <div class="block block--sub">
                 <h5 class="h4 u-mb5">View all agreement files</h5>
             <p><a href="{{ result.get_absolute_url() }}">View all agreements for {{ result.name }}</a></p>
             </div>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
index a5a934b3855..197d6301f8d 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
@@ -5,7 +5,7 @@
 {% import 'v1/includes/molecules/pagination.html' as pagination with context %}
 {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
 
-<aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+<aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
     <h3>Narrow results by...</h3>
 
     <form method="get" action="." class="o-form ">
@@ -41,8 +41,8 @@ <h3>Narrow results by...</h3>
                 'is_midtone': true
             } %}
             {% call() expandable(expandable_settings) %}
-             <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+             <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         {% for type in active_filters['prepaid_type'] %}
                             {% if type != None %}
@@ -72,8 +72,8 @@ <h3>Narrow results by...</h3>
             } %}
             {% call() expandable(expandable_settings) %}
 
-             <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+             <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         {% for option in active_filters['status'] %}
                         <li>
@@ -96,7 +96,7 @@ <h3>Narrow results by...</h3>
     </form>
 </aside>
 
-<div class="content_main content__flush-all-on-small content__flush-bottom">
+<div class="content__main content__flush-all-on-small content__flush-bottom">
     <div class="results_header">
         {% if current_count and current_count > 0  %}
             <div class="results_count">
@@ -156,7 +156,7 @@ <h3>No results match your search.</h3>
 
     <div class="results_paginator">
         {% if paginator.num_pages > 1 %}
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 {{ pagination.render( paginator.num_pages, current_page, '', '' ) }}
             </div>
         {% endif %}
@@ -165,13 +165,13 @@ <h3>No results match your search.</h3>
     <div class="database-disclaimer">
         <div class="o-well">
             {% if disclaimer_text %}
-            <div class="block block__sub block__flush-top">
+            <div class="block block--sub block--flush-top">
                 <h4>{{ disclaimer_text.sidefoot_heading | safe }}</h4>
                 {{ disclaimer_text.text | safe }}
             </div>
             {% endif %}
             {% if support_text %}
-            <div class="block block__sub block__flush-bottom">
+            <div class="block block--sub block--flush-bottom">
                 <h4>{{ support_text.sidefoot_heading | safe }}</h4>
                 {{ support_text.text | safe }}
             </div>
diff --git a/cfgov/privacy/jinja2/privacy/_sidebar.html b/cfgov/privacy/jinja2/privacy/_sidebar.html
index 2b7c63392ac..c1c36fe284e 100644
--- a/cfgov/privacy/jinja2/privacy/_sidebar.html
+++ b/cfgov/privacy/jinja2/privacy/_sidebar.html
@@ -1,4 +1,4 @@
-<div class="block block__flush-top">
+<div class="block block--flush-top">
     <h3>About us</h3>
     <p>
 	We're the Consumer Financial Protection Bureau (CFPB), a U.S. government agency that makes sure banks, lenders, and other financial companies treat you fairly.
diff --git a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
index 779edd61c1f..cbbf5d27501 100644
--- a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
+++ b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
@@ -47,22 +47,22 @@ <h1>Consent for disclosure of records protected under the Privacy Act</h1>
         </div>
         <h2 class="h4">This form may be used if you are:</h2>
         <ul class="m-list">
-            <li class="m-list_item">Providing consent and authorizing the CFPB to disclose your records to another person or entity</li>
-            <li class="m-list_item">A parent consenting to and authorizing the disclosure of the records of a minor</li>
-            <li class="m-list_item">A legal guardian consenting to and authorizing disclosure of the records of an incompetent</li>
+            <li class="m-list__item">Providing consent and authorizing the CFPB to disclose your records to another person or entity</li>
+            <li class="m-list__item">A parent consenting to and authorizing the disclosure of the records of a minor</li>
+            <li class="m-list__item">A legal guardian consenting to and authorizing disclosure of the records of an incompetent</li>
         </ul>
         <p>If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
         <h2>Information used for identity-proofing and authentication</h2>
         <p>Please provide the following information to assist the CFPB in verifying your identity:</p>
         <h2 class="h4">Required</h2>
         <ul class="m-list">
-            <li class="m-list_item">Full name</li>
-            <li class="m-list_item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
+            <li class="m-list__item">Full name</li>
+            <li class="m-list__item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
         </ul>
         <h2 class="h4">Optional</h2>
         <ul class="m-list">
-            <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-            <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+            <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+            <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
         </ul>
         <h3>For requests by parent or legal guardian</h3>
         <p>If you are the parent consenting to and authorizing disclosure of the records of a minor or the legal guardian consenting to and authorizing disclosure of the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request. If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
@@ -77,7 +77,7 @@ <h2>Information required to locate the records</h2>
               enctype="multipart/form-data"
               method="POST">
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.description.id_for_label }}">
@@ -88,32 +88,32 @@ <h2>Information required to locate the records</h2>
                 </div>
                 <h3>Additional information that might assist in locating the records</h3>
                 <p>This enables the CFPB to locate the system of records containing the record(s) with a reasonable amount of effort.</p>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.system_of_record.id_for_label }}">
-                            {{ form.system_of_record.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.system_of_record.label }} <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.system_of_record }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.date_of_records.id_for_label }}">
-                            {{ form.date_of_records.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.date_of_records.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-		        <p class="a-label_helper">{{ form.date_of_records.help_text }}</p>
+		        <p class="a-label__helper">{{ form.date_of_records.help_text }}</p>
                         {{ form.date_of_records }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.other_info.id_for_label }}">
-                            {{ form.other_info.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.other_info.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-                        <p class="a-label_helper">{{ form.other_info.help_text }}</p>
+                        <p class="a-label__helper">{{ form.other_info.help_text }}</p>
                         {{ form.other_info }}
                     </div>
                 </div>
@@ -123,7 +123,7 @@ <h2>Contact information</h2>
             <p>Please provide your contact information so that we can correspond with you regarding the request.</p>
             <div class="o-well">
                 <h3>Requestor contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_name.id_for_label }}">
@@ -132,7 +132,7 @@ <h3>Requestor contact information</h3>
                         {{ form.requestor_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_email.id_for_label }}">
@@ -145,7 +145,7 @@ <h3>Requestor contact information</h3>
                     </div>
                 </div>
                 <h3 class="u-mt45">Recepient contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.recipient_name.id_for_label }}">
@@ -154,7 +154,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                         {{ form.recipient_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.recipient_email.id_for_label }}">
@@ -168,11 +168,11 @@ <h3 class="u-mt45">Recepient contact information</h3>
                 </div>
 
                   {% for error in form.street_address.errors %}
-		    <div class="o-form_group">
+		    <div class="o-form__group">
                       {{- notification.render( 'error', true, error ) }}
 		    </div>
                   {% endfor %}
-                <div id="mail-radio" class="o-form_group">
+                <div id="mail-radio" class="o-form__group">
                   {% if form.is_bound %}
                     {% set selected = form.contact_channel.value() %}
                   {% else %}
@@ -188,7 +188,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                 </div>
                 <div id="mail-target">
                   <p>If you would like to receive your records by mail, please provide your mailing address.</p>
-                  <div class="o-form_group">
+                  <div class="o-form__group">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.street_address.id_for_label }}">
@@ -197,7 +197,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                           {{ form.street_address }}
                       </div>
                   </div>
-                  <div class="o-form_group m-form-grid">
+                  <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.city.id_for_label }}">
@@ -226,12 +226,12 @@ <h3 class="u-mt45">Recepient contact information</h3>
             <h2>Supporting documentation (optional)</h2>
             <p class="u-mb15">Identity verification documents:</p>
             <ul class="m-list">
-                <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-                <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+                <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+                <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
             </ul>
             <p>If you are the parent consenting to and authorizing disclosure of the records of a minor or the legal guardian consenting to and authorizing disclosure of the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request.</p>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                   {% for error in form.supporting_documentation.errors %}
                       {{- notification.render( 'error', true, error ) }}
                   {% endfor %}
@@ -258,7 +258,7 @@ <h4>Files added:</h4>
 
             <h2>Consent for disclosure of records</h2>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field m-form-field__checkbox">
                         {{ form.consent }}
                         <label class="a-label"
@@ -267,7 +267,7 @@ <h2>Consent for disclosure of records</h2>
                         </label>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.full_name.id_for_label }}">
@@ -279,11 +279,11 @@ <h2>Consent for disclosure of records</h2>
             </div>
 
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <button id="submit-button" class="a-btn">
                         Submit
-                        <span id="submit-icon" class="a-btn_icon a-btn_icon__on-right">
+                        <span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
diff --git a/cfgov/privacy/jinja2/privacy/form-submitted.html b/cfgov/privacy/jinja2/privacy/form-submitted.html
index c11f9ef6d8a..b5bb9132deb 100644
--- a/cfgov/privacy/jinja2/privacy/form-submitted.html
+++ b/cfgov/privacy/jinja2/privacy/form-submitted.html
@@ -21,11 +21,11 @@
     <div class="block block__flush-top">
         <div class="m-notification m-notification__visible m-notification__success">
             {{ svg_icon('approved-round') }}
-            <div class="m-notification_content">
-                <div class="m-notification_message">
+            <div class="m-notification__content">
+                <div class="m-notification__message">
                     Request submitted
                 </div>
-                <p class="m-notification_explanation">
+                <p class="m-notification__explanation">
                     Your request has been submitted to the CFPB FOIA office.
                     If you have any questions or want to follow up on your request, email
                     <a class="a-btn a-btn__link href="mailto:FOIA@consumerfinance.gov">FOIA@consumerfinance.gov</a>
diff --git a/cfgov/privacy/jinja2/privacy/privacy-styles.html b/cfgov/privacy/jinja2/privacy/privacy-styles.html
index 5ede664b46e..3e8a44c673e 100644
--- a/cfgov/privacy/jinja2/privacy/privacy-styles.html
+++ b/cfgov/privacy/jinja2/privacy/privacy-styles.html
@@ -3,7 +3,7 @@
     .lead-paragraph {
       margin-bottom: 1.363636em;
     }
-    .a-label_helper {
+    .a-label__helper {
       font-size: 16px;
     }
     .m-form-grid {
@@ -47,7 +47,7 @@
       margin-bottom: 45px !important;
       padding-bottom: 15px;
     }
-    .o-well > .a-label_helper {
+    .o-well > .a-label__helper {
       margin-bottom: 20px;
     }
     #privacy-form > p {
diff --git a/cfgov/privacy/jinja2/privacy/records-access-form.html b/cfgov/privacy/jinja2/privacy/records-access-form.html
index b1957f59de3..838fd2351ed 100644
--- a/cfgov/privacy/jinja2/privacy/records-access-form.html
+++ b/cfgov/privacy/jinja2/privacy/records-access-form.html
@@ -47,22 +47,22 @@ <h1>Request for individual access to records protected under the Privacy Act</h1
         </div>
         <h2 class="h4">This form may be used if you are:</h2>
         <ul class="m-list">
-            <li class="m-list_item">Seeking access to your records pursuant to the Privacy Act</li>
-            <li class="m-list_item">A parent seeking access to the records of a minor</li>
-            <li class="m-list_item">A legal guardian seeking access to the records of an incompetent</li>
+            <li class="m-list__item">Seeking access to your records pursuant to the Privacy Act</li>
+            <li class="m-list__item">A parent seeking access to the records of a minor</li>
+            <li class="m-list__item">A legal guardian seeking access to the records of an incompetent</li>
         </ul>
         <p>If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
         <h2>Information used for identity-proofing and authentication</h2>
         <p>Please provide the following information to assist the CFPB in verifying your identity:</p>
         <h2 class="h4">Required</h2>
         <ul class="m-list">
-            <li class="m-list_item">Full name</li>
-            <li class="m-list_item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
+            <li class="m-list__item">Full name</li>
+            <li class="m-list__item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
         </ul>
         <h2 class="h4">Optional</h2>
         <ul class="m-list">
-            <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-            <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+            <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+            <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
         </ul>
         <h3>For requests by parent or legal guardian</h3>
         <p>If you are a parent seeking access to the records of a minor or a legal guardian seeking access to the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request. If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
@@ -77,7 +77,7 @@ <h2>Additional information required to locate the records</h2>
               enctype="multipart/form-data"
               method="POST">
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.description.id_for_label }}">
@@ -88,32 +88,32 @@ <h2>Additional information required to locate the records</h2>
                 </div>
                 <h3>Additional information that might assist in locating the records</h3>
                 <p>This enables the CFPB to locate the system of records containing the record(s) with a reasonable amount of effort.</p>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.system_of_record.id_for_label }}">
-                            {{ form.system_of_record.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.system_of_record.label }} <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.system_of_record }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.date_of_records.id_for_label }}">
-                            {{ form.date_of_records.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.date_of_records.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-		        <p class="a-label_helper">{{ form.date_of_records.help_text }}</p>
+		        <p class="a-label__helper">{{ form.date_of_records.help_text }}</p>
                         {{ form.date_of_records }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.other_info.id_for_label }}">
-                            {{ form.other_info.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.other_info.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-                        <p class="a-label_helper">{{ form.other_info.help_text }}</p>
+                        <p class="a-label__helper">{{ form.other_info.help_text }}</p>
                         {{ form.other_info }}
                     </div>
                 </div>
@@ -123,7 +123,7 @@ <h2>Contact information</h2>
             <p>Please provide your contact information so that we can correspond with you regarding the request.</p>
             <div class="o-well">
                 <h3>Requestor contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_name.id_for_label }}">
@@ -132,7 +132,7 @@ <h3>Requestor contact information</h3>
                         {{ form.requestor_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_email.id_for_label }}">
@@ -142,11 +142,11 @@ <h3>Requestor contact information</h3>
                     </div>
                 </div>
                   {% for error in form.street_address.errors %}
-		    <div class="o-form_group">
+		    <div class="o-form__group">
                       {{- notification.render( 'error', true, error ) }}
 		    </div>
                   {% endfor %}
-                  <div id="mail-radio" class="o-form_group">
+                  <div id="mail-radio" class="o-form__group">
                   {% if form.is_bound %}
                     {% set selected = form.contact_channel.value() %}
                   {% else %}
@@ -162,7 +162,7 @@ <h3>Requestor contact information</h3>
                   </div>
                 <div id="mail-target">
                   <p>If you would prefer to receive your records by mail, please provide your mailing address.</p>
-                  <div class="o-form_group">
+                  <div class="o-form__group">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.street_address.id_for_label }}">
@@ -171,7 +171,7 @@ <h3>Requestor contact information</h3>
                           {{ form.street_address }}
                       </div>
                   </div>
-                  <div class="o-form_group m-form-grid">
+                  <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.city.id_for_label }}">
@@ -200,12 +200,12 @@ <h3>Requestor contact information</h3>
             <h2>Supporting documentation (optional)</h2>
             <p class="u-mb15">Identity verification documents:</p>
             <ul class="m-list">
-                <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-                <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+                <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+                <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
             </ul>
             <p>If you are a parent seeking access to the records of a minor or a legal guardian seeking access to the records of an incompetent, you will be required to provide adequate proof of your legal relationship.</p>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                   {% for error in form.supporting_documentation.errors %}
                       {{- notification.render( 'error', true, error ) }}
                   {% endfor %}
@@ -231,7 +231,7 @@ <h4>Files added:</h4>
             </div>
             <h2>Consent for release of records</h2>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field m-form-field__checkbox">
                         {{ form.consent }}
                         <label class="a-label"
@@ -240,7 +240,7 @@ <h2>Consent for release of records</h2>
                         </label>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.full_name.id_for_label }}">
@@ -252,11 +252,11 @@ <h2>Consent for release of records</h2>
             </div>
 
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <button id="submit-button" class="a-btn">
                         Submit
-                        <span id="submit-icon" class="a-btn_icon a-btn_icon__on-right">
+                        <span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
index e7c6616093a..4dfffc97366 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
@@ -87,15 +87,15 @@ <h1>{{section.title}}</h1>
                 </div>
                 <ul class="m-list m-list__links">
                     {% if num_versions > 1 %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">
                             {{ svg_icon('date') }}
                             View all versions of this regulation
                         </a>
                     </li>
                     {% endif %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="{{ search_url }}">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="{{ search_url }}">
                             {{ svg_icon('search') }}
                             Search this regulation
                         </a>
@@ -107,16 +107,16 @@ <h1>{{section.title}}</h1>
                             m-notification__visible
                             m-notification__warning">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">This version is not the current regulation.</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">This version is not the current regulation.</div>
+                        <p class="m-notification__explanation">
                         {% if requested_version.effective_date < current_version.effective_date %}
                             You are viewing a previous version of this regulation with amendments that went into effect on
                         {% endif %}
                         {% if requested_version.effective_date > current_version.effective_date %}
                             You are viewing a future version of this regulation with amendments that will go into effect on
                         {% endif %}
-                        {{ ap_date(requested_version.effective_date) }}. <a class="m-list_link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">View all versions of this regulation</a>
+                        {{ ap_date(requested_version.effective_date) }}. <a class="m-list__link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">View all versions of this regulation</a>
                         </p>
                     </div>
                 </div>
@@ -207,9 +207,9 @@ <h1>{{ page.title }}</h1>
                             m-notification__visible
                             m-notification__warning">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">This version is not the current regulation.</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">This version is not the current regulation.</div>
+                        <p class="m-notification__explanation">
                             {% if requested_version.effective_date < current_version.effective_date %}
                                 You are viewing a previous version of this regulation with amendments that went into effect on {{ ap_date(requested_version.effective_date) }}.
                             {% endif %}
@@ -225,30 +225,30 @@ <h1>{{ page.title }}</h1>
             <div class="block block__sub">
                     <ul class="m-list m-list__links m-full-width-text">
                         {% if requested_version == current_version %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'section', section_label=sections[0].label.lower()) }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'section', section_label=sections[0].label.lower()) }}">
                                     View current regulation
                                 </a>
                             </li>
                         {% else %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'section', date_str=date_str, section_label=sections[0].label.lower()) }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'section', date_str=date_str, section_label=sections[0].label.lower()) }}">
                                     View this version
                                 </a>
                             </li>
                         {% endif %}
 
                         {% if num_versions > 1 %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'versions') }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'versions') }}">
                                     View all versions of this regulation
                                 </a>
                             </li>
                         {% endif %}
 
                         {% if requested_version == current_version %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ search_url }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ search_url }}">
                                     Search this regulation
                                 </a>
                             </li>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
index 7cc6dcf31b1..dd38c43bf4c 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
@@ -6,21 +6,21 @@
             o-expandable__border
             inline-interpretation">
 
-    <button class="o-expandable_header"{% if section_title %} data-section="{{ section_title }}"{% endif %}>
-        <span class="o-expandable_label">
+    <button class="o-expandable__header"{% if section_title %} data-section="{{ section_title }}"{% endif %}>
+        <span class="o-expandable__label">
             Official interpretation {% if section_title %}of {{ section_title }}{% endif %}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
         {{ contents | safe }}
 
         <p><a href="{{ url }}">See interpretation of {% if section_title %}{{ section_title }}{% else %}this section{% endif %} in {{ interp_location }}</a></p>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
index f2e18afd8b8..9a64c6e1b96 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
@@ -34,7 +34,7 @@
     {% for block in page.content -%}
         {{ render_block.render(block, loop.index) }}
     {%- endfor %}
-{% endblock content_main %}
+{% endblock content__main %}
 
 {% block content_sidebar scoped -%}
     {{ recent_notices }}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html b/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
index 6fbf71c3142..dba5a131fb2 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
@@ -1,13 +1,13 @@
-<div class="block block__flush-top">
+<div class="block block--flush-top">
     <div class="m-related-links">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Recently issued notices
             </h2>
         </header>
         <ul class="m-list m-list__links" id="regs3k-notices">
-            <li class="m-list_item">
-                <a href="https://www.federalregister.gov/agencies/consumer-financial-protection-bureau" class="m-list_link">View all recent Bureau notices</a>
+            <li class="m-list__item">
+                <a href="https://www.federalregister.gov/agencies/consumer-financial-protection-bureau" class="m-list__link">View all recent Bureau notices</a>
             </li>
         </ul>
     </div>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
index e1ba32eb38a..1cbd03a7333 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
@@ -14,16 +14,16 @@ <h2 class="h4">
             {% endfor %}
             </div>
         {% endif %}
-        <div class="o-form__input-w-btn_input-container">
+        <div class="o-form--input-w-btn__input-container">
             <div class="m-btn-inside-input input-contains-label">
-                <label for="query" class="input-contains-label_before input-contains-label_before__search">
+                <label for="query" class="input-contains-label__before input-contains-label__before__search">
                     {{ svg_icon('search') }}
                     <span class="u-visually-hidden">Search</span>
                 </label>
                 <input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="{{ q }}" placeholder="Search terms">
             </div>
         </div>
-        <div class="o-form__input-w-btn_btn-container">
+        <div class="o-form--input-w-btn__btn-container">
             <button class="a-btn" aria-label="Search for a term in the regulations">Search</button>
         </div>
     </div>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
index b13dcdcc538..e8bd5f863f5 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
@@ -13,17 +13,17 @@
 {% macro render() %}
     {% set nav_items, has_children = get_secondary_nav_items(request, page) %}
     {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
-    <nav class="o-regs3k-navigation o-expandable__padded"
+    <nav class="o-regs3k-navigation o-expandable--padded"
          aria-label="Section navigation">
-        <button class="o-regs3k-navigation_header o-expandable_header">
-            <span class="o-expandable_label">
+        <button class="o-regs3k-navigation__header o-expandable__header">
+            <span class="o-expandable__label">
                 Table of Contents
             </span>
-            <span class="o-expandable_cues">
-                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+            <span class="o-expandable__cues">
+                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                     {{ svg_icon('down') }}
                 </span>
-                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                     {{ svg_icon('up') }}
                 </span>
             </span>
@@ -45,9 +45,9 @@
 {% endmacro %}
 
 {% macro _navlink(text, href, current=false) %}
-<a class="o-secondary-nav_link
-          o-secondary-nav_link__parent
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          o-secondary-nav__link__parent
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
index d057f74ec45..3da15231cc4 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
@@ -4,25 +4,25 @@
     {# Overrides the default skip nav target of #main so that we skip over the
        left side nav on pages that extend this template and go right to the
        main content area. #}
-    #content_main
+    #content__main
 {%- endblock %}
 
 {% block content scoped %}
     <main class="u-layout-grid u-layout-grid__1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
         {% block hero -%}{%- endblock %}
         {% block pre_content scoped -%}
             {% include 'v1/layouts/_breadcrumbs.html' %}
         {%- endblock %}
         {% block body_content scoped %}
-        <aside class="u-layout-grid_secondary-nav o-regs3k-sidebar">
+        <aside class="u-layout-grid__secondary-nav o-regs3k-sidebar">
             {% import 'regulations3k/regulations3k-secondary-nav.html' as secondary_nav with context %}
             {{ secondary_nav.render() }}
         </aside>
-        <div class="u-layout-grid_main"
-                id="content_main">
+        <div class="u-layout-grid__main"
+                id="content__main">
             {% block content_main scoped -%}{%- endblock %}
         </div>
         {% endblock %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
index d1ae4592068..ecec200bd20 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
@@ -66,7 +66,7 @@ <h1>
 {% if page.results.search_query %}
 <div class="search_results">
     <div class="block block__flush-top content content__1-3">
-        <aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+        <aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
             <h3>Refine results</h3>
             <form action="." method="get" data-js-hook="behavior_change-filter">
                 {% set expandable_settings = {
@@ -75,8 +75,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         {% if page.results.search_query %}
                         <input type="hidden" name="q" value="{{ page.results.search_query }}">
                         {% endif %}
@@ -106,8 +106,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         <p> </p>
                         {{ radio.render({
                             'label': '25 per page',
@@ -142,8 +142,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         <p> </p>
                         {{ radio.render({
                             'label': 'By relevance',
@@ -171,7 +171,7 @@ <h3>Refine results</h3>
                 </div>
             </form>
         </aside>
-        <div id="regs3k-results" class="content_main content__flush-all-on-small content__flush-bottom">
+        <div id="regs3k-results" class="content__main content__flush-all-on-small content__flush-bottom">
             {% include 'search-regulations-results.html' %}
         </div>
     </div>
@@ -184,7 +184,7 @@ <h3>Refine results</h3>
 </div>
 {% endif %}
 
-{% endblock content_main %}
+{% endblock content__main %}
 
 
 {% block javascript scoped %}
diff --git a/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html b/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
index 65ced47c461..5e161d4dc3e 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="m-notification_message">
+    <div class="m-notification__content">
+        <div class="m-notification__message">
             {{ _("This tool is not supported in your browser. Please try a newer browser or confirm that JavaScript is enabled.") }}
         </div>
      </div>
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
index 81b2a93796b..b226194eed5 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
@@ -386,6 +386,6 @@
 {% block next_step_one %}
 Crear un
 <a class="a-link a-link__icon" href="https://www.ssa.gov/myaccount/" rel="noopener noreferrer" target="_blank">
-  <span class="a-link_text">mi cuenta de Seguro Social</span>
+  <span class="a-link__text">mi cuenta de Seguro Social</span>
 </a> que revise su historial de ganancias reales y los beneficios esperados.
 {% endblock %}
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming.html b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
index 1628471ea28..435f64ea837 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
@@ -26,7 +26,7 @@
 <div id="claiming-social-security" class="claiming-social-security">
     <div class="intro block block__flush-top">
         <div class="content-l">
-            <div class="content-l_col content-l_col-2-3">
+            <div class="content-l__col content-l__col-2-3">
                 <h1>{{ _("Planning your Social Security claiming age") }}</h1>
                 <p class="lead-paragraph">
                     {{ _("The age you claim Social Security affects your lifetime income. We’ll help you think through this decision.") }}
@@ -61,7 +61,7 @@ <h1>{{ _("Planning your Social Security claiming age") }}</h1>
                     {% endif %}
                 </div>
             </div>
-            <div class="content-l_col content-l_col-1-3">
+            <div class="content-l__col content-l__col-1-3">
                 <div class="img"></div>
             </div>
         </div>
@@ -73,17 +73,17 @@ <h1>{{ _("Planning your Social Security claiming age") }}</h1>
               block__border-top
               u-js-only">
               <div class="content-l">
-                <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("Explore how the age you start collecting Social Security affects your retirement benefits") }}</h2>
-                <form id="step-one-form" name="step-one-form" action="#" class="content-l_col content-l_col-2-3">
+                <h2 class="content-l__col content-l__col-2-3"><strong>{{STEP}} 1: </strong>{{ _("Explore how the age you start collecting Social Security affects your retirement benefits") }}</h2>
+                <form id="step-one-form" name="step-one-form" action="#" class="content-l__col content-l__col-2-3">
                     <p class="h3 step-one-instructions">{{ _("Enter your information below to calculate your estimated benefits.") }}</p>
                     <div class="m-notification m-notification__warning">
                         {{ svg_icon('warning-round') }}
-                        <div class="m-notification_content">
-                            <div class="m-notification_message">Error message.</div>
+                        <div class="m-notification__content">
+                            <div class="m-notification__message">Error message.</div>
                         </div>
                     </div>
                     <div class="content-l">
-                        <div class="content-l_col content-l_col-1-3 birthdate-inputs">
+                        <div class="content-l__col content-l__col-1-3 birthdate-inputs">
                             <p>{{ _("Date of birth") }}</p>
                             <label for="bd-month" class="input-labels"><input id="bd-month" type="text" maxlength="2"
                                     placeholder="{{ _('MM') }}" value="" autocapitalize="none" autocomplete="off"
@@ -95,7 +95,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                                     placeholder="{{ _('YYYY') }}" value="" autocapitalize="none" autocomplete="off"
                                     autocorrect="off" spellcheck="false"></label>
                         </div>
-                        <div class="content-l_col content-l_col-1-3">
+                        <div class="content-l__col content-l__col-1-3">
                             <label for="salary-input" class="input-labels">
                                 <span class="input-labels_block">{{ _("Highest annual work income") }} <span
                                         data-tooltip-target="salary" aria-describedby="salary-tooltip">{{
@@ -107,7 +107,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                                 <small>{{ _("Enter your total work income before taxes and other deductions. If your work income is 0 (zero) because you are now retired or unemployed, enter the income for the last full year in which you worked.") }}</small>
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-3">
+                        <div class="content-l__col content-l__col-1-3">
                             <button
                                 type="submit"
                                 id="get-your-estimates"
@@ -121,7 +121,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                         </div>
                     </div>
                 </form>
-                <div class="content-l_col content-l_col-1-3 estimate-info">
+                <div class="content-l__col content-l__col-1-3 estimate-info">
                     <small>
                         {{ _("The calculator bases your benefit estimate on current formulas from the Social Security Administration. Your answers are anonymous. Because we do not access or use your Social Security earnings record, these are rough estimates.") }}
                     </small>
@@ -135,7 +135,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
     </div>
 
     <div id="graph-container" class="content-l step-one-hidden">
-        <div class="content-l_col content-l_col-1-3">
+        <div class="content-l__col content-l__col-1-3">
             <div class="selected-retirement-age-container">
                 <p class="h3 selected-retirement-age">
                     <span class="selected-retirement-age__not-fra">
@@ -197,7 +197,7 @@ <h3 class="retirement-age">{{ _("About your early benefit claiming age:") }}</h3
             </p>
 
         </div>
-        <div class="content-l_col content-l_col-2-3 canvas-container">
+        <div class="content-l__col content-l__col-2-3 canvas-container">
             <div id="estimated-benefits-input" class="estimated-benefits-input h4 step-one-hidden">
                 <span>{{ _("View estimated benefits as:") }}</span><span><label><input type="radio"
                             name="benefits-display" value="monthly" checked> {{ _("monthly income") }}</label>
@@ -237,11 +237,11 @@ <h3 class="retirement-age">{{ _("About your early benefit claiming age:") }}</h3
     </div>
     <hr class="before-step-two">
     <div class="content-l step-two">
-        <div class="content-l_col content-l_col-1-3">
+        <div class="content-l__col content-l__col-1-3">
             <h2><strong>{{STEP}} 2: </strong>{{ _("Learn tips specific to your situation") }}</h2>
             <p class="question h3">{{ _("Picture your life in retirement to receive claiming tips.") }}</p>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-married">
+        <div class="content-l__col content-l__col-1-3 question question-married">
             <img src="{{ static("apps/retirement/img/lifestyle-married.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -311,7 +311,7 @@ <h4>{{ _("Your claiming age matters for your own retirement benefits and your su
                 </p>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-working age-split">
+        <div class="content-l__col content-l__col-1-3 question question-working age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-working.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -340,7 +340,7 @@ <h4>{{ _("Working in your 60s will help you maximize your income and savings.")
                     for retirement.
                     <a href="https://secure.ssa.gov/RIL/SiView.action"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Review your earnings record on <i>my</i> SocialSecurity</span>
+                        <span class="a-link__text">Review your earnings record on <i>my</i> SocialSecurity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -362,7 +362,7 @@ <h4>{{ _("Working in your 60s will help you maximize your income and savings.")
                     for retirement.
                     <a href="https://secure.ssa.gov/RIL/SiView.action"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Review your earnings record on <i>my</i> SocialSecurity</span>
+                        <span class="a-link__text">Review your earnings record on <i>my</i> SocialSecurity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -390,7 +390,7 @@ <h4>{{ _("You can maximize your benefits even if you work fewer hours or stop wo
                     claiming age.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -418,7 +418,7 @@ <h4>{{ _("You can maximize your benefits even if you work fewer hours or stop wo
                     age.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">
+                        <span class="a-link__text">
                             Learn more about working and collecting Social Security benefits
                         </span>
                     </a>.
@@ -443,7 +443,7 @@ <h4>{{ _("Consider working in your 60s for an extra boost to your income and sav
                     for retirement.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -472,7 +472,7 @@ <h4>{{ _("Consider working extra years in your 60s for an extra boost to your in
                     completely.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -493,7 +493,7 @@ <h4>{{ _("Consider working extra years in your 60s for an extra boost to your in
         </div>
     </div>
     <div class="content-l step-two">
-        <div class="content-l_col content-l_col-1-3 question question-expenses age-split">
+        <div class="content-l__col content-l__col-1-3 question question-expenses age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-expenses.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -519,7 +519,7 @@ <h4>{{ _("Retirement could be more expensive than you expect.") }}</h4>
                     benefit could be reduced by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -538,7 +538,7 @@ <h4>{{ _("Retirement could be more expensive than you expect.") }}</h4>
                     benefit could be reduced by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -557,7 +557,7 @@ <h4>{{ _("Maintain your lifestyle by planning ahead.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -576,7 +576,7 @@ <h4>{{ _("Maintain your lifestyle by planning ahead.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -595,7 +595,7 @@ <h4>{{ _("Many people find retirement is more expensive than expected.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -614,13 +614,13 @@ <h4>{{ _("Many people find retirement is more expensive than expected.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-income age-split">
+        <div class="content-l__col content-l__col-1-3 question question-income age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-income.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -654,7 +654,7 @@ <h4>{{ _("Continue saving in the coming years.") }}</h4>
                     much as 30 percent.
                     <a href="https://americasaves.org/for-savers/set-a-goal-what-to-save-for/save-for-retirement"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about saving for retirement</span>
+                        <span class="a-link__text">Learn more about saving for retirement</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -682,7 +682,7 @@ <h4>{{ _("You have an opportunity to continue growing your money.") }}</h4>
                     59½, you will likely face an early withdrawal penalty.
                     <a href="https://tools.finra.org/savings_calculator/"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about how retirement savings grow</span>
+                        <span class="a-link__text">Learn more about how retirement savings grow</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -711,7 +711,7 @@ <h4>{{ _("It's a perfect time to start saving.") }}</h4>
                     your full benefit age until age 70.
                     <a href="https://tools.finra.org/savings_calculator/"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about how retirement savings grow</span>
+                        <span class="a-link__text">Learn more about how retirement savings grow</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -741,7 +741,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                     much as 30 percent.
                     <a href="https://americasaves.org/blog/1345-the-faqs-of-iras"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about starting an IRA</span>
+                        <span class="a-link__text">Learn more about starting an IRA</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -767,7 +767,7 @@ <h4>{{ _("There are many ways to plan for a secure retirement outside of Social
                     past your full benefit age until age 70.
                     <a href="https://americasaves.org/blog/1345-the-faqs-of-iras"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about starting an IRA</span>
+                        <span class="a-link__text">Learn more about starting an IRA</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -795,7 +795,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                     past your full benefit age until age 70.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -817,7 +817,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                 <small>{{ _("Catch-up contributions are additional contributions that individuals who are age 50 or older can make to their 401(k) or IRA accounts to help them boost their savings as they approach retirement.") }}</small>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-longevity">
+        <div class="content-l__col content-l__col-1-3 question question-longevity">
             <img src="{{ static("apps/retirement/img/lifestyle-longevity.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -843,7 +843,7 @@ <h4>{{ _("Many people live longer than they expect.") }}</h4>
                     will be lower by thousands of dollars.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your expected longevity</span>
+                        <span class="a-link__text">Calculate your expected longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -865,7 +865,7 @@ <h4>{{ _("Claiming at your full benefit age could still make sense for you.") }}
                     you age.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your longevity</span>
+                        <span class="a-link__text">Calculate your longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -887,7 +887,7 @@ <h4>{{ _("There's a good chance that you'll live into your 80s and beyond.") }}<
                     will be lower by thousands of dollars.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your longevity</span>
+                        <span class="a-link__text">Calculate your longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -942,16 +942,16 @@ <h3>{{ _("You’ve chosen age") }} <span class="age-response-value"></span>{{ _(
                     <p>{{ _("If you start collecting at this age you will receive less than your full benefit amount. Here are a few things to keep in mind in the next few years.") }}</p>
                 </div>
                 <ol class="next-steps content-l">
-                    <li class="content-l_col content-l_col-1-3 next-step-one">
+                    <li class="content-l__col content-l__col-1-3 next-step-one">
                         {% block next_step_one %}
                         Create a <a href="https://www.ssa.gov/myaccount/"
-                            rel="noopener noreferrer" target="_blank"><span class="a-link_text"><em>my</em> Social
+                            rel="noopener noreferrer" target="_blank"><span class="a-link__text"><em>my</em> Social
                                 Security account</span></a> to review your expected benefits based on your actual Social
                         Security record. You will also find additional information about your eligibility and other
                         benefits including disability and survivor benefits.
                         {% endblock %}
                     </li>
-                    <li class="content-l_col content-l_col-1-3 next-step-three">
+                    <li class="content-l__col content-l__col-1-3 next-step-three">
                         {{ _("If your income, employment, or marital status changes, you may need to reconsider the age you want to start collecting your benefits. Visit us again!") }}
                     </li>
                 </ol>
diff --git a/cfgov/tccp/jinja2/tccp/card.html b/cfgov/tccp/jinja2/tccp/card.html
index e64beed1dde..93eb2239363 100644
--- a/cfgov/tccp/jinja2/tccp/card.html
+++ b/cfgov/tccp/jinja2/tccp/card.html
@@ -756,8 +756,8 @@ <h2>Contact information</h2>
     </dl>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
 
 {% block content_sidebar %}
     {%- include "tccp/includes/sidebar.html" -%}
-{% endblock content_sidebar %}
+{% endblock content__sidebar %}
diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
index 62c0ab1d4ac..acc5c3ed0a0 100644
--- a/cfgov/tccp/jinja2/tccp/cards.html
+++ b/cfgov/tccp/jinja2/tccp/cards.html
@@ -75,4 +75,4 @@ <h3>{{ situation.title }}</h3>
     </button>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/tccp/jinja2/tccp/includes/filter_form.html b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
index 317c2c7a09e..d1e056aa0dd 100644
--- a/cfgov/tccp/jinja2/tccp/includes/filter_form.html
+++ b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
@@ -23,17 +23,17 @@
 {%- endmacro -%}
 
 {%- macro render_form_fields(form) -%}
-<div class="content-l_col content-l_col-1">
-    <div class="o-form_group">
+<div class="content-l__col content-l__col-1">
+    <div class="o-form__group">
         {{ render_field(form.credit_tier, "select") }}
     </div>
 
-    <div class="o-form_group">
+    <div class="o-form__group">
         {{ render_field(form.location, "select") }}
     </div>
 
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <legend class="a-legend">Features</legend>
 
             {{ render_field(form.small_institution, "checkbox") }}
@@ -42,15 +42,15 @@
         </fieldset>
     </div>
 
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <legend class="a-legend">Rewards</legend>
 
             {{ form.rewards }}
         </fieldset>
     </div>
 
-    <div class="o-form_group" id="tccp-ordering">
+    <div class="o-form__group" id="tccp-ordering">
         {{ render_field(form.ordering, "select") }}
     </div>
 
@@ -74,7 +74,7 @@
 
         {{ render_form_fields(form) }}
 
-        <div class="content-l_col content-l_col-1 m-btn-group">
+        <div class="content-l__col content-l__col-1 m-btn-group">
             <button type="submit" class="a-btn" title="Apply filters">
                 Apply filters
             </button>
diff --git a/cfgov/tccp/jinja2/tccp/includes/sidebar.html b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
index 5aba92847fe..a0f005e4f8e 100644
--- a/cfgov/tccp/jinja2/tccp/includes/sidebar.html
+++ b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
@@ -1,4 +1,4 @@
-<div class="block block__flush-top">
+<div class="block block--flush-top">
     <h3>About us</h3>
     <p>
         We're the Consumer Financial Protection Bureau (CFPB),
@@ -6,6 +6,6 @@ <h3>About us</h3>
         and other financial companies treat you fairly.
     </p>
     <a class="a-link a-link__jump" href="/about-us/the-bureau/">
-        <span class="a-link_text">Learn how the CFPB can help you</span>
+        <span class="a-link__text">Learn how the CFPB can help you</span>
     </a>
 </div>
diff --git a/cfgov/tccp/jinja2/tccp/landing_page.html b/cfgov/tccp/jinja2/tccp/landing_page.html
index 4929478dd37..d7f948df0bc 100644
--- a/cfgov/tccp/jinja2/tccp/landing_page.html
+++ b/cfgov/tccp/jinja2/tccp/landing_page.html
@@ -38,29 +38,29 @@
     {% include "v1/includes/molecules/hero.html" with context %}
 {% endwith %}
 
-{% endblock content_intro %}
+{% endblock content__intro %}
 
 {% block content_main %}
 
-<div class="content_wrapper">
+<div class="content__wrapper">
     <div class="block block__sub block__flush-top">
         <h2>
             How is this comparison tool different than others you may have used?
         </h2>
         <p>
             <ul class="m-list">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     Larger pool of cards, likely including banks you’ve never heard of with great rates
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     <a
                         href="/data-research/credit-card-data/terms-credit-card-plans-survey/"
                     >Issuers required by law to submit data to us</a>
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     No paid advertising
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     Card interest is rated, to help you compare
                 </li>
             </ul>
@@ -70,7 +70,7 @@ <h2>
     <div class="block block__sub">
         <form action="." method="get">
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
                         class="a-label a-label__heading"
@@ -81,7 +81,7 @@ <h2>
 
                     {{ form.credit_tier }}
 
-                    <small class="a-label_helper a-label_helper__block">
+                    <small class="a-label__helper a-label__helper__block">
                         If you don’t know it,
                         <a href="/ask-cfpb/where-can-i-get-my-credit-scores-en-316/"
                             >find your credit score</a>.
@@ -89,7 +89,7 @@ <h2>
                 </div>
             </div>
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
                         class="a-label a-label__heading"
@@ -106,8 +106,8 @@ <h2>
                 I’m looking for a card that will help me...
             </legend>
 
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     {{ form.situations }}
                 </fieldset>
             </div>
@@ -123,8 +123,8 @@ <h2>
     </div>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
 
 {% block content_sidebar %}
     {%- include "tccp/includes/sidebar.html" -%}
-{% endblock content_sidebar %}
+{% endblock content__sidebar %}
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html b/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
index dfd658beab0..9201ba7c0e9 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
@@ -2,7 +2,7 @@
     We’ll show you cards that have:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>No annual fee</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html b/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
index 17e565311bd..a5502db1955 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
@@ -2,7 +2,7 @@
     We’ll show you cards that:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Are targeted for your credit score range</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html b/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
index f828fda5567..5a61b5e632d 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
@@ -2,7 +2,7 @@
     We’ll show you cards that:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Offer rewards</strong>
         (like cash back, travel points, or other rewards)
     </li>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html b/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
index 9f616e13066..559d17dd80c 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
@@ -4,7 +4,7 @@
     We’ll show you cards where you’ll:
 </p>
 <ul class="m-list m-list__unstyled">
-    <li class="m-list_item m-list_item__has-icon">
+    <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
             <strong>Pay less than average interest</strong>
@@ -16,12 +16,12 @@
     <div class="m-notification m-notification__warning m-notification__visible">
         {{ svg_icon("warning-round") }}
 
-        <div class="m-notification_content">
-            <div class="m-notification_message">
+        <div class="m-notification__content">
+            <div class="m-notification__message">
                 What about 0% offers?
             </div>
 
-            <div class="m-notification_explanation">
+            <div class="m-notification__explanation">
                 If a card has promotional interest, ensure you’re on track to
                 pay off the balance within the promotional period, or you
                 could end up owing more in interest than the original
@@ -33,7 +33,7 @@
                     class="a-link a-link__jump"
                     href="/ask-cfpb/what-is-a-credit-card-interest-rate-what-does-apr-mean-en-44/"
                 >
-                    <span class="a-link_text">More about intro APRs</span>
+                    <span class="a-link__text">More about intro APRs</span>
                 </a>
             </p>
         </div>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html b/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
index 5f04bc9b030..9d9e0646df0 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
@@ -2,7 +2,7 @@
     We’ll show you cards where you’ll:
 </p>
 <ul class="m-list m-list__unstyled">
-    <li class="m-list_item m-list_item__has-icon">
+    <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
             <strong>Pay less than average interest</strong>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html b/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
index 08a8912f166..5363bb138a7 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
@@ -2,7 +2,7 @@
     We’ll show you cards that have:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Low balance transfer interest rates</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
index be78efc6bb1..8905774dabd 100644
--- a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
+++ b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
@@ -4,7 +4,7 @@
     <label class="a-label" for="{{ widget.attrs.id }}">
         {{ widget.label }}
 
-        <div class="a-label_helper">
+        <div class="a-label__helper">
             {{ widget.value.select_html }}
 
             <p>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
index 93c5f7e3c5d..6cc44cfa768 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
@@ -30,9 +30,9 @@
             <h2>Search for activities</h2>
             <form class="u-mt30" method="get" action="." data-js-hook="behavior_submit-search">
                 <div class="o-form__input-w-btn">
-                    <div class="o-form__input-w-btn_input-container">
+                    <div class="o-form--input-w-btn__input-container">
                         <div class="m-btn-inside-input input-contains-label">
-                            <label for="search-text" class="input-contains-label_before input-contains-label_before__search">
+                            <label for="search-text" class="input-contains-label__before input-contains-label__before__search">
                                 {{ svg_icon('search') }}
                                 <span class="u-visually-hidden">The term to search for</span>
                             </label>
@@ -40,14 +40,14 @@ <h2>Search for activities</h2>
                                     placeholder="Enter your search term(s)"
                                     value="{% if page.results.search_query: %}{{ page.results.search_query }}{% endif %}">
                             <label for="search-text"
-                                  class="input-contains-label_after
-                                         input-contains-label_after__clear
+                                  class="input-contains-label__after
+                                         input-contains-label__after__clear
                                          u-hidden" data-js-hook="behavior_clear-search">
                                 Clear {{ svg_icon('error') }}
                             </label>
                         </div>
                     </div>
-                    <div class="o-form__input-w-btn_btn-container">
+                    <div class="o-form--input-w-btn__btn-container">
                         <button class="a-btn" aria-label="Search for an activity">Search</button>
                     </div>
                 </div>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html
index cd994be7d8d..e41fba3b37e 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html
@@ -77,7 +77,7 @@ <h3 class="h5">Student materials</h3>
                 </p>
             {% endfor %}
         {% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
         <p><strong>Note:</strong> Please remember to consider your students’ accommodations and special needs to ensure that all students are able to participate in a meaningful way.</p>
     </div>
     <div class="block">
@@ -88,7 +88,7 @@ <h2>Explore related resources</h2>
             <li><a href="https://www.federalreserveeducation.org/" target="_blank" rel="noopener noreferrer">View financial education resources from the Federal Reserve</a></li>
         </ul>
     </div>
-{% endblock content_main %}
+{% endblock content__main %}
 
 {% block content_sidebar scoped %}
     <h3>Key information for this activity</h3>
@@ -98,7 +98,7 @@ <h4 class="u-mb5">Building block</h4>
         <p class="u-mb20"><small>(<a href="/consumer-tools/educator-tools/youth-financial-education/learn/">What are the building blocks?</a>)</small></p>
         <ul class="m-list m-list__unstyled">
             {% for block_item in page.building_block.all() %}
-                <li class="m-list_item">{{ svg_icon(block_item.svg_icon ~ '-round') }} {{ block_item.title }}</li>
+                <li class="m-list__item">{{ svg_icon(block_item.svg_icon ~ '-round') }} {{ block_item.title }}</li>
             {% endfor %}
         </ul>
     {% endif %}
@@ -113,14 +113,14 @@ <h4>School subject</h4>
         <p>{{ page.school_subject.all() | join(', ') }}</p>
     {% endif %}
 
-    <div class="content_line u-mt30 u-mb30"></div>
+    <div class="content__line u-mt30 u-mb30"></div>
 
     {% if page.grade_level.all() or page.age_range.all() or page.student_characteristics.all() %}
         <h4>Audience</h4>
         {% if page.grade_level.all() %}<p><strong>Grade level:</strong> {{ page.grade_level.all() | join(', ') }}</p>{% endif %}
         {% if page.age_range.all() %}<p><strong>Age range:</strong> {{ page.age_range.all() | join(', ') }}</p>{% endif %}
         {% if page.student_characteristics.all() %}<p><strong>Student characteristics:</strong> {{ page.student_characteristics.all() | join(', ') }}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     {% if page.activity_type.all() or page.teaching_strategy.all() or page.blooms_taxonomy_level.all() or page.activity_duration %}
@@ -129,7 +129,7 @@ <h4>Activity characteristics</h4>
         {% if page.teaching_strategy.all() %}<p><strong>Teaching strategy:</strong> {{ page.teaching_strategy.all() | join(', ') }}</p>{% endif %}
         {% if page.blooms_taxonomy_level.all() %}<p><strong>Bloom’s Taxonomy level:</strong> {{ page.blooms_taxonomy_level.all() | join(', ') }}</p>{% endif %}
         {% if page.activity_duration %}<p><strong>Activity duration:</strong> {{page.activity_duration}}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     {% if page.jump_start_coalition.all() or page.council_for_economic_education.all() %}
@@ -138,12 +138,12 @@ <h4 class="u-mb5">National standards</h4>
             (<a
             class="a-link a-link__icon" target="_blank" rel="noreferrer noopener"
             href="https://files.consumerfinance.gov/f/documents/2021_Natl_Standards_Downloadable_final.pdf"
-            ><span class="a-link_text">What are the national standards? </span>
+            ><span class="a-link__text">What are the national standards? </span>
             <span class="a-icon">{{ svg_icon('download') }}</span></a>)
         </small></p>
         {% if page.council_for_economic_education.all() %}<p><strong>Standards:</strong>
             {{ page.council_for_economic_education.all() | join(', ') }}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     <div class="block block__flush-top">
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
index e037f99945c..e281d387de4 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
@@ -19,8 +19,8 @@
 {% endmacro %}
 
 {% macro build_form_group(name, items) %}
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <ul class="m-list m-list__unstyled">
                 {% for facet in items %}
                 <li>
@@ -53,7 +53,7 @@
 
 <a class="skip-filters u-visually-hidden{% if not activities %} skip-filters__hidden{% endif %}" href="#tdp-search-results">Skip to search results</a>
 
-<div class="results_count block__padded-bottom u-hide-on-med u-hide-on-lg u-hide-on-xl" data-results-count="{{ page.results.total_results }}">
+<div class="results_count block--padded-bottom u-hide-on-med u-hide-on-lg u-hide-on-xl" data-results-count="{{ page.results.total_results }}">
     {% if page.results.total_results %}
     <h3>
         {% if page.results.total_activities > page.results.total_results %}
@@ -69,7 +69,7 @@ <h3>No results match your search.</h3>
     {% endif %}
 </div>
 
-<aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+<aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
     <h3 class="h2">Filter results by</h3>
     <form action="." method="get" data-js-hook="behavior_change-filter">
         <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
@@ -102,7 +102,7 @@ <h5>{{topic_dict[topic.title]}}</h5>
     </form>
 
 </aside>
-<section id="tdp-search-results" class="content_main results" tabindex="-1">
+<section id="tdp-search-results" class="content__main results" tabindex="-1">
     <div class="results_header">
         {% if page.results.total_results and page.results.total_results > 0 %}
             <div class="results_count u-hide-on-sm u-hide-on-xs" data-results-count="{{ page.results.total_results }}">
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
index f96b7207816..ad04e512735 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
@@ -38,7 +38,7 @@ <h5 class="activity_meta-key">Activity duration:</h5>
             <h4 class="h5">Building block</h4>
             <ul class="m-list m-list__unstyled">
                 {% for block in result.building_block %}
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <span class="a-icon a-icon__large a-icon__space-after">
                             {{ svg_icon(block.svg_icon ~ '-round') }}
                         </span>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
index 0a8ee35530c..579d605a81b 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
@@ -39,22 +39,22 @@
 <div class="o-expandable
             {{ 'o-expandable__background' if value.is_midtone else '' }}
             {{ 'o-expandable__border' if value.is_bordered else '' }}">
-    <button class="o-expandable_header" type="button">
-        <span class="o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="o-expandable__label">
             {{ value.label }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content
-                {{ 'o-expandable_content__onload-open'
+    <div class="o-expandable__content
+                {{ 'o-expandable__content__onload-open'
                     if value.is_expanded else '' }}
                 {{ 'o-expandable__mobile-collapsed'
                     if value.is_collapsed_for_mobile else '' }}">
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js b/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
index 0b0dab1db38..77a41b55dd6 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
@@ -5,7 +5,7 @@ import { addEventListenerToElem } from './util/analytics-util';
   /* Listen for focus on the "skip link" button. This will grab the top link.
      Only the first link is needed since we're aiming to track users that use
      the tab-key from the get-go for navigation. */
-  const skipLinkButton = document.querySelector('.skip-nav_link');
+  const skipLinkButton = document.querySelector('.skip-nav__link');
   addEventListenerToElem(skipLinkButton, 'focus', () => {
     analyticsSendEvent({
       event: 'Accessibility Interactions',
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
index ec182b8bd5b..61f40558e9f 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
@@ -88,7 +88,7 @@ export default function (label) {
     recordExpandableState(expandableID);
 
     let action = 'Expandable collapsed';
-    const label = elem.querySelector('.o-expandable_label');
+    const label = elem.querySelector('.o-expandable__label');
     const text = label.textContent.trim();
     if (expandableStates[expandableID] === true) {
       action = 'Expandable expanded';
@@ -128,7 +128,7 @@ export default function (label) {
     trackFormExplainerPageButtonClick,
   );
   addEventListenerToSelector(
-    '.o-expandable_header',
+    '.o-expandable__header',
     'mouseup',
     trackExpandableTargetsClick,
   );
diff --git a/cfgov/unprocessed/apps/ccdb-search/css/main.less b/cfgov/unprocessed/apps/ccdb-search/css/main.less
index 1903e50cccd..bdb7adfe2e5 100644
--- a/cfgov/unprocessed/apps/ccdb-search/css/main.less
+++ b/cfgov/unprocessed/apps/ccdb-search/css/main.less
@@ -31,12 +31,12 @@
   });
 
   // Overrides for design system.
-  .o-expandable_header .o-expandable_cue-close,
-  .o-expandable_header .o-expandable_cue-open {
+  .o-expandable__header .o-expandable__cue-close,
+  .o-expandable__header .o-expandable__cue-open {
     display: block !important;
   }
 
-  .o-expandable_label {
+  .o-expandable__label {
     margin-bottom: 0.83333333em !important;
   }
 
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
index eb15d9358fd..19e292b80e0 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
@@ -17,7 +17,7 @@
     margin-top: 45px;
   }
 
-  :not(.m-info-unit_heading-text) > h4 {
+  :not(.m-info-unit__heading-text) > h4 {
     .h3();
     margin-top: 30px;
   }
@@ -94,16 +94,16 @@
 
 // TODO: convert FIG secondary nav override abuse to modifiers on secondary nav.
 .o-fig_sidebar {
-  .o-secondary-nav_label {
+  .o-secondary-nav__label {
     width: 95%;
   }
 
   // When the sidebar collapses into an expandable,
   // make the expandable's content scrollable
-  .o-secondary-nav_content[data-open='true'] {
+  .o-secondary-nav__content[data-open='true'] {
     overflow-y: auto;
     height: 100vh;
-    > .o-secondary-nav_list {
+    > .o-secondary-nav__list {
       // Add a large buffer underneath to ensure mobile users
       // can use assistive technology like Reachability to access
       // items at the bottom of the list
@@ -113,17 +113,17 @@
 
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
-    .o-secondary-nav_link {
+    .o-secondary-nav__link {
       padding: unit( 10px / @base-font-size-px, em );
     }
   });
 
-  .o-secondary-nav_link {
+  .o-secondary-nav__link {
     padding-left: unit(24px / @base-font-size-px, em);
     text-indent: unit(-18px / @base-font-size-px, em);
   }
 
-  .o-secondary-nav_list__parents > .o-secondary-nav_link {
+  .o-secondary-nav__list--parents > .o-secondary-nav__link {
     padding-left: unit(10px / @base-font-size-px, em);
     text-indent: unit(-10px / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
index 6d0a7eacade..9439b937170 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
@@ -11,7 +11,7 @@ let prevTarget;
  */
 function init() {
   appRoot = document.querySelector('main.o-fig');
-  navItems = appRoot.querySelectorAll('.o-secondary-nav_link[href]');
+  navItems = appRoot.querySelectorAll('.o-secondary-nav__link[href]');
 
   navItems = Array.from(navItems).reduce(
     (map, navItem) => map.set(navItem.getAttribute('href'), navItem),
@@ -20,7 +20,7 @@ function init() {
 
   navItemContainers = Array.from(navItems).reduce((map, [key, navItem]) => {
     const container =
-      navItem.closest('.o-secondary-nav_list__children') ||
+      navItem.closest('.o-secondary-nav__list__children') ||
       navItem.nextElementSibling;
     return map.set(key, container);
   }, new Map());
@@ -28,10 +28,10 @@ function init() {
   // TODO: Add these methods to SecondaryNav API to avoid adjusting
   // internal secondary nav state here.
   highlightNavItem = (target) =>
-    navItems.get(target).classList.add('o-secondary-nav_link__current');
+    navItems.get(target).classList.add('o-secondary-nav__link__current');
 
   unHighlightNavItem = (target) =>
-    navItems.get(target).classList.remove('o-secondary-nav_link__current');
+    navItems.get(target).classList.remove('o-secondary-nav__link__current');
 
   scrollNavItem = (target) =>
     navItems.get(target).scrollIntoView({
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
index a721666bfaf..5ed188ec907 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
@@ -37,7 +37,7 @@ const defaultScrollOffset = (target) => {
  */
 const handleMobileNav = (event) => {
   event.preventDefault();
-  if (event.target.matches('.o-secondary-nav_link')) {
+  if (event.target.matches('.o-secondary-nav__link')) {
     secondaryNav.collapse();
 
     // Scrolling before the expandable closes causes jitters on some devices.
@@ -74,7 +74,7 @@ const init = (secondaryNavArg) => {
      See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API */
   if ('IntersectionObserver' in window) {
     appRoot
-      .querySelectorAll('.o-secondary-nav_list__children')
+      .querySelectorAll('.o-secondary-nav__list__children')
       .forEach((ul) => {
         hideElement(ul);
       });
@@ -99,7 +99,7 @@ const init = (secondaryNavArg) => {
 
   // Track clicks on the FIG sidebar nav links
   addEventListenerToSelector(
-    '.o-fig_sidebar .o-secondary-nav_link',
+    '.o-fig_sidebar .o-secondary-nav__link',
     'click',
     (event) => {
       analyticsSendEvent({
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/cfgov/unprocessed/apps/financial-well-being/css/main.less
index 646034a53ad..daecfbfc6f3 100644
--- a/cfgov/unprocessed/apps/financial-well-being/css/main.less
+++ b/cfgov/unprocessed/apps/financial-well-being/css/main.less
@@ -226,41 +226,41 @@
     display: inline-block !important;
   }
 
-  .o-expandable_content {
+  .o-expandable__content {
     /* Using !important to work around IE not handling the
          :not([aria-expanded="true"]) selector */
     height: auto !important;
   }
 
-  .o-expandable_content table {
+  .o-expandable__content table {
     height: 510px;
   }
 
-  .o-expandable_content thead {
+  .o-expandable__content thead {
     border-bottom: none;
   }
 
-  .o-expandable_content th:last-child {
+  .o-expandable__content th:last-child {
     width: 25% !important;
   }
 
-  .o-expandable_content tbody tr {
+  .o-expandable__content tbody tr {
     border-bottom: none;
   }
 
-  .content_main {
+  .content__main {
     display: block !important;
   }
 
-  .content_main * {
+  .content__main * {
     overflow: visible !important;
   }
 
   /* Hide various things when printing */
   .save-links,
-  .o-expandable_cues,
+  .o-expandable__cues,
   .comparison-chart_toggle,
-  .content_sidebar,
+  .content__sidebar,
   .o-footer {
     display: none !important;
   }
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
index 85b8c8b5309..2436798e20c 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
@@ -71,7 +71,7 @@
   &.o-featured-content-module {
     min-height: auto;
 
-    .o-featured-content-module_text {
+    .o-featured-content-module__text {
       width: auto;
     }
   }
diff --git a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
index 740be99c7cb..94fb0e08460 100644
--- a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
+++ b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
@@ -93,16 +93,16 @@
         transform: translateX( unit( -@grid_gutter-width / 2 / @base-font-size-px, em ) );
       });
 
-      .o-expandable_cues {
+      .o-expandable__cues {
         color: var(--black);
       }
     }
 
-    .o-expandable_content[data-open='true']::before {
+    .o-expandable__content[data-open='true']::before {
       border: none;
     }
 
-    .o-expandable_label {
+    .o-expandable__label {
       font-size: unit(16 / @base-font-size-px, em);
     }
 
@@ -114,7 +114,7 @@
       &.o-expandable__form-explainer-category-@{index} {
         background-color: @@tint;
 
-        .o-expandable_header {
+        .o-expandable__header {
           background-color: @@light;
         }
 
@@ -126,13 +126,13 @@
         }
 
         &.has-attention {
-          .o-expandable_header {
+          .o-expandable__header {
             background-color: @@med;
           }
         }
 
         &.has-attention {
-          .o-expandable_header {
+          .o-expandable__header {
             background-color: @@med;
           }
         }
@@ -144,11 +144,11 @@
     }
   }
 
-  .o-expandable_label {
+  .o-expandable__label {
     max-width: 80%;
   }
 
-  .o-expandable_cues {
+  .o-expandable__cues {
     display: block;
     width: 20%;
     text-align: right;
diff --git a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
index 3fb47784846..ba0e036a9c9 100644
--- a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
+++ b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
@@ -120,7 +120,7 @@ class FormExplainer {
    */
   openAndScrollToExpandable(imageOverlay, targetExpandable) {
     const targetExpandableTarget = targetExpandable.querySelector(
-      '.o-expandable_header',
+      '.o-expandable__header',
     );
 
     window.setTimeout(() => {
@@ -280,7 +280,7 @@ class FormExplainer {
     /* When a form explainer expandable target has the focus,
      * update the image overlay.
      */
-    DT.bindEvents('.o-expandable_header', 'focus', (event) => {
+    DT.bindEvents('.o-expandable__header', 'focus', (event) => {
       const expandable = event.target.closest('.o-expandable__form-explainer');
       this.updateAttention(expandable, CSS.HOVER_HAS_ATTENTION);
     });
@@ -302,7 +302,7 @@ class FormExplainer {
      * update the image overlay position and hover styles.
      */
     DT.bindEvents(
-      '.o-expandable__form-explainer .o-expandable_header',
+      '.o-expandable__form-explainer .o-expandable__header',
       ['click', 'keypress'],
       (event) => {
         if (event.which === 13 || event.type === 'click') {
diff --git a/cfgov/unprocessed/apps/homepage/css/main.less b/cfgov/unprocessed/apps/homepage/css/main.less
index 87ebe721bb7..6001ae781f7 100644
--- a/cfgov/unprocessed/apps/homepage/css/main.less
+++ b/cfgov/unprocessed/apps/homepage/css/main.less
@@ -16,7 +16,7 @@
   margin-right: auto;
 }
 
-.content_main__flush-inner {
+.content__main__flush-inner {
   padding-top: 0;
   margin-top: 0;
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
index 4b505cabb19..1f03f9ca1b9 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
@@ -276,6 +276,6 @@
    Accessible bleedbar
    ========================================================================== */
 
-.content__bleedbar .content_wrapper::after {
+.content__bleedbar .content__wrapper::after {
   background-color: var(--gray-5);
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
index df773c1b99c..b31612add78 100755
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
@@ -158,14 +158,14 @@
 @block__bg: var(--gray-10);
 
 // .content_main
-@content_main-border: var(--gray-40);
+@content__main-border: var(--gray-40);
 
 // .content_sidebar
-@content_sidebar-bg: var(--gray-10);
-@content_sidebar-border: var(--gray-40);
+@content__sidebar-bg: var(--gray-10);
+@content__sidebar-border: var(--gray-40);
 
 // .content_line
-@content_line: var(--gray-40);
+@content__line: var(--gray-40);
 
 /* cf-pagination
    ========================================================================== */
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
index 0399dc20565..6f5a520c61d 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
@@ -1,6 +1,6 @@
 .college-costs {
   // remove border between sidebar and main content
-  & .content_main {
+  & .content__main {
     position: relative;
 
     &::after {
@@ -32,20 +32,20 @@
   });
 
   .u-border-bottom {
-    border-bottom: 1px solid @block__border-bottom;
+    border-bottom: 1px solid @block--border-bottom;
   }
 
-  .block.block__mid {
+  .block.block--mid {
     margin-top: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
     margin-bottom: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
   }
 
   // Notification explanation doesn't need top margin unless it follows message
-  .m-notification_explanation {
+  .m-notification__explanation {
     margin-top: 0;
   }
 
-  .m-notification_message + .m-notification_explanation {
+  .m-notification__message + .m-notification__explanation {
     margin-top: unit(5px / @base-font-size-px, em);
   }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
index 48fe0e0ff4b..f3670389a0d 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
@@ -30,7 +30,7 @@
       display: block;
     }
 
-    .a-link_text,
+    .a-link__text,
     .inline {
       display: inline;
     }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
index d4340f295e3..9267c3ded90 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
@@ -6,22 +6,22 @@
     border-width: 0;
   });
 
-  .o-secondary-nav_list__parents {
+  .o-secondary-nav__list--parents {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       border-top: 1px solid var(--gray-20);
       border-left: 0;
       padding-left: 0;
 
-      > .o-secondary-nav_list-item__parent {
+      > .o-secondary-nav__list-item--parent {
         border-bottom: 1px solid var(--gray-20);
 
-        & > .o-secondary-nav_link {
+        & > .o-secondary-nav__link {
           font-size: unit( 18px / @base-font-size-px, em );
         }
       }
 
-      .o-secondary-nav_link {
+      .o-secondary-nav__link {
         border: none;
         font-weight: normal;
         color: var(--black);
@@ -38,23 +38,23 @@
         }
       }
 
-      .o-secondary-nav_list__children {
+      .o-secondary-nav__list__children {
         margin-top: 0;
         display: none;
       }
 
-      li.o-secondary-nav_list-item__parent[data-nav-is-active='True'] > a {
+      li.o-secondary-nav__list-item__parent[data-nav-is-active='True'] > a {
         font-weight: 600;
       }
 
       li[data-nav-is-active='True'],
       li[data-nav-is-open='True'] {
-        .o-secondary-nav_list__children {
+        .o-secondary-nav__list__children {
           display: block;
         }
       }
 
-      .o-secondary-nav_list-item__parent li[data-nav-is-active='True'] {
+      .o-secondary-nav__list-item__parent li[data-nav-is-active='True'] {
         .active-section {
           border-left: 3px solid var(--green);
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
index 555d7389c40..a4313df7571 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
@@ -34,7 +34,7 @@
   }
 
   &__border-top {
-    border-top: 1px solid @block__border;
+    border-top: 1px solid @block--border;
     padding-top: unit(10px / @base-font-size-px, em);
     margin-top: unit(30px / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
index 312ba4d8cc7..829017127ea 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
@@ -97,12 +97,12 @@
    Tool intro
    ========================================================================== */
 
-.understanding-financial-aid-offer .m-hero_image {
+.understanding-financial-aid-offer .m-hero__image {
   background-image: url('/static/apps/paying-for-college/img/intro-195.png');
 }
 
 @media (min-resolution: 192dpi) {
-  .understanding-financial-aid-offer .m-hero_image {
+  .understanding-financial-aid-offer .m-hero__image {
     background-image: url('/static/apps/paying-for-college/img/intro-390.png');
   }
 }
@@ -1537,7 +1537,7 @@
     margin-top: unit(20px / @base-font-size-px, em);
   }
 
-  & + .content_line {
+  & + .content__line {
     display: none;
 
     // Tablet and above.
@@ -1802,7 +1802,7 @@
     });
   }
 
-  .content_line {
+  .content__line {
     display: none;
 
     // Tablet and above.
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
index 51cf97b4ea1..c98c7391992 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
@@ -161,7 +161,7 @@ function _addButtonListeners() {
  * @param {MouseEvent} event - Click event object.
  */
 function _handleDidThisHelpClick(event) {
-  const parent = event.target.closest('.o-form_fieldset');
+  const parent = event.target.closest('.o-form__fieldset');
   sendAnalyticsEvent(
     'Impact question click: ' + parent.dataset.impact,
     event.target.value,
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
index 0a15362f5ec..212950d708f 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
@@ -52,7 +52,7 @@ const navigationView = {
     );
     const activeElem = navItem.closest('li');
     const activeParent = activeElem.closest(
-      '.o-secondary-nav_list-item__parent',
+      '.o-secondary-nav__list-item__parent',
     );
 
     this._navListItems.forEach((elem) => {
@@ -66,7 +66,7 @@ const navigationView = {
     activeParent.setAttribute('data-nav-is-active', 'True');
     activeElem.setAttribute('aria-selected', true);
     activeParent
-      .querySelectorAll('.o-secondary-nav_list__children li')
+      .querySelectorAll('.o-secondary-nav__list__children li')
       .forEach((elem) => {
         elem.setAttribute('data-nav-is-active', 'True');
       });
@@ -133,7 +133,7 @@ const navigationView = {
     this._nextButton = body.querySelector(
       '.college-costs_tool-section_buttons .btn__next-step',
     );
-    this._contentSidebar = body.querySelector('.content_sidebar');
+    this._contentSidebar = body.querySelector('.content__sidebar');
     this._introduction = body.querySelector('.college-costs_intro-segment');
     this._getStartedBtn = body.querySelector(
       '.college-costs_intro-segment .btn__get-started',
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
index f4dffa6b030..e1079819001 100755
--- a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
@@ -39,7 +39,7 @@ const questionView = {
       questionView.$nonsettlementBigQuestion.hide();
       $('#question_answer-no').hide();
       questionView.$optionsWrapper.addClass(
-        'get-options__settlement content_main',
+        'get-options__settlement content__main',
       );
       questionView.$transferCredits.remove();
       questionView.$exploreSchools.remove();
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
index 4a7245ba571..695dd3905c6 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
@@ -47,17 +47,17 @@
     &_applied {
       padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
     }
-    .o-multiselect_choices {
+    .o-multiselect__choices {
       display: none;
     }
   }
 
   .respond-to-min(@bp-lg-min, {
-    .content_sidebar {
+    .content__sidebar {
       width: 33% !important;
     }
 
-    .content_main {
+    .content__main {
       width: 67% !important;
     }
   });
@@ -71,7 +71,7 @@
   }
 
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       .o-expandable:nth-child(4n) {
         border-bottom: none;
       }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
index 76afa438149..3f5fea95962 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
@@ -22,7 +22,7 @@
 }
 
 .search_results {
-  .content_sidebar {
+  .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
@@ -39,8 +39,8 @@
       }
 
       // Override for left/right padding on the label and content.
-      .o-expandable_content,
-      .o-expandable_header {
+      .o-expandable__content,
+      .o-expandable__header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -50,11 +50,11 @@
       float: right;
     }
 
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
   }
-  .content_main {
+  .content__main {
     &::after {
       border: 0;
     }
@@ -101,10 +101,10 @@
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .content_main {
+    .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less b/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less
index d377022a274..ffd691d5682 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less
@@ -4,10 +4,10 @@
    ========================================================================== */
 
 // Helper class to correct regs3k notifications alignment
-.block__flush-regs3k {
+.block--flush-regs3k {
   margin-top: -30px;
 
-  .block__flush-bottom + & {
+  .block--flush-bottom + & {
     margin-top: 30px;
   }
 }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
index 95f4261b6f0..799e0b098ed 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
@@ -22,12 +22,12 @@
 
   // TODO - this will be updated to data-open='true' in newer expandables.
   .o-expandable_target__expanded {
-    .o-expandable_cue-close {
+    .o-expandable__cue-close {
       display: block;
     }
   }
   .o-expandable_target__collapsed {
-    .o-expandable_cue-open {
+    .o-expandable__cue-open {
       display: block;
     }
   }
@@ -35,7 +35,7 @@
 
 // Regs3K secondary nav sections
 .o-regs3k-sections {
-  .o-expandable_header {
+  .o-expandable__header {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       padding-left: 0;
@@ -44,7 +44,7 @@
     padding-right: 0;
   }
 
-  .o-expandable_content {
+  .o-expandable__content {
     padding: 0;
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
@@ -72,7 +72,7 @@
   // TODO:
   // This is an override for the non-conforming use of o-expandable__padded
   // in the iRegs secondary nav. Remove this when that component is overhauled.
-  &.o-expandable__padded .o-expandable_label {
+  &.o-expandable__padded .o-expandable__label {
     padding: 0 !important;
   }
 
@@ -92,14 +92,14 @@
 
     padding: unit(10px / @base-font-size-px, em) 0
       unit(5px / @base-font-size-px, em);
-    .o-expandable_label {
+    .o-expandable__label {
       text-transform: uppercase;
     }
   }
 }
 
 // TODO: convert iRegs secondary nav override abuse to modifiers on secondary nav.
-.o-secondary-nav_link {
+.o-secondary-nav__link {
   color: var(--pacific);
 
   &__current {
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
index 40acdb01bdb..a49e812fbf3 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
@@ -29,13 +29,13 @@
 }
 
 .search_results {
-  .content_sidebar {
+  .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
 
-    .o-expandable_content,
-    .o-expandable_header {
+    .o-expandable__content,
+    .o-expandable__header {
       border: 0;
       padding: 0;
       &::before,
@@ -63,11 +63,11 @@
         margin-bottom: 0;
       }
     }
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
   }
-  .content_main {
+  .content__main {
     &::after {
       border: 0;
     }
@@ -114,10 +114,10 @@
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .content_main {
+    .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
diff --git a/cfgov/unprocessed/apps/regulations3k/js/analytics.js b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
index dc02a99d985..c16ae6a059c 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/analytics.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
@@ -20,8 +20,8 @@ const sendEvent = (action, label, category) => {
  * @returns {HTMLElement|null} The expandable or null if it's not an expandable
  */
 const getExpandable = (event) => {
-  const el = event.target.closest('.o-expandable_header') || event.target;
-  if (el.classList.contains('o-expandable_header')) {
+  const el = event.target.closest('.o-expandable__header') || event.target;
+  if (el.classList.contains('o-expandable__header')) {
     return el;
   }
   return null;
diff --git a/cfgov/unprocessed/apps/regulations3k/js/index.js b/cfgov/unprocessed/apps/regulations3k/js/index.js
index f06ce4b3bbe..882b033eb5b 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/index.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/index.js
@@ -3,7 +3,7 @@ import { Expandable } from '@cfpb/cfpb-expandables';
 
 const navHeader = document.querySelector('.o-regs3k-navigation_header');
 const navItems = document.querySelector('.o-regs3k-sections');
-const regContent = document.querySelector('.regulations3k #content_main');
+const regContent = document.querySelector('.regulations3k #content__main');
 
 /**
  * toggleSecondaryNav - Show/hide the secondary nav on smaller screens
diff --git a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
index cd17c8ed911..afd1899d68c 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
@@ -1,7 +1,7 @@
 // Array that tracks paragraph positions
 let paragraphPositions;
 const regs3kMainContent = document.querySelector(
-  '.regulations3k #content_main',
+  '.regulations3k #content__main',
 );
 const regs3kWayfinder = document.querySelector('.o-regulations-wayfinder');
 let wayfinderOffset = 0;
diff --git a/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js b/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
index 1be504591de..32f313b7ca0 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
@@ -7,7 +7,7 @@ const processNotice = (notice) => {
   const li = document.createElement('li');
   a.href = encodeURI(notice.html_url);
   a.textContent = notice.title;
-  li.className = 'm-list_link';
+  li.className = 'm-list__link';
   li.appendChild(a);
   return li;
 };
diff --git a/cfgov/unprocessed/apps/retirement/css/claiming.less b/cfgov/unprocessed/apps/retirement/css/claiming.less
index 9c7065e7b76..6ec0f4eaf35 100644
--- a/cfgov/unprocessed/apps/retirement/css/claiming.less
+++ b/cfgov/unprocessed/apps/retirement/css/claiming.less
@@ -32,7 +32,7 @@
     margin-top: 15px;
     margin-bottom: 30px;
 
-    .content-l_col + .content-l_col {
+    .content-l__col + .content-l__col {
       margin-top: 0;
     }
   }
@@ -95,12 +95,12 @@
     padding: 0 0 30px 40px;
   }
 
-  #graph-container .content-l_col {
+  #graph-container .content-l__col {
     margin-top: 0;
     padding: 30px 0 60px;
   }
 
-  .step-one .content-l_col {
+  .step-one .content-l__col {
     vertical-align: bottom;
   }
 
@@ -311,7 +311,7 @@
     margin: 50px 0;
   }
 
-  .step-two .content-l_col.content-l_col-1-3 {
+  .step-two .content-l__col.content-l__col-1-3 {
     height: 100%;
   }
 
@@ -428,16 +428,16 @@
       padding-top: 30px;
     }
 
-    .step-one .content-l_col-2-3,
+    .step-one .content-l__col-2-3,
     .estimate-info {
       width: 100%;
     }
 
-    #graph-container .content-l_col-1-3 {
+    #graph-container .content-l__col-1-3 {
       width: 40%;
     }
 
-    #graph-container .content-l_col-2-3 {
+    #graph-container .content-l__col-2-3 {
       width: 60%;
     }
 
@@ -451,7 +451,7 @@
       margin-left: 0;
     }
 
-    .step-two .content-l_col {
+    .step-two .content-l__col {
       margin-right: 0;
       width: 100%;
     }
@@ -529,7 +529,7 @@
       margin-right: 0;
     }
 
-    .content-l_col {
+    .content-l__col {
       border: none;
       display: block;
       width: auto;
@@ -539,7 +539,7 @@
       padding-top: 30px;
     }
 
-    #step-one-form .content-l_col-1-3 {
+    #step-one-form .content-l__col-1-3 {
       max-width: 236px;
     }
 
@@ -562,7 +562,7 @@
       }
     }
 
-    #graph-container .content-l_col {
+    #graph-container .content-l__col {
       padding-top: 30px;
       padding-bottom: 30px;
     }
@@ -577,12 +577,12 @@
     }
 
     #step-one-form
-      .content-l_col.content-l_col-1-3
-      + .content-l_col.content-l_col-1-3 {
+      .content-l__col.content-l__col-1-3
+      + .content-l__col.content-l__col-1-3 {
       margin-top: 1.875em;
     }
 
-    .content-l_col.content-l_col-1-3 + .content-l_col.content-l_col-1-3 {
+    .content-l__col.content-l__col-1-3 + .content-l__col.content-l__col-1-3 {
       margin-top: 0;
     }
 
@@ -605,7 +605,7 @@
       margin-top: 0;
     }
 
-    .step-two .content-l_col {
+    .step-two .content-l__col {
       width: 100%;
     }
 
diff --git a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
index 4501be20208..a729c600c82 100644
--- a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
+++ b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
@@ -282,7 +282,7 @@ function getYourEstimates() {
       }
     } else {
       $('.m-notification').slideDown();
-      $('.m-notification .m-notification_content').html(resp.note);
+      $('.m-notification .m-notification__content').html(resp.note);
       if (resp.current_age >= 71 || resp.current_age < 21) {
         highlightAgeFields(true);
       }
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
index 4b33b84abc0..7dfeec18558 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
@@ -29,7 +29,7 @@
 }
 
 // Position search result totals.
-#results-total .content-l_col {
+#results-total .content-l__col {
   display: inline-flex;
   min-width: 12em;
 
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
index 86823b62ca7..a59ac3b4069 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
@@ -1,6 +1,6 @@
 .no-js {
   /* Hide ROUT when JavaScript is disabled. */
-  .content_intro {
+  .content__intro {
     display: none;
   }
 }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
index 8b071e86344..fcb3d6a2cb0 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
@@ -16,10 +16,10 @@
 @expandable-focus: var(--black);
 
 // .o-expandable_label
-@expandable_label-text: var(--black);
+@expandable__label-text: var(--black);
 
 // .o-expandable_cues
-@expandable_cues-text: var(--pacific);
+@expandable__cues-text: var(--pacific);
 
 // .o-expandable modifiers
 @expandable__background: var(--gray-5);
@@ -27,12 +27,12 @@
 
 // Sizing variables
 
-// .o-expandable_cues
-@expandable_cues-font-size: @btn-font-size;
+// .o-expandable__cues
+@expandable__cues-font-size: @btn-font-size;
 
 // Timing variables
 
-// .o-expandable_content__transition
+// .o-expandable__content__transition
 @expandable__transition-speed: 0.25s;
 
 //
@@ -53,16 +53,16 @@
       outline-offset: 1px;
     }
 
-    .o-expandable_cue-close,
-    .o-expandable_cue-open {
+    .o-expandable__cue-close,
+    .o-expandable__cue-open {
       display: none;
     }
 
-    &__expanded .o-expandable_cue-close {
+    &__expanded .o-expandable__cue-close {
       display: block;
     }
 
-    &__collapsed .o-expandable_cue-open {
+    &__collapsed .o-expandable__cue-open {
       display: block;
     }
   }
@@ -133,14 +133,14 @@
     display: flex;
     justify-content: space-between;
 
-    // Using the button element with .o-expandable_header requires setting
+    // Using the button element with .o-expandable__header requires setting
     // an explicit width.
     button& {
       width: 100%;
       text-align: left;
     }
 
-    .o-expandable_label {
+    .o-expandable__label {
       // Grow to available width.
       flex-grow: 1;
     }
@@ -194,7 +194,7 @@
 }
 
 // Used when the set language reads right-to-left
-div[dir='rtl'] .o-expandable_header {
+div[dir='rtl'] .o-expandable__header {
   width: 100%;
   text-align: right;
 }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
index 4f54a765a23..d5027aa0ee1 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
@@ -3,12 +3,12 @@
     background-color: transparent;
   }
 
-  .m-hero_wrapper {
+  .m-hero__wrapper {
     margin: 0 -15px;
     padding-top: 0;
   }
 
-  .m-hero_image-wrapper {
+  .m-hero__image-wrapper {
     display: none;
 
     // Tablet and above.
@@ -37,7 +37,7 @@
     display: none;
   }
 
-  .content_sidebar {
+  .content__sidebar {
     padding: unit(15px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em) 0;
     border: 1px solid var(--gray-40);
@@ -50,8 +50,8 @@
       padding-top: unit( 30px / @base-font-size-px, em );
     });
 
-    .o-expandable_header,
-    .o-expandable_content {
+    .o-expandable__header,
+    .o-expandable__content {
       border: 0;
       padding: 0;
       overflow: hidden;
@@ -66,7 +66,7 @@
       }
     }
 
-    .o-expandable_header {
+    .o-expandable__header {
       padding: unit(13px / @base-font-size-px, em) 0;
       margin-bottom: 2px;
     }
@@ -86,7 +86,7 @@
       });
     }
 
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
 
@@ -95,7 +95,7 @@
     }
   }
 
-  .content_main {
+  .content__main {
     border: 0;
 
     &::after {
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
index 65645331563..8fae1bb7270 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
@@ -116,10 +116,10 @@ function getLabelText() {
 const Expandable = AtomicComponent.extend({
   ui: {
     base: '.o-expandable',
-    target: '.o-expandable_header',
-    content: '.o-expandable_content',
-    header: '.o-expandable_header',
-    label: '.o-expandable_label',
+    target: '.o-expandable__header',
+    content: '.o-expandable__content',
+    header: '.o-expandable__header',
+    label: '.o-expandable__label',
   },
 
   classes: {
@@ -130,7 +130,7 @@ const Expandable = AtomicComponent.extend({
   },
 
   events: {
-    'click .o-expandable_header': 'expandableClickHandler',
+    'click .o-expandable__header': 'expandableClickHandler',
   },
 
   transition: null,
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
index 79de875ac11..e81858f1635 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
@@ -5,10 +5,10 @@ import { EventObserver } from '@cfpb/cfpb-atomic-component';
 // Exported constants.
 const CLASSES = {
   CSS_PROPERTY: 'max-height',
-  BASE_CLASS: 'o-expandable_content__transition',
-  EXPANDED: 'o-expandable_content__expanded',
-  COLLAPSED: 'o-expandable_content__collapsed',
-  OPEN_DEFAULT: 'o-expandable_content__onload-open',
+  BASE_CLASS: 'o-expandable__content__transition',
+  EXPANDED: 'o-expandable__content__expanded',
+  COLLAPSED: 'o-expandable__content__collapsed',
+  OPEN_DEFAULT: 'o-expandable__content__onload-open',
 };
 
 /* eslint-disable max-lines-per-function */
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
index abebe2a1573..dde50abbd7a 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
@@ -10,7 +10,7 @@ const ExpandableFacets = AtomicComponent.extend({
     base: '.o-expandable-facets',
     target: '.o-expandable-facets_target',
     content: '.o-expandable-facets_content',
-    header: '.o-expandable_header',
+    header: '.o-expandable__header',
     facetCheckbox: '.o-expandable-facets_checkbox',
     facetLabel: '.o-expandable-facets_checkbox ~ .a-label',
   },
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
index d53290f3a48..b8d08667948 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
@@ -1,4 +1,4 @@
-const OPEN_DEFAULT = 'o-expandable_content__onload-open';
+const OPEN_DEFAULT = 'o-expandable__content__onload-open';
 const MOBILE_COLLAPSED_CLASS = 'o-expandable__mobile-collapsed';
 const MOBILE_WIDTH = 900;
 
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
index dac135c55db..d57483f2334 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
@@ -57,7 +57,7 @@ function attachHandlers() {
  * Ignore analytics for previous and next pagination buttons
  */
 function addDataGtmIgnore() {
-  const ignoreBtns = ['a.m-pagination_btn-next', 'a.m-pagination_btn-prev'];
+  const ignoreBtns = ['a.m-pagination__btn-next', 'a.m-pagination__btn-prev'];
 
   for (let i = 0; i < ignoreBtns.length; i++) {
     const btn = document.querySelector(ignoreBtns[i]);
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
index d65f7b1b476..1dd3a70303b 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
@@ -18,12 +18,12 @@ let sendEvent = (payload) => {
  * @returns {HTMLElement|null} The expandable or null if it's not an expandable
  */
 const getExpandable = (event) => {
-  let el = event.target.closest('.o-expandable_header');
+  let el = event.target.closest('.o-expandable__header');
   el = el ? el : event.target.closest('.o-expandable-facets_target');
   el = el ? el : event.target;
 
   if (
-    el.classList.contains('o-expandable_header') ||
+    el.classList.contains('o-expandable__header') ||
     el.classList.contains('o-expandable-facets_target')
   ) {
     return el;
@@ -61,7 +61,7 @@ const handleExpandableClick = (event) => {
     return;
   }
   const action = `${getExpandableState(expandable)} filter`;
-  let label = expandable.querySelector('span.o-expandable_label');
+  let label = expandable.querySelector('span.o-expandable__label');
   label = label ? label : expandable.querySelector('span[aria-hidden=true]');
   if (!label) {
     return;
@@ -147,23 +147,25 @@ const handlePaginationClick = (event) => {
     return;
   }
 
-  const isNextButton = paginator.classList.contains('m-pagination_btn-next');
-  const isPrevButton = paginator.classList.contains('m-pagination_btn-prev');
-  const isGoButton = paginator.classList.contains('m-pagination_btn-submit');
+  const isNextButton = paginator.classList.contains('m-pagination__btn-next');
+  const isPrevButton = paginator.classList.contains('m-pagination__btn-prev');
+  const isGoButton = paginator.classList.contains('m-pagination__btn-submit');
   const isDisabled = paginator.classList.contains('a-btn__disabled');
 
   if (isDisabled || (!isNextButton && !isPrevButton && !isGoButton)) {
     return;
   }
 
-  const currPageDom = searchContent.querySelector('.m-pagination_current-page');
+  const currPageDom = searchContent.querySelector(
+    '.m-pagination__current-page',
+  );
 
   // This is the actual page number we're on.
   const currPage = parseInt(currPageDom.getAttribute('value'), 10);
   // This is the page that's set in the page counter.
   const selPage = parseInt(currPageDom.value, 10);
   const ofTotalPagesTxt = searchContent.querySelectorAll(
-    '.m-pagination_label',
+    '.m-pagination__label',
   )[1].textContent;
   let usePage = currPage;
 
diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.less
index 42bc928c567..472f8ac8116 100644
--- a/cfgov/unprocessed/css/breadcrumbs.less
+++ b/cfgov/unprocessed/css/breadcrumbs.less
@@ -11,7 +11,7 @@
   padding-bottom: unit(15px / @base-font-size-px, rem);
   min-height: 33px;
 
-  &_crumbs {
+  &__crumbs {
     display: block;
     overflow: hidden;
     white-space: nowrap;
@@ -35,7 +35,7 @@
 });
 
 // TODO: When all full-width templates use layout-full.html this can be removed.
-.content_wrapper .m-breadcrumbs {
+.content__wrapper .m-breadcrumbs {
   margin-left: unit(15px / @base-font-size-px, rem);
 
   // Tablet only.
diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less
index 7c76976a11c..bde9a3cc298 100644
--- a/cfgov/unprocessed/css/enhancements/layout-1-3.less
+++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less
@@ -1,9 +1,9 @@
 @layer layout-1-3 {
   // Defaults shared in left-to-right (LTR) and right-to-left (RTL) layouts.
-  .u-layout-grid__1-3 {
+  .u-layout-grid--1-3 {
     // Mobile
     .u-layout-grid {
-      &_secondary-nav {
+      &__secondary-nav {
         margin-left: unit(-15px / @base-font-size-px, rem);
         margin-right: unit(-15px / @base-font-size-px, rem);
       }
@@ -12,7 +12,7 @@
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
       .u-layout-grid {
-        &_secondary-nav {
+        &__secondary-nav {
           // Hide this element when it has a secondary nav DOM.
           &:has(nav.o-secondary-nav__no-children) {
             display: none !important;
@@ -24,7 +24,7 @@
     // Tablet only.
     .respond-to-range(@bp-sm-min, @bp-sm-max, {
       .u-layout-grid {
-        &_secondary-nav {
+        &__secondary-nav {
           margin-left: unit(-30px / @base-font-size-px, rem);
           margin-right: unit(-30px / @base-font-size-px, rem);
         }
@@ -34,7 +34,7 @@
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_wrapper {
+        &__wrapper {
           grid-auto-rows: minmax(0, auto) minmax(0, auto) 1fr;
           // Numbers below are 870 split into four parts
           // 870 is the 900px breakpoint - 30px of gutters
@@ -44,8 +44,8 @@
             'c-secondary-nav c-main';
         }
 
-        &_main,
-        &_secondary-nav {
+        &__main,
+        &__secondary-nav {
           margin-left: 0;
         }
       }
@@ -53,11 +53,11 @@
   }
 
   // 1-3 Left-to-right (LTR) layout.
-  .u-layout-grid__1-3:not(&[dir='rtl']) {
+  .u-layout-grid--1-3:not(&[dir='rtl']) {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_wrapper {
+        &__wrapper {
           grid-auto-rows: minmax(0, auto) minmax(0, auto) 1fr;
           // Numbers below are 870 split into four parts
           // 870 is the 900px breakpoint - 30px of gutters
@@ -67,13 +67,13 @@
             'c-secondary-nav c-main';
         }
 
-        &_main {
+        &__main {
           position: relative;
           margin-left: unit(30px / @base-font-size-px, rem);
 
           &:after {
             content: '';
-            border-left: 1px solid @content_main-border;
+            border-left: 1px solid @content__main-border;
             position: absolute;
             top: unit(30px / @base-font-size-px, rem );
             bottom: 0;
@@ -81,7 +81,7 @@
           }
         }
 
-        &_secondary-nav {
+        &__secondary-nav {
           margin-right: unit(30px / @base-font-size-px, rem);
         }
       }
@@ -89,17 +89,17 @@
   }
 
   // 1-3 Right-to-left (RTL) layout.
-  .u-layout-grid__1-3[dir='rtl'] {
+  .u-layout-grid--1-3[dir='rtl'] {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_main {
+        &__main {
           position: relative;
           margin-right: unit(30px / @base-font-size-px, rem);
 
           &:after {
             content: '';
-            border-left: 1px solid @content_main-border;
+            border-left: 1px solid @content__main-border;
             position: absolute;
             top: unit(30px / @base-font-size-px, rem );
             bottom: 0;
@@ -107,7 +107,7 @@
           }
         }
 
-        &_secondary-nav {
+        &__secondary-nav {
           margin-left: unit(30px / @base-font-size-px, rem);
         }
       }
@@ -115,7 +115,7 @@
   }
 
   // Optionally make the secondary nav sticky
-  .u-layout-grid_secondary-nav__sticky {
+  .u-layout-grid__secondary-nav--sticky {
     position: sticky;
     top: 0;
     align-self: start;
diff --git a/cfgov/unprocessed/css/enhancements/layout-2-1.less b/cfgov/unprocessed/css/enhancements/layout-2-1.less
index d7f17a2db6b..8d6b67968a9 100644
--- a/cfgov/unprocessed/css/enhancements/layout-2-1.less
+++ b/cfgov/unprocessed/css/enhancements/layout-2-1.less
@@ -26,11 +26,11 @@
   }
 
   // Defaults shared in left-to-right (LTR) and right-to-left (RTL) layouts.
-  .u-layout-grid__2-1 {
+  .u-layout-grid--2-1 {
     // Mobile and above
     // TODO: The hero has a wrapper we need to ignore, so the direct reference to m-hero is a temp workaround.
     .m-hero,
-    .u-layout-grid_hero {
+    .u-layout-grid__hero {
       position: relative;
 
       // Create the hero background bleed.
@@ -40,7 +40,7 @@
     }
 
     .u-layout-grid {
-      &_sidebar {
+      &__sidebar {
         position: relative;
         padding-left: unit(30px / @base-font-size-px, rem);
         margin-left: unit(-30px / @base-font-size-px, rem);
@@ -55,7 +55,7 @@
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_wrapper {
+        &__wrapper {
           // Numbers below are 870 split into three parts
           // 870 is the 900px breakpoint - 30px of gutters
           grid-auto-columns: minmax(580px, 2fr) minmax(290px, 1fr);
@@ -68,18 +68,18 @@
   }
 
   // 2-1 Left-to-right (LTR) layout.
-  .u-layout-grid__2-1:not(&[dir='rtl']) {
+  .u-layout-grid--2-1:not(&[dir='rtl']) {
     // This is for the sidebar bleed.
     overflow-x: hidden;
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_main {
+        &__main {
           padding-right: unit(10px / @base-font-size-px, rem);
         }
 
-        &_sidebar {
+        &__sidebar {
           padding-left: unit(30px / @base-font-size-px, rem);
           margin-left: unit(20px / @base-font-size-px, rem);
 
@@ -93,15 +93,15 @@
   }
 
   // 2-1 Right-to-left (RTL) layout.
-  .u-layout-grid__2-1[dir='rtl'] {
+  .u-layout-grid--2-1[dir='rtl'] {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       .u-layout-grid {
-        &_main {
+        &__main {
           padding-left: unit(10px / @base-font-size-px, rem);
         }
 
-        &_sidebar {
+        &__sidebar {
           padding-right: unit(30px / @base-font-size-px, rem);
           margin-right: unit(20px / @base-font-size-px, rem);
 
diff --git a/cfgov/unprocessed/css/enhancements/layout-base.less b/cfgov/unprocessed/css/enhancements/layout-base.less
index f759a2978a6..d8a58d0226a 100644
--- a/cfgov/unprocessed/css/enhancements/layout-base.less
+++ b/cfgov/unprocessed/css/enhancements/layout-base.less
@@ -3,7 +3,7 @@
   .u-layout-grid {
     --layout-max-width: 1170px;
 
-    &_wrapper {
+    &__wrapper {
       display: grid;
       max-width: var(--layout-max-width);
       margin: 0 auto;
@@ -19,30 +19,30 @@
     }
 
     // Name all possible content area elements (appearing inside <main>).
-    &_breadcrumbs {
+    &__breadcrumbs {
       grid-area: c-breadcrumbs;
     }
 
-    &_main {
+    &__main {
       grid-area: c-main;
       padding-top: unit((30px / @base-font-size-px), rem);
     }
 
-    &_sidebar {
+    &__sidebar {
       grid-area: c-sidebar;
     }
 
-    &_secondary-nav {
+    &__secondary-nav {
       grid-area: c-secondary-nav;
     }
 
-    &_prefooter {
+    &__prefooter {
       grid-area: c-prefooter;
     }
 
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
-      &_breadcrumbs {
+      &__breadcrumbs {
         padding-left: unit(30px / @base-font-size-px, rem);
         padding-right: unit(30px / @base-font-size-px, rem);
         margin-left: unit(-30px / @base-font-size-px, rem);
@@ -54,7 +54,7 @@
 
     // Tablet only.
     .respond-to-range(@bp-sm-min, @bp-sm-max, {
-      &_breadcrumbs {
+      &__breadcrumbs {
         padding-left: unit(15px / @base-font-size-px, rem);
         padding-right: unit(15px / @base-font-size-px, rem);
       }
@@ -62,7 +62,7 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      &_wrapper {
+      &__wrapper {
         // This handles collapsing of the breadcrumbs space if they are absent.
         grid-template-rows: min-content 1fr;
         padding-left: unit(30px / @base-font-size-px, rem);
@@ -70,36 +70,36 @@
       }
 
       // If we do not have breadcrumbs, the gap above the content is larger…
-      &_main,
-      &_secondary-nav {
+      &__main,
+      &__secondary-nav {
         margin-top: unit((15px / @base-font-size-px), rem);
       }
 
       // …than if we do have breadcrumbs
-      &_breadcrumbs ~ &_main,
-      &_breadcrumbs ~ &_secondary-nav {
+      &__breadcrumbs ~ &__main,
+      &__breadcrumbs ~ &__secondary-nav {
         margin-top: 0;
       }
     });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      &_secondary-nav {
+      &__secondary-nav {
         padding-top: unit((30px / @base-font-size-px), rem);
       }
     });
   }
 
   // Modifier to remove max-width value. Used on CCDB, for example.
-  .u-layout-grid__full-width {
-    .u-layout-grid_wrapper {
+  .u-layout-grid--full-width {
+    .u-layout-grid__wrapper {
       max-width: initial;
     }
   }
 
   // Set default line width.
-  .u-layout-grid_main,
-  .u-layout-grid_content-intro {
+  .u-layout-grid__main,
+  .u-layout-grid__content-intro {
     dd,
     dt,
     h3,
@@ -114,7 +114,7 @@
   }
 
   // "Breakout" container that bleeds out of the grid to the screen edge.
-  .u-layout-grid_breakout {
+  .u-layout-grid__breakout {
     width: 100vw;
     position: relative;
     left: 50%;
diff --git a/cfgov/unprocessed/css/enhancements/layout.less b/cfgov/unprocessed/css/enhancements/layout.less
index b6b10e0d05e..d2f5f4b9c0c 100644
--- a/cfgov/unprocessed/css/enhancements/layout.less
+++ b/cfgov/unprocessed/css/enhancements/layout.less
@@ -29,8 +29,8 @@
   });
 }
 
-.content-l_col {
-  &.content-l_col-1 + &.content-l_col-1 {
+.content-l__col {
+  &.content-l__col-1 + &.content-l__col-1 {
     margin-top: 0;
   }
 }
@@ -42,7 +42,7 @@
 // Center content and bleed full-width images into gutters
 // Used on our story pages
 .content__center-image-bleed {
-  .u-layout-grid_main {
+  .u-layout-grid__main {
     max-width: 41.875rem;
     margin-left: auto;
     margin-right: auto;
diff --git a/cfgov/unprocessed/css/enhancements/typography.less b/cfgov/unprocessed/css/enhancements/typography.less
index f0c24ad01c0..da329d557d6 100644
--- a/cfgov/unprocessed/css/enhancements/typography.less
+++ b/cfgov/unprocessed/css/enhancements/typography.less
@@ -23,6 +23,6 @@ dd {
   .heading-5();
 }
 
-.a-link_text {
+.a-link__text {
   overflow-wrap: break-word;
 }
diff --git a/cfgov/unprocessed/css/images.less b/cfgov/unprocessed/css/images.less
index 2a3b5c58107..7d7ba8068dc 100644
--- a/cfgov/unprocessed/css/images.less
+++ b/cfgov/unprocessed/css/images.less
@@ -12,10 +12,10 @@
 // Styles for adding radial masks to images.
 // Used by info unit groups.
 
-.u-image_border-circle {
+.u-image__border-circle {
   border-radius: 50%;
 }
 
-.u-image_border-rounded {
+.u-image__border-rounded {
   border-radius: 12.5%;
 }
diff --git a/cfgov/unprocessed/css/molecules/autocomplete.less b/cfgov/unprocessed/css/molecules/autocomplete.less
index 4996e305e77..a76732210c8 100644
--- a/cfgov/unprocessed/css/molecules/autocomplete.less
+++ b/cfgov/unprocessed/css/molecules/autocomplete.less
@@ -6,7 +6,7 @@
   }
 }
 
-.m-autocomplete_results {
+.m-autocomplete__results {
   box-sizing: border-box;
   width: 100%;
   // Restrict height of autocomplete suggestions
@@ -26,8 +26,8 @@
     margin-bottom: 0;
 
     &:hover,
-    &.m-autocomplete_selected {
-      background-color: @block__bg;
+    &.m-autocomplete__selected {
+      background-color: @block--bg;
     }
 
     &:last-child {
diff --git a/cfgov/unprocessed/css/molecules/call-to-action.less b/cfgov/unprocessed/css/molecules/call-to-action.less
index 5057da05c36..ddd9b4ee18e 100644
--- a/cfgov/unprocessed/css/molecules/call-to-action.less
+++ b/cfgov/unprocessed/css/molecules/call-to-action.less
@@ -1,5 +1,5 @@
 .m-call-to-action {
-  &_text {
+  &__text {
     margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/form-field-with-button.less b/cfgov/unprocessed/css/molecules/form-field-with-button.less
index 9b941090a0d..6df124183ed 100644
--- a/cfgov/unprocessed/css/molecules/form-field-with-button.less
+++ b/cfgov/unprocessed/css/molecules/form-field-with-button.less
@@ -5,7 +5,7 @@
     margin-bottom: 0;
   }
 
-  &_info,
+  &__info,
   .a-btn {
     margin-top: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/css/molecules/full-width-media.less b/cfgov/unprocessed/css/molecules/full-width-media.less
index 3a61062643d..340dd2c7fdd 100644
--- a/cfgov/unprocessed/css/molecules/full-width-media.less
+++ b/cfgov/unprocessed/css/molecules/full-width-media.less
@@ -1,14 +1,14 @@
 .m-full-width-media {
-  &__bottom-rule {
+  &--bottom-rule {
     padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
     border-bottom: 1px solid @horizontal-rule;
   }
 
-  &_image {
+  &__image {
     display: block;
   }
 
-  &_caption {
+  &__caption {
     margin-top: unit(15px / @base-font-size-px, rem);
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/global-eyebrow.less b/cfgov/unprocessed/css/molecules/global-eyebrow.less
index a18dff6e58e..3a86272b6cc 100644
--- a/cfgov/unprocessed/css/molecules/global-eyebrow.less
+++ b/cfgov/unprocessed/css/molecules/global-eyebrow.less
@@ -1,14 +1,14 @@
 .m-global-eyebrow {
   font-size: unit(12px / @base-font-size-px, em);
 
-  &_actions {
+  &__actions {
     text-align: right;
   }
 
-  &_languages {
+  &__languages {
     display: inline;
 
-    .m-list_item:not(:last-child) {
+    .m-list__item:not(:last-child) {
       margin-right: unit(7px / 12px, em);
       margin-bottom: 0;
 
@@ -22,11 +22,11 @@
     }
   }
 
-  &_phone {
+  &__phone {
     padding-left: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   }
 
-  &__horizontal {
+  &--horizontal {
     width: 100%;
     display: inline-block;
     padding-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
@@ -39,13 +39,13 @@
       float: left;
     }
 
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__languages {
       text-align: right;
     }
 
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
-      .m-global-eyebrow_actions {
+      .m-global-eyebrow__actions {
         display: none;
       }
       /* Prevent spacing issues since the languages aren't displayed */
@@ -55,13 +55,13 @@
     });
   }
 
-  &__list {
+  &--list {
     padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
     padding-left: unit(@grid_gutter-width / @base-font-size-px, rem);
     padding-right: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
     padding-bottom: unit(@grid_gutter-width / @base-font-size-px, rem);
 
-    .m-global-eyebrow_actions {
+    .m-global-eyebrow__actions {
       padding: 0;
       border: 0;
       margin: 0;
@@ -69,13 +69,13 @@
       text-align: left;
     }
 
-    .m-global-eyebrow_phone,
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__phone,
+    .m-global-eyebrow__languages {
       display: block;
       padding-left: 0;
     }
 
-    .m-global-eyebrow_phone {
+    .m-global-eyebrow__phone {
       border-top: 1px solid var(--gray-40);
       padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
 
@@ -86,10 +86,10 @@
       }
     }
 
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__languages {
       margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
 
-      .m-list_item {
+      .m-list__item {
         // Apply padding to the language links to increase their touch area.
         a {
           display: block;
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
index d8d9c05a763..cae6749d028 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.less
@@ -5,7 +5,7 @@
 @mobile_trigger_ht__px: 54px;
 
 .m-global-search {
-  &_trigger {
+  &__trigger {
     // Hide search unless we have JavaScript (JS).
     html.no-js & {
       display: none;
@@ -42,7 +42,7 @@
     }
   }
 
-  &_content {
+  &__content {
     position: absolute;
     left: 0;
 
@@ -63,11 +63,11 @@
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
 
-    &_fallback {
+    &__fallback {
       margin: @margin_half__em;
     }
 
-    &_trigger {
+    &__trigger {
       padding-top: 5px;
       height: @mobile_trigger_ht__px;
       min-width: @mobile_trigger_ht__px;
@@ -76,11 +76,11 @@
         background: var(--gray-10);
         border-left: 1px solid var(--gray-40);
 
-        .m-global-search_trigger-open-label {
+        .m-global-search__trigger-open-label {
           display: none;
         }
 
-        .m-global-search_trigger-close-label {
+        .m-global-search__trigger-close-label {
           display: block;
         }
       }
@@ -97,7 +97,7 @@
       }
     }
 
-    &_content {
+    &__content {
       width: 100%;
 
       &-form {
@@ -119,7 +119,7 @@
 
   // Tablet only.
   .respond-to-range(@bp-sm-min, @bp-sm-max, {
-    &_trigger {
+    &__trigger {
       // Min-width sets open/close states to same size.
       min-width: 110px;
 
@@ -141,7 +141,7 @@
 
     overflow: hidden;
 
-    &_trigger {
+    &__trigger {
       float: right;
 
       // Match height of input with button.
@@ -153,7 +153,7 @@
       }
     }
 
-    &_content {
+    &__content {
       right: @margin_half__em;
       width: auto;
       // Add margin so that the focus rectangle is not cropped by
@@ -164,23 +164,23 @@
 
   // Mobile size.
   .respond-to-min(480px, {
-    &_content-form {
+    &__content-form {
 
       // The  search  button needs to be more flexible than in our usual
       // input-w-btn element to accommodate longer translations of  search ,
       // so we will make it flexbox
-      .o-form__input-w-btn {
+      .o-form--input-w-btn {
         display: flex;
         padding-right: 0.25em;
       }
 
-      .o-form__input-w-btn_input-container {
+      .o-form--input-w-btn__input-container {
         display: flex;
         width: initial;
         flex: 0 1 75%;
       }
 
-      .o-form__input-w-btn_btn-container {
+      .o-form--input-w-btn__btn-container {
         width: initial;
         border-left: 0;
         flex: 1 1 25%;
@@ -209,7 +209,7 @@
   });
 
   // Hide fallback by default.
-  &_fallback {
+  &__fallback {
     display: none;
     padding: 8px;
     padding-right: 0;
diff --git a/cfgov/unprocessed/css/molecules/info-unit.less b/cfgov/unprocessed/css/molecules/info-unit.less
index 7be8f6b9b9a..16f2cb29980 100644
--- a/cfgov/unprocessed/css/molecules/info-unit.less
+++ b/cfgov/unprocessed/css/molecules/info-unit.less
@@ -43,13 +43,13 @@
 .u-info-unit-base__inline( @img_size ) {
   .u-clearfix();
 
-  .m-info-unit_image {
+  .m-info-unit__image {
     float: left;
     margin-bottom: 0;
   }
 
-  .m-info-unit_content,
-  .m-info-unit_heading-text {
+  .m-info-unit__content,
+  .m-info-unit__heading-text {
     margin-left: unit(
       (@img_size + @grid_gutter-width) / @base-font-size-px,
       em
diff --git a/cfgov/unprocessed/css/molecules/inset.less b/cfgov/unprocessed/css/molecules/inset.less
index f62b0e7251b..d976c691b74 100644
--- a/cfgov/unprocessed/css/molecules/inset.less
+++ b/cfgov/unprocessed/css/molecules/inset.less
@@ -4,16 +4,16 @@
   margin-left: auto;
   margin-right: auto;
 
-  &__bottom-rule {
+  &--bottom-rule {
     padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
     border-bottom: 1px solid @horizontal-rule;
   }
 
-  &_caption {
+  &__caption {
     margin-top: unit(15px / @base-font-size-px, em);
   }
 
-  &__bordered {
+  &--bordered {
     // Styling for "Tip" insets, most commonly used in Ask CFPB
     border-top: 4px solid var(--teal-60);
     border-bottom: 2px solid var(--teal-40);
@@ -30,12 +30,12 @@
     });
   }
 
-  &.m-inset__170 {
+  &.m-inset--170 {
     // Ensure that 170px inset images are that same size on XS screens
     width: unit(170px / @base-font-size-px, em);
   }
 
-  &__270 {
+  &--270 {
     // Ensure that 270px inset images are that same size on XS screens
     width: unit(270px / @base-font-size-px, em);
   }
@@ -47,7 +47,7 @@
     float: right;
     width: unit( 270px / @base-font-size-px, em );
 
-    &__left {
+    &--left {
       float: left;
       clear: left;
     }
@@ -58,7 +58,7 @@
   });
 
   .respond-to-min(@bp-xl-min, {
-    &__470 {
+    &--470 {
       width: unit( 470px / @base-font-size-px, em );
     }
   });
@@ -77,7 +77,7 @@
     margin-bottom: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
   }
 
-  &__email {
+  &--email {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       box-sizing: border-box;
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.less b/cfgov/unprocessed/css/molecules/related-metadata.less
index 66f8fbcb529..60a23e57eaa 100644
--- a/cfgov/unprocessed/css/molecules/related-metadata.less
+++ b/cfgov/unprocessed/css/molecules/related-metadata.less
@@ -3,8 +3,8 @@
 @bullet-font-size__em: unit(15px / @base-font-size-px, em);
 
 .m-related-metadata {
-  .m-list_link {
-    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
+  .m-list__link {
+    .u-link--colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
   }
 
   // Tablet only.
@@ -14,7 +14,7 @@
   });
 }
 
-.m-related-metadata_item-container {
+.m-related-metadata__item-container {
   &:not(:last-child) {
     margin-bottom: @margin_half__em * 2;
   }
@@ -24,7 +24,7 @@
   }
 }
 
-.m-related-metadata_status {
+.m-related-metadata__status {
   div {
     margin-bottom: 1.25em;
   }
@@ -35,10 +35,10 @@
   }
 }
 
-.m-related-metadata_topics {
+.m-related-metadata__topics {
   line-height: 1em;
 
-  .m-list_link {
+  .m-list__link {
     .h6();
     position: relative;
     margin: 0 0 0 @bullet-font-size__em;
@@ -59,7 +59,7 @@
   }
 
   .respond-to-max(@bp-sm-min, {
-    .m-list_link {
+    .m-list__link {
       margin-left: 0;
 
       &:before {
diff --git a/cfgov/unprocessed/css/molecules/related-posts.less b/cfgov/unprocessed/css/molecules/related-posts.less
index 8e582f25cf0..97581b60cb8 100644
--- a/cfgov/unprocessed/css/molecules/related-posts.less
+++ b/cfgov/unprocessed/css/molecules/related-posts.less
@@ -1,6 +1,6 @@
 @gap: unit(15px / @base-font-size-px, rem);
 
-.m-related-posts_list {
+.m-related-posts__list {
   display: grid;
   column-gap: @gap * 2;
   row-gap: @gap;
@@ -11,22 +11,22 @@
     minmax(230px, calc(50% - @gap))
   );
 
-  .m-list_link {
-    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
-    .u-link__no-border();
+  .m-list__link {
+    .u-link--colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
+    .u-link--no-border();
 
     &:hover {
       border-bottom: 1px dotted;
     }
   }
 
-  .m-list_item .a-date {
+  .m-list__item .a-date {
     margin-bottom: 0;
     margin-top: unit(10px / @base-font-size-px, rem);
   }
 }
 
-.m-related-posts_list-container {
+.m-related-posts__list-container {
   margin-bottom: @gap * 2;
 
   &:last-child {
@@ -36,7 +36,7 @@
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
   // Always remove columns at mobile size.
-  .m-related-posts_list {
+  .m-related-posts__list {
     grid-template-columns: initial;
   }
 });
@@ -45,7 +45,7 @@
 .respond-to-min(@bp-med-min, {
   // If in the sidebar at desktop sizes, do not break into columns.
   // Related posts also appear in the pre-footer, so we exclude that here.
-  .u-layout-grid_sidebar .m-related-posts_list {
+  .u-layout-grid__sidebar .m-related-posts__list {
     grid-template-columns: initial;
   }
 });
diff --git a/cfgov/unprocessed/css/molecules/social-media.less b/cfgov/unprocessed/css/molecules/social-media.less
index 9cf18282c8f..f940f1ee2f8 100644
--- a/cfgov/unprocessed/css/molecules/social-media.less
+++ b/cfgov/unprocessed/css/molecules/social-media.less
@@ -4,12 +4,12 @@
   row-gap: unit(10px / @base-font-size-px, rem);
   column-gap: unit(30px / @base-font-size-px, rem);
 
-  &_icons {
+  &__icons {
     display: flex;
     gap: unit(10px / @base-font-size-px, rem);
   }
 
-  &_icon {
+  &__icon {
     color: var(--gray-dark);
     font-size: unit(@grid_gutter-width / @base-font-size-px, rem);
     line-height: 1;
@@ -17,14 +17,14 @@
     .u-link__no-border();
   }
 
-  // Only for elements in "share" (m-social-media__share) section.
-  &__share {
-    .m-social-media_heading {
+  // Only for elements in "share" (m-social-media--share) section.
+  &--share {
+    .m-social-media__heading {
       .heading-5();
       margin: auto 0;
     }
 
-    .m-social-media_print {
+    .m-social-media__print {
       padding-left: unit(10px / @base-font-size-px, rem);
       border-left: 1px solid var(--black);
     }
@@ -36,14 +36,14 @@
   });
 
   // Hide print when JS is off.
-  .no-js &_print {
+  .no-js &__print {
     display: none;
   }
 }
 
 // Right-to-left (RTL) layout.
-html[lang='ar'] .m-social-media__share {
-  .m-social-media_print {
+html[lang='ar'] .m-social-media--share {
+  .m-social-media__print {
     padding-left: 0;
     border-left: none;
     padding-right: unit(10px / @base-font-size-px, rem);
@@ -51,7 +51,7 @@ html[lang='ar'] .m-social-media__share {
   }
 
   // TODO: Scrutinize usage of unordered list and see if it can be removed.
-  .m-list_item:first-child {
+  .m-list__item:first-child {
     margin-right: 0;
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/tags.less b/cfgov/unprocessed/css/molecules/tags.less
index e9ec563cf47..866e7954b40 100755
--- a/cfgov/unprocessed/css/molecules/tags.less
+++ b/cfgov/unprocessed/css/molecules/tags.less
@@ -4,13 +4,13 @@
 
 .m-tags {
   // Mobile.
-  &_heading {
+  &__heading {
     .h4();
     display: block;
     color: var(--black);
   }
 
-  &_list {
+  &__list {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
@@ -19,7 +19,7 @@
     list-style-type: none;
   }
 
-  &_tag {
+  &__tag {
     .h6();
     // Override h6 margin.
     margin: 0;
@@ -30,11 +30,11 @@
     color: var(--gray);
   }
 
-  &_item {
+  &__item {
     margin: 0;
   }
 
-  &_bullet {
+  &__bullet {
     position: absolute;
     left: -1em;
     color: var(--gold-80);
@@ -43,23 +43,23 @@
     margin-left: @bullet-font-size;
   }
 
-  a.m-tags_tag {
-    .u-link__colors(
+  a.m-tags--tag {
+    .u-link--colors(
       var(--gray), var(--gray), var(--gray), var(--gray), var(--gray),
       var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80)
     );
   }
 
   // Negate the border of the sibling when hovering.
-  &_item:hover + &_item {
-    a.m-tags_tag {
+  &_item:hover + &__item {
+    a.m-tags--tag {
       border-top: none;
     }
   }
 
   // Mobile only.
   .respond-to-max(@bp-xs-max, {
-    &_tag {
+    &__tag {
       height: 100%;
       width: 100%;
       padding-top: unit(10px / @base-font-size-px, rem);
@@ -68,7 +68,7 @@
       border-top: 1px dotted var(--gold-80);
     }
 
-    a.m-tags_tag {
+    a.m-tags__tag {
       border-bottom-width: 0;
 
       &:hover {
@@ -80,7 +80,7 @@
     // Add bottom border to last tag.
     &_item:last-child {
       // This needs to appear after border-bottom-width: 0;
-      .m-tags_tag {
+      .m-tags__tag {
         border-bottom: 1px dotted var(--gold-80);
       }
     }
@@ -92,16 +92,16 @@
     align-items: baseline;
     gap: unit(15px / @base-font-size-px, rem);
 
-    &_list {
+    &__list {
       flex-direction: row;
       gap: unit(15px / @base-font-size-px, rem);
     }
 
-    &_tag {
+    &__tag {
       margin-left: @bullet-font-size;
     }
 
-    &_bullet {
+    &__bullet {
       margin-left: 0;
     }
   });
@@ -114,7 +114,7 @@
 // Right-to-left (RTL) adjustments for arabic pages.
 html[lang='ar'] {
   .m-tags {
-    &_bullet {
+    &__bullet {
       position: absolute;
       right: -1rem;
       left: initial;
@@ -123,23 +123,23 @@ html[lang='ar'] {
 
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
-      &_tag {
+      &__tag {
         padding-right: @bullet-font-size;
       }
 
-      &_bullet {
+      &__bullet {
         right: unit(-7px / @base-font-size-px, rem);
       }
     });
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      &_tag {
+      &__tag {
         margin-left: 0;
         margin-right: @bullet-font-size;
       }
 
-      &_bullet {
+      &__bullet {
         margin-right: 0;
       }
     });
diff --git a/cfgov/unprocessed/css/on-demand/ask.less b/cfgov/unprocessed/css/on-demand/ask.less
index 0cfac278538..d53cd12df70 100644
--- a/cfgov/unprocessed/css/on-demand/ask.less
+++ b/cfgov/unprocessed/css/on-demand/ask.less
@@ -6,7 +6,7 @@
    Ask CFPB pages at /ask-cfpb/.
    ========================================================================== */
 
-.ask-cfpb-page__see-all {
+.ask-cfpb-page--see-all {
   .search-bar,
   .m-notification,
   .results,
@@ -26,13 +26,13 @@
       padding-top: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
     }
 
-    .term_name {
+    .term__name {
       .h2();
 
       display: block;
     }
 
-    .term_definition {
+    .term__definition {
       display: block;
       margin-left: 0;
     }
@@ -56,7 +56,7 @@
       margin-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
     }
 
-    .a-btn__link {
+    .a-btn--link {
       margin-left: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
     }
 
@@ -98,7 +98,7 @@
     article {
       padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
       padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-      border-top: 1px solid @block__border-top;
+      border-top: 1px solid @block--border-top;
 
       .h3 {
         margin-bottom: 0;
@@ -174,7 +174,7 @@
     font-weight: 500;
   }
 
-  .m-list_item__last {
+  .m-list__item__last {
     padding-top: unit(7px / @base-font-size-px, em);
   }
 
@@ -187,7 +187,7 @@
   // the width of that button to auto lets it overrun its container if needed.
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .o-form__input-w-btn_btn-container .a-btn {
+    .o-form--input-w-btn__btn-container .a-btn {
       width: auto;
     }
   });
@@ -205,7 +205,7 @@
 
   .answer-module {
     border-top: 3px solid var(--green);
-    border-bottom: 1px solid @block__border-bottom;
+    border-bottom: 1px solid @block--border-bottom;
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0;
     margin: unit(@grid_gutter-width / @base-font-size-px, em) 0;
     color: var(--gray);
@@ -244,7 +244,7 @@
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
     .m-hero {
-      border-bottom: 1px solid @block__border;
+      border-bottom: 1px solid @block--border;
     }
   });
 
@@ -273,7 +273,7 @@
   // of that button to auto lets it overrun its container if needed.
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .o-form__input-w-btn_btn-container .a-btn {
+    .o-form--input-w-btn__btn-container .a-btn {
       width: auto;
     }
   });
@@ -292,7 +292,7 @@
   }
 
   .question_summary {
-    border-bottom: 1px solid @block__border-bottom;
+    border-bottom: 1px solid @block--border-bottom;
   }
 }
 
diff --git a/cfgov/unprocessed/css/on-demand/car-buying-guide.less b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
index 721ed50dbb0..ef7fc217fa6 100644
--- a/cfgov/unprocessed/css/on-demand/car-buying-guide.less
+++ b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
@@ -1,7 +1,7 @@
 @import (reference) '../main.less';
 
 .respond-to-print( {
-  .content_main {
+  .content__main {
     border-width: 0 !important;
     margin: 0 !important;
     display: block !important;
@@ -26,7 +26,7 @@
 
   header,
   footer,
-  .content_sidebar,
+  .content__sidebar,
   .cbg-checklist {
     display: none !important;
   }
diff --git a/cfgov/unprocessed/css/on-demand/error.less b/cfgov/unprocessed/css/on-demand/error.less
index a659fac6da8..86f6bcb5610 100644
--- a/cfgov/unprocessed/css/on-demand/error.less
+++ b/cfgov/unprocessed/css/on-demand/error.less
@@ -5,7 +5,7 @@
    Page-specific styles for the error pages.
    ========================================================================== */
 
-.m-list__divider {
+.m-list--divider {
   display: flex;
   flex-direction: column;
   gap: unit(30px / @base-font-size-px, rem);
@@ -14,7 +14,7 @@
   .respond-to-min(@bp-sm-min, {
     flex-direction: row;
 
-    .m-list_item + .m-list_item {
+    .m-list__item + .m-list__item {
       border-left: 1px solid var(--white);
       padding-left: unit( 30px / @base-font-size-px, rem);
     }
@@ -24,7 +24,7 @@
 .error-page {
   background-color: var(--gray-dark);
 
-  &_main {
+  &__main {
     color: var(--white);
 
     // Desktop and above.
@@ -37,14 +37,14 @@
       background-blend-mode: normal;
     });
 
-    .a-link__jump {
+    .a-link--jump {
       color: var(--white);
       border-color: var(--white);
       margin-top: unit((@grid_gutter-width / 4) / @base-font-size-px, em);
     }
   }
 
-  &_404 {
+  &__404 {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       background: var(--gray-dark) url('/static/img/plug-538x655.png') no-repeat top right;
@@ -52,7 +52,7 @@
     });
   }
 
-  &_500 {
+  &__500 {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       background: var(--gray-dark) url('/static/img/server-706x619.png') no-repeat center right;
diff --git a/cfgov/unprocessed/css/on-demand/event.less b/cfgov/unprocessed/css/on-demand/event.less
index fc2d51a1ce1..3d29944e514 100644
--- a/cfgov/unprocessed/css/on-demand/event.less
+++ b/cfgov/unprocessed/css/on-demand/event.less
@@ -9,7 +9,7 @@
 
 /* Event template settings
    ========================================================================== */
-.t-event_details {
+.t-event__details {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
     .modification-date {
@@ -20,7 +20,7 @@
 
 /* Event-Agenda Table
    ========================================================================== */
-.event-agenda_table {
+.event-agenda__table {
   h2 + & td[data-label]::before {
     margin-top: 0;
   }
@@ -41,7 +41,7 @@
 /* Event-Post
    ========================================================================== */
 
-.post__event {
+.post--event {
   > footer {
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
   }
@@ -56,27 +56,27 @@
 /* Event-Media-Container
    ========================================================================== */
 
-.event-media_container {
+.event-media__container {
   border: 1px solid var(--gray-10);
 }
 
 /* Event-Meta
    ========================================================================== */
 
-.event-meta_description {
+.event-meta__description {
   text-transform: none;
 
-  &__block {
+  &--block {
     display: block;
   }
 }
 
-.event-meta_address {
+.event-meta__address {
   text-transform: capitalize;
   display: inline-block;
 
-  .event-meta_street:not(:empty)::after,
-  .event-meta_suite:not(:empty)::after {
+  .event-meta__street:not(:empty)::after,
+  .event-meta__suite:not(:empty)::after {
     // Adding a linebreak after the street if it's contents
     // aren't empty.
     content: '\A';
@@ -84,7 +84,7 @@
   }
 }
 
-.event-calendar_container .datetime {
+.event-calendar__container .datetime {
   letter-spacing: normal;
 }
 
@@ -105,7 +105,7 @@
     margin-left: unit(@grid_gutter-width / @base-font-size-px, em);
   });
 
-  &_body {
+  &__body {
     margin: unit(26px / @base-font-size-px, em) 0
       unit(26px / @base-font-size-px, em);
   }
@@ -115,7 +115,7 @@
   }
 }
 
-.event-status_livestream p:first-child {
+.event-status__livestream p:first-child {
   line-height: 1;
   // The margin is kept at 10px to accommodate the line-height
   // of the text so that the gap appears to be 15px.
@@ -130,7 +130,7 @@
   border-top: 5px solid var(--green);
 }
 
-.event-venue_details {
+.event-venue__details {
   padding: 1.5em 1.5em 0.5em;
 
   .respond-to-max(@bp-xs-max, {
@@ -142,22 +142,22 @@
     text-transform: uppercase;
   }
 
-  .event-meta_address {
+  .event-meta__address {
     .respond-to-max(@bp-xs-max, {
       margin: 0;
     });
   }
 
-  .event-meta_venue {
+  .event-meta__venue {
     display: block;
   }
 }
 
-.event-venue_header {
+.event-venue__header {
   margin-bottom: 10px;
 }
 
-.event-venue_live-btn {
+.event-venue__live-btn {
   margin-right: 10px;
   background-color: var(--green);
   color: var(--black);
@@ -165,7 +165,7 @@
   padding: 6px 15px 4px;
 }
 
-.event-venue_heading {
+.event-venue__heading {
   display: inline-block;
   margin-bottom: 0;
   vertical-align: middle;
@@ -181,7 +181,7 @@
   text-align: center;
 }
 
-.post_heading {
+.post__heading {
   .h2();
   margin-bottom: unit(13px / @font-size, em);
   // Tablet and above.
@@ -190,12 +190,12 @@
   });
 }
 
-.post_dek {
+.post__dek {
   .h4();
   margin-bottom: unit(20px / @font-size, em);
 }
 
-.post_body {
+.post__body {
   .u-clearfix();
   margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
 
diff --git a/cfgov/unprocessed/css/on-demand/job_listing_list.less b/cfgov/unprocessed/css/on-demand/job_listing_list.less
index 249cb2db8fd..352391e4011 100644
--- a/cfgov/unprocessed/css/on-demand/job_listing_list.less
+++ b/cfgov/unprocessed/css/on-demand/job_listing_list.less
@@ -3,13 +3,13 @@
 .m-jobs-list .m-list__links {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    .m-list_item + .m-list_item {
+    .m-list__item + .m-list__item {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
   });
 
-  .m-list_link-subtext {
-    .u-link__colors( var(--black) );
+  .m-list__link-subtext {
+    .u-link--colors( var(--black) );
     display: block;
     margin-top: unit(2px / @base-font-size-px, em);
     font-weight: normal;
diff --git a/cfgov/unprocessed/css/on-demand/job_listing_page.less b/cfgov/unprocessed/css/on-demand/job_listing_page.less
index a5af4c46d3a..60d9dc9352b 100644
--- a/cfgov/unprocessed/css/on-demand/job_listing_page.less
+++ b/cfgov/unprocessed/css/on-demand/job_listing_page.less
@@ -1,6 +1,6 @@
 @import (reference) 'cfpb-core.less';
 
-dl.vacancy-announcement_details dt {
+dl.vacancy-announcement__details dt {
   margin-top: unit(12px / @base-font-size-px, em);
   margin-bottom: 0;
 }
diff --git a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
index c9c800618ef..4f323f6bfc3 100644
--- a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
+++ b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
@@ -169,7 +169,7 @@
     margin-left: 0;
     padding: 0;
   }
-  .content-l_col {
+  .content-l__col {
     border-left-width: 0;
   }
 
diff --git a/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less b/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less
index d465407a954..e1d68d95148 100644
--- a/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less
+++ b/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less
@@ -1,7 +1,7 @@
 @import (reference) '../main.less';
 
 .o-sidebar-contact-info {
-  &_content {
+  &__content {
     margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
   }
 
diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.less b/cfgov/unprocessed/css/on-demand/simple-chart.less
index 380b73f9360..c3da2474147 100644
--- a/cfgov/unprocessed/css/on-demand/simple-chart.less
+++ b/cfgov/unprocessed/css/on-demand/simple-chart.less
@@ -24,11 +24,11 @@
     });
   }
 
-  .o-simple-chart_subtitle {
+  .o-simple-chart__subtitle {
     margin: 0 0 unit(30 / @base-font-size-px, em) 0;
   }
 
-  .o-simple-chart_filters {
+  .o-simple-chart__filters {
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       margin-top: unit( 9 / @base-font-size-px, em);
@@ -59,7 +59,7 @@
     }
   }
   .filter-wrapper {
-    .grid_column(1,2);
+    .grid__column(1,2);
     box-sizing: inherit;
     margin-bottom: unit(10 / @base-font-size-px, em);
     border-width: 0 30px 0 0;
@@ -71,7 +71,7 @@
     });
   }
 
-  .a-label__heading {
+  .a-label--heading {
     margin: 0;
     padding-bottom: 10px;
     // Mobile only.
@@ -80,7 +80,7 @@
     });
   }
 
-  .o-simple-chart_target {
+  .o-simple-chart__target {
     margin-top: unit(14 / @base-font-size-px, em);
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
@@ -214,7 +214,7 @@
       font-weight: 500;
     }
   }
-  .o-simple-chart_tilemap_legend {
+  .o-simple-chart_tilemap__legend {
     display: none;
     width: 100%;
     height: 60px;
diff --git a/cfgov/unprocessed/css/organisms/ask-search.less b/cfgov/unprocessed/css/organisms/ask-search.less
index db13bd939e3..b4db01712d8 100644
--- a/cfgov/unprocessed/css/organisms/ask-search.less
+++ b/cfgov/unprocessed/css/organisms/ask-search.less
@@ -4,7 +4,7 @@
    ========================================================================== */
 
 // TODO: Reconcile this with the input with button in the Design System.
-.o-form__input-w-btn_btn-container {
+.o-form--input-w-btn__btn-container {
   // Only attach the button to the input at tablet/desktop sizes.
   .respond-to-min(480px, {
     border-left: 0;
diff --git a/cfgov/unprocessed/css/organisms/filterable-list-controls.less b/cfgov/unprocessed/css/organisms/filterable-list-controls.less
index e0bdc424d3d..b6be86825e8 100644
--- a/cfgov/unprocessed/css/organisms/filterable-list-controls.less
+++ b/cfgov/unprocessed/css/organisms/filterable-list-controls.less
@@ -12,7 +12,7 @@
   // TODO: While this fixes the multiselect drop-down being cropped, it does
   //       change the UX. A method to support overflowing the expandable bounds
   //       while still retaining performance optimizations should be explored.
-  .o-multiselect_fieldset {
+  .o-multiselect__fieldset {
     position: static;
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/footer.less b/cfgov/unprocessed/css/organisms/footer.less
index 714aef4a190..7f347f65ddd 100644
--- a/cfgov/unprocessed/css/organisms/footer.less
+++ b/cfgov/unprocessed/css/organisms/footer.less
@@ -4,7 +4,7 @@
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
   padding-top: unit(50px / @base-font-size-px, em);
-  // There is a 10px margin-bottom on the  last .o-footer_list li's, plus the
+  // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
   padding-bottom: unit(50px / @base-font-size-px, em);
   border-top: 5px solid var(--green);
@@ -13,7 +13,7 @@
   &_nav-list {
     .m-list__links();
 
-    .m-list_link {
+    .m-list__link {
       font-size: unit(18px / @base-font-size-px, em);
       .u-link__colors( var(--black) );
 
@@ -31,7 +31,7 @@
       });
     }
 
-    .m-list_link.m-list_link__disabled {
+    .m-list__link.m-list__link__disabled {
       border-bottom: 1px dotted;
 
       // Desktop and above.
@@ -44,8 +44,8 @@
   &_list {
     .m-list__links();
 
-    .m-list_link {
-      .u-link__colors( var(--gray-dark) );
+    .m-list__link {
+      .u-link--colors( var(--gray-dark) );
     }
   }
 
@@ -53,7 +53,7 @@
     position: relative;
     margin-bottom: unit(45px / @base-font-size-px, em);
 
-    .o-footer_top-button {
+    .o-footer__top-button {
       display: block;
       width: 100%;
       text-align: center;
@@ -63,7 +63,7 @@
       margin: -2em auto 2em;
     }
 
-    .o-footer_nav-list {
+    .o-footer__nav-list {
       margin-bottom: 0;
     }
 
@@ -73,14 +73,14 @@
       margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
       border-bottom: 1px solid var(--gray-40);
 
-      .o-footer_top-button {
+      .o-footer__top-button {
         display: none;
       }
 
-      .o-footer_nav-list {
+      .o-footer__nav-list {
         .m-list__horizontal();
 
-        .m-list_item {
+        .m-list__item {
           margin-bottom: 0;
         }
       }
@@ -96,16 +96,16 @@
 
   // TODO: Refactor to use Design System Layout package.
   &-middle-left {
-    .o-footer_list {
+    .o-footer__list {
       margin: 0;
     }
 
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       // Fix doubled border in mobile view.
-      .o-footer_col:nth-child( n+2 ) {
-        .o-footer_list {
-          .m-list_item .m-list_link {
+      .o-footer__col:nth-child( n+2 ) {
+        .o-footer__list {
+          .m-list__item .m-list__link {
             border-top-width: 0;
           }
         }
@@ -118,7 +118,7 @@
       border-right: 1px solid var(--gray-40);
       border-left: 0;
 
-      .o-footer_col {
+      .o-footer__col {
         .grid_column(6);
         border-left: 0;
         border-right: 0;
@@ -138,8 +138,8 @@
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       // Fix doubled border in mobile view.
-      .o-footer_list {
-        .m-list_item .m-list_link {
+      .o-footer__list {
+        .m-list__item .m-list__link {
           border-top-width: 0;
         }
       }
@@ -149,7 +149,7 @@
     .respond-to-min(@bp-sm-min, {
       .grid_column(4);
 
-      .o-footer_list {
+      .o-footer__list {
         padding-left: @grid_gutter-width;
         padding-right: @grid_gutter-width;
       }
diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.less
index 0ed54e92da4..8cb28174716 100644
--- a/cfgov/unprocessed/css/organisms/header.less
+++ b/cfgov/unprocessed/css/organisms/header.less
@@ -117,7 +117,7 @@
 
 // Move logo on print.
 .respond-to-print( {
-  .o-header_logo {
+  .o-header__logo {
     // Mega menu is hidden, so we need to remove logo offset.
     margin-left: 15px !important;
   }
diff --git a/cfgov/unprocessed/css/organisms/info-unit-group.less b/cfgov/unprocessed/css/organisms/info-unit-group.less
index e635d509d75..130ea394cb1 100644
--- a/cfgov/unprocessed/css/organisms/info-unit-group.less
+++ b/cfgov/unprocessed/css/organisms/info-unit-group.less
@@ -1,4 +1,4 @@
-.u-grid_column__top-divider {
+.u-grid__column--top-divider {
   margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
   border-left-width: @grid_gutter-width / 2;
 
@@ -23,21 +23,21 @@
     margin-top: 0;
   }
 
-  .content-l_col-1 + .content-l_col-1 {
+  .content-l__col-1 + .content-l__col-1 {
     // Adds margin top to info units that follow another
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em) !important;
   }
 
   .content-l__top-divider {
-    .content-l_col-1 + .content-l_col-1 {
+    .content-l__col-1 + .content-l__col-1 {
       // Adds top divider between single-column info units
-      .u-grid_column__top-divider();
+      .u-grid__column--top-divider();
     }
   }
 
   .content-l__top-divider + .content-l__top-divider {
     // Adds top divider between multi-column info unit rows
-    .u-grid_column__top-divider();
+    .u-grid__column--top-divider();
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
   }
 
@@ -45,8 +45,8 @@
   .respond-to-max(@bp-xs-max, {
     // Adds top divider between info unit cols on small screens
     .content-l__top-divider {
-      .content-l_col + .content-l_col {
-        .u-grid_column__top-divider();
+      .content-l__col + .content-l__col {
+        .u-grid__column--top-divider();
         margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
       }
     }
@@ -57,15 +57,15 @@
     .content-l__top-divider + .content-l__top-divider {
       // Matches top divider width to cols on larger screens
       &:before {
-        // Overrides .u-grid_column__top-divider() margin-left !important rule
+        // Overrides .u-grid__column--top-divider() margin-left !important rule
         margin-left: 15px !important;
         margin-right: 15px;
         width: auto;
       }
     }
-    .content-l_col-1:nth-of-type( n+2 ),
-    .content-l_col-1-2:nth-of-type( n+3 ),
-    .content-l_col-1-3:nth-of-type( n+4 ) {
+    .content-l__col-1:nth-of-type( n+2 ),
+    .content-l__col-1-2:nth-of-type( n+3 ),
+    .content-l__col-1-3:nth-of-type( n+4 ) {
       // Adds margin-top to info units that begin a new row in their group
       margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
     }
diff --git a/cfgov/unprocessed/css/organisms/mega-menu.less b/cfgov/unprocessed/css/organisms/mega-menu.less
index 40db09e69de..061e5f4b41e 100644
--- a/cfgov/unprocessed/css/organisms/mega-menu.less
+++ b/cfgov/unprocessed/css/organisms/mega-menu.less
@@ -2,7 +2,7 @@
 @import (less)
   '@cfpb/cfpb-atomic-component/src/utilities/transition/transition.less';
 
-// Each content level adds a depth-specific class, such as o-mega-menu_content-1, o-mega-menu_content-2, etc.
+// Each content level adds a depth-specific class, such as o-mega-menu__content-1, o-mega-menu__content-2, etc.
 
 @mobile_trigger_ht__px: 54px;
 
@@ -252,7 +252,7 @@ body {
       align-items: baseline;
 
       // Hide link bottom line from Design System link styles.
-      & .a-link_text {
+      & .a-link__text {
         border-bottom-width: 0;
       }
 
@@ -335,11 +335,11 @@ body {
         outline: 1px dotted var(--black);
       }
 
-      .o-mega-menu_trigger-close {
+      .o-mega-menu__trigger-close {
         display: none;
       }
 
-      .o-mega-menu_trigger-open {
+      .o-mega-menu__trigger-open {
         display: block;
       }
 
@@ -349,11 +349,11 @@ body {
         border-right: 1px solid var(--gray-40);
         color: var(--black);
 
-        .o-mega-menu_trigger-close {
+        .o-mega-menu__trigger-close {
           display: block;
         }
 
-        .o-mega-menu_trigger-open {
+        .o-mega-menu__trigger-open {
           display: none;
         }
       }
@@ -509,7 +509,7 @@ body {
       //       Investigate if it can be combined.
       // Remove final border line of last list item.
       &-list-group:last-child {
-        .o-mega-menu_content-3-item:last-child {
+        .o-mega-menu__content-3-item:last-child {
           border-bottom: none;
         }
       }
@@ -579,7 +579,7 @@ body {
     // 1st-level menu - Desktop.
     &_content-1 {
       &[data-open="true"] {
-        .o-mega-menu_content-1-wrapper {
+        .o-mega-menu__content-1-wrapper {
           display: block;
           transform: translateY( 0 );
         }
@@ -603,7 +603,7 @@ body {
         display: table-cell;
 
         .no-js &:hover {
-          .o-mega-menu_content-2 {
+          .o-mega-menu__content-2 {
             display: block;
           }
         }
@@ -767,7 +767,7 @@ body {
       &[data-open="true"] {
         overflow: visible;
 
-        .o-mega-menu_content-2-wrapper {
+        .o-mega-menu__content-2-wrapper {
           display: block;
         }
       }
@@ -957,7 +957,7 @@ body {
   }
 
   // Hide the ">" arrow icon (used on mobile view).
-  .o-mega-menu_content-link-icon-post {
+  .o-mega-menu__content-link-icon-post {
     display: none !important;
   }
 }
@@ -970,16 +970,16 @@ body {
 });
 
 // The following three rules prevent mega-menu linebreak shenanigans
-.o-mega-menu_content-2-item__has-icon .o-mega-menu_content-2-link {
+.o-mega-menu__content-2-item__has-icon .o-mega-menu__content-2-link {
   padding-right: 0;
 }
 
-.o-mega-menu_content-2-item__has-icon {
+.o-mega-menu__content-2-item__has-icon {
   .cf-icon-svg:nth-child(3) {
     margin-left: -20px;
     transform: translateX(25px);
   }
-  .a-link_text:nth-last-child(2) {
+  .a-link__text:nth-last-child(2) {
     display: inline-block;
     margin-left: -5px;
     transform: translateX(5px);
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less
index 8db65215097..47aca9326b3 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.less
@@ -15,23 +15,23 @@
       outline-offset: 1px;
     }
 
-    .o-secondary-nav_cue-close,
-    .o-secondary-nav_cue-open {
+    .o-secondary-nav__cue-close,
+    .o-secondary-nav__cue-open {
       display: none;
     }
 
-    &[aria-expanded='false'] .o-secondary-nav_cue-open {
+    &[aria-expanded='false'] .o-secondary-nav__cue-open {
       display: block;
     }
 
-    &[aria-expanded='true'] .o-secondary-nav_cue-close {
+    &[aria-expanded='true'] .o-secondary-nav__cue-close {
       display: block;
     }
   }
 
-  // Using the button element with .o-secondary-nav_header requires setting
+  // Using the button element with .o-secondary-nav__header requires setting
   // an explicit width.
-  button.o-secondary-nav_header {
+  button.o-secondary-nav__header {
     background-color: transparent;
     width: 100%;
     text-align: left;
@@ -184,7 +184,7 @@
 // Right-to-left (RTL) layout.
 html[lang='ar'] {
   .o-secondary-nav {
-    button.o-secondary-nav_header {
+    button.o-secondary-nav__header {
       text-align: right;
     }
 
diff --git a/cfgov/unprocessed/css/organisms/sidebar-breakout.less b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
index 639a0355528..725b66f393d 100644
--- a/cfgov/unprocessed/css/organisms/sidebar-breakout.less
+++ b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
@@ -1,6 +1,6 @@
 @margin__em: unit(@grid_gutter-width / @base-font-size-px, em);
-@o-sidebar-breakout_img-width: 300px;
-@o-sidebar-breakout_img-height: 170px;
+@o-sidebar-breakout__img-width: 300px;
+@o-sidebar-breakout__img-height: 170px;
 
 .o-sidebar-breakout {
   &_img {
@@ -12,17 +12,17 @@
   }
 
   &_img-container {
-    max-width: @o-sidebar-breakout_img-width;
-    max-height: @o-sidebar-breakout_img-height;
+    max-width: @o-sidebar-breakout__img-width;
+    max-height: @o-sidebar-breakout__img-height;
   }
 
   &_img-container__round {
     width: auto;
 
-    .o-sidebar-breakout_img {
+    .o-sidebar-breakout__img {
       padding: 0;
-      height: @o-sidebar-breakout_img-height;
-      width: @o-sidebar-breakout_img-height;
+      height: @o-sidebar-breakout__img-height;
+      width: @o-sidebar-breakout__img-height;
     }
   }
 
@@ -58,7 +58,7 @@
 
 // Desktop and above.
 .respond-to-min(@bp-med-min, {
-  .o-sidebar-breakout_col:last-child {
+  .o-sidebar-breakout__col:last-child {
     padding-left: @margin__em;
   }
 });
@@ -68,7 +68,7 @@
   .o-sidebar-breakout {
     &_img-container {
       float: left;
-      width: @o-sidebar-breakout_img-width / @bp-sm-max * 100%;
+      width: @o-sidebar-breakout__img-width / @bp-sm-max * 100%;
       margin-right: @margin__em;
     }
 
diff --git a/cfgov/unprocessed/css/organisms/video-player.less b/cfgov/unprocessed/css/organisms/video-player.less
index b0b6a12ea53..b43e9e055a0 100644
--- a/cfgov/unprocessed/css/organisms/video-player.less
+++ b/cfgov/unprocessed/css/organisms/video-player.less
@@ -12,7 +12,7 @@
   background: var(--white);
 
   // When JavaScript is disabled add a border to stand-alone videos.
-  .no-js &:not(.o-featured-content-module_visual) {
+  .no-js &:not(.o-featured-content-module__visual) {
     border: 1px solid var(--gray-40);
   }
 
@@ -44,7 +44,7 @@
 
 // Video image related styles
 
-.o-video-player_image-container {
+.o-video-player__image-container {
   position: relative;
   background-color: #fff;
   text-align: center;
@@ -71,7 +71,7 @@
   }
 }
 
-.o-video-player_image {
+.o-video-player__image {
   // Remove space below image created by inline display spacing.
   display: block;
   opacity: 0;
@@ -86,7 +86,7 @@
     box-sizing: border-box;
 
     // Overrides values set in featured-content-module.less file in the DS.
-    &.o-featured-content-module_img {
+    &.o-featured-content-module__img {
       max-width: 100%;
       height: auto;
       padding: unit(15px / @base-font-size-px, em);
@@ -102,7 +102,7 @@
   }
 }
 
-.o-video-player_duration {
+.o-video-player__duration {
   color: var(--white);
   background: rgba(0, 0, 0, 40%);
   z-index: 1;
@@ -116,7 +116,7 @@
   bottom: 0;
 }
 
-.o-video-player_play-btn {
+.o-video-player__play-btn {
   box-sizing: border-box;
   width: @play-btn-size__px;
   height: @play-btn-size__px;
@@ -198,16 +198,16 @@
   }
 }
 
-button.o-video-player_play-btn,
-.o-video-player__loaded a.o-video-player_play-btn {
+button.o-video-player__play-btn,
+.o-video-player__loaded a.o-video-player__play-btn {
   display: none;
 }
 
-.o-video-player__loaded button.o-video-player_play-btn {
+.o-video-player__loaded button.o-video-player__play-btn {
   display: block;
 }
 
-.o-video-player_video-container {
+.o-video-player__video-container {
   opacity: 0;
   height: 0;
   margin: auto;
@@ -215,7 +215,7 @@ button.o-video-player_play-btn,
   background-color: #000;
 }
 
-.o-video-player_video-actions-container {
+.o-video-player__video-actions-container {
   right: 0;
   left: auto;
 
@@ -225,7 +225,7 @@ button.o-video-player_play-btn,
   padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   color: var(--white);
 
-  .m-social-media_heading {
+  .m-social-media__heading {
     margin-top: 0;
     margin-right: 0;
     padding: 0;
@@ -236,13 +236,13 @@ button.o-video-player_play-btn,
 
 // Tablet and above.
 .respond-to-min(@bp-sm-min, {
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     position: absolute;
     top: 0;
   }
 });
 
-.o-video-player_iframe-mixin() {
+.o-video-player__iframe-mixin() {
   position: absolute;
   top: 0;
   left: 0;
@@ -250,17 +250,17 @@ button.o-video-player_play-btn,
   height: 100%;
 }
 
-.o-video-player_video-container__flexible {
-  .o-video-player_iframe-container {
+.o-video-player__video-container__flexible {
+  .o-video-player__iframe-container {
     width: auto;
     .u-flexible-container-mixin();
   }
 
-  .o-video-player_iframe {
-    .o-video-player_iframe-mixin();
+  .o-video-player__iframe {
+    .o-video-player__iframe-mixin();
   }
 
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     position: relative;
     top: 0;
     left: 0;
@@ -274,7 +274,7 @@ button.o-video-player_play-btn,
   }
 
   .m-social-media,
-  .o-video-player_video-actions {
+  .o-video-player__video-actions {
     margin-bottom: 0;
     .grid_column(6);
 
@@ -290,7 +290,7 @@ button.o-video-player_play-btn,
     fill: var(--white);
   }
 
-  .m-social-media_icons {
+  .m-social-media__icons {
     display: block;
     margin-right: 0;
     margin-top: unit(10px / @base-font-size-px, rem);
@@ -298,7 +298,7 @@ button.o-video-player_play-btn,
 }
 
 .o-video-player .m-social-media,
-.o-video-player_video-actions {
+.o-video-player__video-actions {
   // Mobile only.
   .respond-to-max(@bp-xs-max, {
     margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
@@ -307,25 +307,25 @@ button.o-video-player_play-btn,
 
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
-  .o-video-player_iframe-container {
+  .o-video-player__iframe-container {
     .u-flexible-container-mixin();
   }
 
-  .o-video-player_iframe {
-    .o-video-player_iframe-mixin();
+  .o-video-player__iframe {
+    .o-video-player__iframe-mixin();
   }
 });
 
 // Special styles for playing within a Featured Content Module (FCM).
 .o-featured-content-module {
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     margin: 0;
     padding: 0;
     // Magic number: height of standard button and 1px border around FCM.
     top: (@standard-btn-height__px + 1px) * -1;
   }
 
-  .o-video-player_close-btn {
+  .o-video-player__close-btn {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     display: block;
@@ -336,7 +336,7 @@ button.o-video-player_play-btn,
 
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
-  .o-featured-content-module .o-video-player_video-actions-container {
+  .o-featured-content-module .o-video-player__video-actions-container {
     display: none;
   }
 });
@@ -348,26 +348,26 @@ button.o-video-player_play-btn,
     transition: 0.5s all ease-out;
     min-height: 0;
 
-    .o-video-player_close-btn {
+    .o-video-player__close-btn {
       // Moves button up into the masked window when playing.
       margin-top: 0;
     }
   }
 
-  .o-featured-content-module_visual .o-video-player_iframe {
+  .o-featured-content-module__visual .o-video-player__iframe {
     opacity: 0;
     transition-delay: 0.5s;
     transition-duration: 0s;
     transition-property: opacity;
   }
 
-  .o-featured-content-module_visual.video-playing {
+  .o-featured-content-module__visual.video-playing {
     // Position the element to the right for the start of the transition.
     right: 0;
     width: 100%;
     transition: 0.5s all ease-out;
 
-    .o-video-player_iframe {
+    .o-video-player__iframe {
       height: 100%;
       width: 100%;
       opacity: 1;
diff --git a/cfgov/unprocessed/css/print.less b/cfgov/unprocessed/css/print.less
index 2b20cee2829..b23f7984384 100644
--- a/cfgov/unprocessed/css/print.less
+++ b/cfgov/unprocessed/css/print.less
@@ -30,9 +30,9 @@
     content: " (" attr(data-pretty-href) ")";
   }
 
-  a.o-header_logo-img:after,
-  a.m-info-unit_heading-link:after,
-  .m-info-unit_content h4 a:after {
+  a.o-header__logo-img:after,
+  a.m-info-unit__heading-link:after,
+  .m-info-unit__content h4 a:after {
     // Do not append hrefs to the logo or info unit headings.
     content: none;
   }
@@ -58,7 +58,7 @@
   }
 
   a.a-link__jump,
-  a.m-list_link {
+  a.m-list__link {
     // These pseudo-classes are needed to guarantee specificity
     &:link,
     &:visited {
@@ -70,38 +70,38 @@
     }
   }
 
-  .m-list__links .m-list_item {
+  .m-list__links .m-list__item {
     // Space out stand-alone links by .5em
     margin-bottom: unit( 8px / @base-font-size-px, em );
   }
 
   .o-info-unit-group {
-    .content-l_col-1-2,
-    .content-l_col-1-3,
-    .content-l_col-2-3 {
+    .content-l__col-1-2,
+    .content-l__col-1-3,
+    .content-l__col-2-3 {
       // Ensure content remains vertically aligned by rendering them as a table cell
       display: table-cell !important;
     }
-    .content-l_col-1 {
+    .content-l__col-1 {
       .grid_column( 12 );
     }
-    .content-l_col-1-2 {
+    .content-l__col-1-2 {
       // Keep 50/50 info unit groups at two columns for print
       .grid_column( 6 );
     }
-    .content-l_col-1-3 {
+    .content-l__col-1-3 {
       // Keep 33/33/33 info unit groups at three columns for print
       .grid_column( 4 );
     }
-    .content-l_col-2-3 {
+    .content-l__col-2-3 {
       // Maintain 2/3 layouts for print
       .grid_column( 8 );
     }
-    .m-info-unit_image {
+    .m-info-unit__image {
       // Print info unit images
       display: block;
     }
-    .m-info-unit__inline .m-info-unit_image {
+    .m-info-unit__inline .m-info-unit__image {
       // Preserve inline info unit image layout
       float: left;
       margin-right: unit( @grid_gutter-width / @base-font-size-px, em );
@@ -147,7 +147,7 @@
     }
   }
 
-  .o-video-player_play-btn {
+  .o-video-player__play-btn {
     // !important used here to avoid being overridden by a much more specific
     // selector that sets the display property for this element
     // and to avoid using a selector that specific here.
@@ -176,7 +176,7 @@
   .o-email-signup,
   .rss-subscribe,
   .o-search-bar,
-  .m-hero_image-wrapper {
+  .m-hero__image-wrapper {
     // Hide unimportant print things
     display: none;
   }
@@ -189,8 +189,8 @@
   // Cap content line lengths at ~ 75 characters. `ch` equals the width of the
   // 0 glyph in the font, which is wider than some others (i, f, t, etc.),
   // so setting it to 62 gives us approximately 75 characters per line.
-  .content_main,
-  .content_intro {
+  .content__main,
+  .content__intro {
     dd,
     dt,
     li,
@@ -208,24 +208,24 @@
       padding: 0;
     }
 
-    .content_main {
+    .content__main {
       margin: 0;
       display: block !important;
     }
 
-    .content_sidebar {
+    .content__sidebar {
       display: block !important;
     }
   }
 
   // Prevent Chrome from adding in a blank first page
   @media (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
-    .content_main {
+    .content__main {
       margin: 0;
       display: block !important;
     }
 
-    .content_sidebar {
+    .content__sidebar {
       display: block !important;
     }
   }
diff --git a/cfgov/unprocessed/css/schema.less b/cfgov/unprocessed/css/schema.less
index 0376188bc06..63da878d520 100644
--- a/cfgov/unprocessed/css/schema.less
+++ b/cfgov/unprocessed/css/schema.less
@@ -2,12 +2,12 @@
   margin-top: unit(@grid_gutter-width / @size-ii, em);
 }
 
-.schema-block__how-to li,
-.schema-block__how-to > div p:first-child {
+.schema-block--how-to li,
+.schema-block--how-to > div p:first-child {
   margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
 }
 
-.schema-block__how-to {
+.schema-block--how-to {
   h2,
   h3,
   h4 {
diff --git a/cfgov/unprocessed/css/skip-nav.less b/cfgov/unprocessed/css/skip-nav.less
index 008c7344b0e..603001e4bd7 100644
--- a/cfgov/unprocessed/css/skip-nav.less
+++ b/cfgov/unprocessed/css/skip-nav.less
@@ -1,7 +1,7 @@
 .skip-nav {
   position: relative;
 
-  &_link {
+  &__link {
     position: absolute;
     top: auto;
     left: -10000px;
@@ -31,7 +31,7 @@
         background 0.2s linear;
     }
 
-    &__flush-left:focus {
+    &--flush-left:focus {
       left: 0;
     }
   }
diff --git a/cfgov/unprocessed/js/molecules/Autocomplete.js b/cfgov/unprocessed/js/molecules/Autocomplete.js
index 653934d9c92..8fa4f5f8b16 100644
--- a/cfgov/unprocessed/js/molecules/Autocomplete.js
+++ b/cfgov/unprocessed/js/molecules/Autocomplete.js
@@ -8,8 +8,8 @@ import throttle from 'lodash.throttle';
 // Class constants
 const BASE_CLASS = 'm-autocomplete';
 const HIDDEN_CLASS = 'u-hidden';
-const AUTOCOMPLETE_CLASS = 'm-autocomplete_results';
-const SELECTED_CLASS = 'm-autocomplete_selected';
+const AUTOCOMPLETE_CLASS = 'm-autocomplete__results';
+const SELECTED_CLASS = 'm-autocomplete__selected';
 const ERROR_CLASS = 'a-text-input__error';
 
 // Key constants
diff --git a/cfgov/unprocessed/js/molecules/GlobalSearch.js b/cfgov/unprocessed/js/molecules/GlobalSearch.js
index 715003aea49..a35fd71771c 100644
--- a/cfgov/unprocessed/js/molecules/GlobalSearch.js
+++ b/cfgov/unprocessed/js/molecules/GlobalSearch.js
@@ -55,7 +55,7 @@ function GlobalSearch(element) {
     _contentDom.classList.remove('u-hidden');
 
     const inputContainsLabelSel = `.${BASE_CLASS}_content-form .input-contains-label`;
-    const searchBtnSel = `.${BASE_CLASS} .o-form__input-w-btn_btn-container button`;
+    const searchBtnSel = `.${BASE_CLASS} .o-form--input-w-btn__btn-container button`;
 
     const inputContainsLabel = _contentDom.querySelector(inputContainsLabelSel);
     _searchInputDom = inputContainsLabel.querySelector('input');
diff --git a/cfgov/unprocessed/js/molecules/Notification.js b/cfgov/unprocessed/js/molecules/Notification.js
index 9c051680ea8..d25c6281542 100644
--- a/cfgov/unprocessed/js/molecules/Notification.js
+++ b/cfgov/unprocessed/js/molecules/Notification.js
@@ -76,12 +76,12 @@ function Notification(element) {
    */
   function _setContent(messageText, explanationText) {
     let content = `
-      <div class="m-notification_message">
+      <div class="m-notification__message">
         ${messageText}
       </div>`;
     if (typeof explanationText !== 'undefined') {
       content += `
-        <p class="m-notification_explanation">
+        <p class="m-notification__explanation">
           ${explanationText}
         </p>`;
     }
diff --git a/cfgov/unprocessed/js/organisms/MegaMenuMobile.js b/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
index 4919f98544e..5988fac326b 100644
--- a/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
+++ b/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
@@ -49,7 +49,7 @@ function MegaMenuMobile(menus) {
 
     // Make root level links disabled to tab and voiceover navigation on init.
     _rootLinksDom = _rootMenuContentDom.querySelectorAll(
-      'a.o-mega-menu_content-1-link,.m-global-eyebrow a',
+      'a.o-mega-menu__content-1-link,.m-global-eyebrow a',
     );
 
     return this;
@@ -135,7 +135,7 @@ function MegaMenuMobile(menus) {
 
       // Back button on the 2nd level menu clicked.
       if (
-        event.trigger.classList.contains('o-mega-menu_content-2-alt-trigger')
+        event.trigger.classList.contains('o-mega-menu__content-2-alt-trigger')
       ) {
         _enableRootMenuContent();
         _activeMenu = _rootMenu;
diff --git a/cfgov/v1/atomic_elements/molecules.py b/cfgov/v1/atomic_elements/molecules.py
index 9e3e0257320..2c2ab4ff01e 100644
--- a/cfgov/v1/atomic_elements/molecules.py
+++ b/cfgov/v1/atomic_elements/molecules.py
@@ -66,7 +66,7 @@ def clean(self, value):
     class Meta:
         icon = "title"
         template = "v1/includes/molecules/text-introduction.html"
-        classname = "block__flush-top"
+        classname = "block--flush-top"
 
 
 class AbstractHero(blocks.StructBlock):
@@ -137,7 +137,7 @@ class AbstractHero(blocks.StructBlock):
 
     class Meta:
         template = "v1/includes/molecules/hero.html"
-        classname = "block__flush-top block__flush-bottom"
+        classname = "block--flush-top block--flush-bottom"
         icon = "image"
 
 
diff --git a/cfgov/v1/atomic_elements/organisms.py b/cfgov/v1/atomic_elements/organisms.py
index 722db91c9d4..702a5f67eb2 100644
--- a/cfgov/v1/atomic_elements/organisms.py
+++ b/cfgov/v1/atomic_elements/organisms.py
@@ -660,7 +660,7 @@ class ItemIntroduction(blocks.StructBlock):
     class Meta:
         icon = "form"
         template = "v1/includes/organisms/item-introduction.html"
-        classname = "block__flush-top"
+        classname = "block--flush-top"
 
 
 class FilterableList(BaseExpandable):
@@ -877,7 +877,7 @@ class Meta:
         template = "v1/includes/organisms/featured-content.html"
         icon = "doc-full-inverse"
         label = "Featured Content"
-        classname = "block__flush"
+        classname = "block--flush"
         value_class = FeaturedContentStructValue
 
     class Media:
diff --git a/cfgov/v1/jinja2/v1/events/_macros.html b/cfgov/v1/jinja2/v1/events/_macros.html
index 331fdafabe9..10ef9458868 100644
--- a/cfgov/v1/jinja2/v1/events/_macros.html
+++ b/cfgov/v1/jinja2/v1/events/_macros.html
@@ -98,13 +98,13 @@ <h2 class="event-venue_heading">
                 </h2>
             </header>
             <div class="content-l">
-                <div class="event-meta content-l_col content-l_col-1-2">
+                <div class="event-meta content-l__col content-l__col-1-2">
                     {{ event_meta_address(event,
                         address_format ='{venue} {street} {suite}
                         {city}' ~ state_prefix ~ '{state} {zip}'
                     ) }}
                 </div>
-                <div class="content-l_col content-l_col-1-2 event-calendar_container">
+                <div class="content-l__col content-l__col-1-2 event-calendar_container">
                 {% if event_state == 'past' and event.live_stream_availability and not event.archive_video_id %}
                     Video replay will be<br> available shortly
                 {% else %}
@@ -139,13 +139,13 @@ <h2 class="event-venue_heading">
                     {% elif event.post_event_image_type == 'image' %}
                         {# DISPLAY SPECIFICALLY-CHOSEN POST-EVENT IMAGE #}
                         {% set img = image(event.post_event_image, 'width-1416') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ img.url }}"
                              alt="{{ image_alt_value(img) }}">
                     {% else %}
                         {# DISPLAY PLACEHOLDER POST-EVENT IMAGE #}
                         {% set img = image(event.post_event_image, 'width-1416') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ static('img/cfpb_video_cover_card_1380x776.png') }}"
                              alt="">
                     {% endif %}
@@ -156,7 +156,7 @@ <h2 class="event-venue_heading">
                 {% elif event.venue_image_type == 'image' %}
                     {# DISPLAY SPECIFICALLY-CHOSEN VENUE IMAGE #}
                     {% set img = image(event.venue_image, 'width-1416') %}
-                    <img class="o-post-preview_image"
+                    <img class="o-post-preview__image"
                          src="{{ img.url }}"
                          alt="{{ image_alt_value(img) }}">
                 {% endif %}
@@ -183,15 +183,15 @@ <h2 class="event-venue_heading">
 
 {% macro event_agenda(event) %}
   <div class="block
-              block__padded-top
-              block__border-top">
+              block--padded-top
+              block--border-top">
     <h2>Agenda</h2>
     <table class="o-table
                   event-agenda_table
                   o-table__stack-on-small
                   u-w100pct
                   block
-                  block__flush-top">
+                  block--flush-top">
         <thead>
             <tr>
                 <th>Time</th>
diff --git a/cfgov/v1/jinja2/v1/home_page/home_page.html b/cfgov/v1/jinja2/v1/home_page/home_page.html
index 7adb5c8dcb1..e6a04bd0cf5 100644
--- a/cfgov/v1/jinja2/v1/home_page/home_page.html
+++ b/cfgov/v1/jinja2/v1/home_page/home_page.html
@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_main_modifiers -%}
-content_main__flush-inner
+content__main__flush-inner
 {%- endblock %}
 
 {% block content_intro %}
@@ -29,18 +29,18 @@
             <div class="o-info-unit-group">
                 <div class="content-l">
                     {% for highlight in hardcoded.highlights %}
-                    <div class="content-l_col content-l_col-1-3">
+                    <div class="content-l__col content-l__col-1-3">
                         <div class="m-info-unit">
                             <div style="padding-bottom:.25em;">
                                 <img style="max-height:2.5em;" src="{{ highlight.img_src }}" alt="" width="60" height="40">
                             </div>
-                            <div class="m-info-unit_heading-text">
+                            <div class="m-info-unit__heading-text">
                                 <h2 class="h3">{{ highlight.heading }}</h2>
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <ul class="m-list m-list__links u-mt15">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link"
+                                    <li class="m-list__item">
+                                        <a class="m-list__link"
                                             href="{{ highlight.link_url }}">
                                             {{- highlight.link_text -}}
                                         </a>
@@ -66,16 +66,16 @@ <h2 class="h1">{{ hardcoded.answers_heading }}</h2>
     <section class="block">
         <div class="o-well u-text-centered">
             <div class="o-card-group o-card-group__flow">
-                <div class="o-card-group_cards">
+                <div class="o-card-group__cards">
                     {% for card in hardcoded.topics.cards %}
                     <article class="m-card m-card__topic
                         {%- if loop.last %}  m-card__topic-action{% endif -%}
                     ">
                       <a href="{{ card.url }}">
-                          <div class="m-card_icon">
+                          <div class="m-card__icon">
                               {{ svg_icon( card.icon ) }}
                           </div>
-                          <div class="m-card_footer">
+                          <div class="m-card__footer">
                               <span>{{ card.text }}</span>
                           </div>
                       </a>
@@ -90,12 +90,12 @@ <h2 class="h1">{{ hardcoded.answers_heading }}</h2>
         <section class="block">
             <div class="o-info-unit-group">
                 <div class="content-l">
-                    <div class="content-l_col content-l_col-1-2">
+                    <div class="content-l__col content-l__col-1-2">
                         <div class="m-info-unit">
-                                <div class="m-info-unit_heading-text">
+                                <div class="m-info-unit__heading-text">
                                     <h2>The CFPB is standing up for you</h2>
                                 </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <ul>
                                   <li><strong>4 million+</strong> consumer complaints received responses</li>
                                   <li><strong>$20.2 billion+</strong> in financial relief as a result of CFPB actions</li>
@@ -104,18 +104,18 @@ <h2>The CFPB is standing up for you</h2>
                            </div>
                         </div>
                     </div>
-                    <div class="content-l_col content-l_col-1-2">
+                    <div class="content-l__col content-l__col-1-2">
                         <div class="m-info-unit">
-                            <a class="m-info-unit_heading-link" href="/rules-policy/junk-fees/">
-                                <div class="m-info-unit_heading-text">
+                            <a class="m-info-unit__heading-link" href="/rules-policy/junk-fees/">
+                                <div class="m-info-unit__heading-text">
                                     <h2>Protecting you from junk fees</h2>
                                 </div>
                             </a>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <p>The CFPB is working to save households billions of dollars a year by reducing exploitative junk fees charged by banks and financial companies.</p>
                                 <ul class="m-list m-list__links u-mt15">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/rules-policy/junk-fees/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/rules-policy/junk-fees/">
                                            Read about junk fees
                                         </a>
                                 </ul>
@@ -139,4 +139,4 @@ <h2>Protecting you from junk fees</h2>
         </section>
 
     </section>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html b/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
index 22937084c79..8db916b1560 100644
--- a/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
+++ b/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
@@ -55,4 +55,4 @@
             'cards': hardcoded.cards
         } ) }}
     </section>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
index 8c97fb5078e..3b450392fbf 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
@@ -20,7 +20,7 @@
 <a class="a-link a-link__jump"
    href="{{ value.url }}"
    {% if value.aria_label %}aria-label="{{ value.aria_label }}"{% endif %}>
-    <span class="a-link_text">
+    <span class="a-link__text">
         {{ value.text }}
     </span>
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
index cd7fe329f4a..afafe0a368e 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
@@ -17,7 +17,7 @@
 <div class="a-tagline{{ ' a-tagline__large' if is_large else '' }}"
      aria-label="{{ _('Official website of the') }} {{ _('United States government') }}">
    <span class="u-usa-flag"></span>
-   <div class="a-tagline_text">
+   <div class="a-tagline__text">
       {{ _('An official website of the') }}
       <span class="u-nowrap">{{ _('United States government') }}</span>
    </div>
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
index 30a668e4175..c44b5c6c59e 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
@@ -31,7 +31,7 @@
 <div class="o-email-signup">
 {% if value.heading %}
     <header class="{{ 'm-slug-header' if value.default_heading else '' }}">
-        <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
+        <h2 class="{{ 'm-slug-header__heading' if value.default_heading else 'h3' }} ">
             {{ _(value.heading) }}
         </h2>
     </header>
@@ -44,7 +44,7 @@ <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
 
 {# TODO: DRY this up so we don't repeat the m-btn-group and privacy link #}
 {% if value.url is not none %}
-    <div class="o-email-signup_buttons">
+    <div class="o-email-signup__buttons">
         <a class="a-btn"
            href="{{ value.url }}"
            target="_blank"
@@ -73,7 +73,7 @@ <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
                    required>
         </div>
 
-        <div class="o-email-signup_buttons">
+        <div class="o-email-signup__buttons">
             <button class="a-btn">{{ _('Sign up') }}</button>
             <a class="a-btn a-btn__link a-btn__secondary"
                href="{{ pageurl(value.disclaimer_page) if value.disclaimer_page else disclaimer_url }}"
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/schema/faq-group.html b/cfgov/v1/jinja2/v1/includes/blocks/schema/faq-group.html
index eac7c601bfe..2311dc60a5c 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/schema/faq-group.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/schema/faq-group.html
@@ -39,8 +39,8 @@
          itemprop="mainEntity"
          itemtype="https://schema.org/Question"
          class="block
-               {{ 'block__flush-top' if loop.index == 1 else '' }}
-               {{ 'block__padded-top block__border-top'
+               {{ 'block--flush-top' if loop.index == 1 else '' }}
+               {{ 'block--padded-top block--border-top'
                if value.lines_between_items and loop.index > 1 else '' }}"
         {% if item.anchor_tag %}id="{{ item.anchor_tag }}"{% endif %}>
         <{{ value.question_tag }} itemprop="name">
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/schema/faq.html b/cfgov/v1/jinja2/v1/includes/blocks/schema/faq.html
index 39795935c3a..e831c728029 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/schema/faq.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/schema/faq.html
@@ -26,7 +26,7 @@
 
 <div itemscope=""
      itemtype="https://schema.org/FAQPage"
-     class="schema-block schema-block__faq">
+     class="schema-block schema-block--faq">
     {% if value.description %}
   	<div itemprop="description" class="schema-block_description">
   		  {{ value.description | richtext }}
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/schema/how-to.html b/cfgov/v1/jinja2/v1/includes/blocks/schema/how-to.html
index 8c3cc4246c9..80cd0732bf7 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/schema/how-to.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/schema/how-to.html
@@ -43,7 +43,7 @@
 
 <div itemscope
      itemtype="https://schema.org/HowTo"
-     class="schema-block schema-block__how-to">
+     class="schema-block schema-block--how-to">
     {%- if value.title %}
         <{{ value.title_tag }} itemprop="name"
                                id="{{ value.title | slugify_unique }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html b/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
index 3de502ad46b..2433f46d0f0 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
@@ -26,14 +26,14 @@
 <div class="m-call-to-action">
     {% if value.slug_text %}
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.slug_text }}
         </h2>
     </header>
     {% endif %}
 
     {% if value.paragraph_text %}
-    <div class="m-call-to-action_text">
+    <div class="m-call-to-action__text">
         {{ value.paragraph_text | safe }}
     </div>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/card.html b/cfgov/v1/jinja2/v1/includes/molecules/card.html
index f76d2e819d9..7cf96f0b6f1 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/card.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/card.html
@@ -36,9 +36,9 @@
                 {% if value.card_type  == 'featured' %} m-card__featured {% endif %}">
     <a href="{{ value.link_url }}">
         {% if value.heading or value.icon %}
-        <h3 class="{% if value.card_type != 'highlight' %}m-card_heading{% endif %}{% if value.card_type == 'featured' %} h2{% endif %}">
+        <h3 class="{% if value.card_type != 'highlight' %}m-card__heading{% endif %}{% if value.card_type == 'featured' %} h2{% endif %}">
             {% if value.icon -%}
-                <span class="m-card_icon">{{ svg_icon( value.icon ) }}</span>
+                <span class="m-card__icon">{{ svg_icon( value.icon ) }}</span>
             {%- endif %}
             {% if value.heading -%}
                 {{ value.heading }}
@@ -53,16 +53,16 @@ <h3 class="{% if value.card_type != 'highlight' %}m-card_heading{% endif %}{% if
         {% endif %}
 
         {% if value.card_type  == 'breakout' %}
-        <img class="m-card_img"
+        <img class="m-card__img"
              loading="lazy"
              src="{{ value.img_src }}"
              alt="">
         {% endif %}
 
         {% if value.card_type  == 'breakout' %}
-        <div class="m-card_inner-wrapper">
+        <div class="m-card__inner-wrapper">
         {% endif %}
-            <div class="m-card_footer">
+            <div class="m-card__footer">
                 <span>{{ value.link_text }}</span>
             </div>
         {% if value.card_type  == 'breakout' %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
index 6bab3032356..b7da3e3e2b3 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
@@ -38,12 +38,12 @@
 {%- if value.image_width == 'full' -%}
 
 <figure class="m-full-width-media
-               {{- ' m-full-width-media__bottom-rule' if value.is_bottom_rule else '' }}">
-    <img class="m-full-width-media_image"
+               {{- ' m-full-width-media--bottom-rule' if value.is_bottom_rule else '' }}">
+    <img class="m-full-width-media__image"
          src="{{ image_inset.url }}"
          alt="{{ image_alt_value(value.image) }}">
 {%- if value.text %}
-    <figcaption class="m-full-width-media_caption">
+    <figcaption class="m-full-width-media__caption">
         {{ value.text | safe }}
     </figcaption>
 {%- endif %}
@@ -52,13 +52,13 @@
 {%- else -%}
 
 <figure class="m-inset
-               m-inset__image
-               m-inset__{{ value.image_width }}
-               m-inset__{{ value.image_position }}
-               m-inset__{{ image_inset.orientation }}
-               {{- ' m-inset__bottom-rule' if value.is_bottom_rule else '' }}">
-    <div class="m-inset_image-container">
-        <img class="m-inset_image"
+               m-inset--image
+               m-inset--{{ value.image_width }}
+               m-inset--{{ value.image_position }}
+               m-inset--{{ image_inset.orientation }}
+               {{- ' m-inset--bottom-rule' if value.is_bottom_rule else '' }}">
+    <div class="m-inset__image-container">
+        <img class="m-inset__image"
              src="{{ image_inset.url }}"
              srcset="{{ image_inset.url }} {{ image_inset.width }}w,
                      {{ image_mobile.url }} {{ image_mobile.width }}w"
@@ -66,7 +66,7 @@
              alt="{{ image_alt_value(value.image) }}">
     </div>
 {% if value.text %}
-    <figcaption class="m-inset_caption">
+    <figcaption class="m-inset__caption">
         {{ value.text | safe }}
     </figcaption>
 {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html b/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
index 53212863285..89d3300502c 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
@@ -1,85 +1,48 @@
 {# ==========================================================================
 
-    Feature Card
+    Featured Cards
 
-   ==========================================================================
+    ==========================================================================
 
-   Description:
+    Description:
 
-   Create a feature card molecule when given:
+    Create a 50/50 set of featured cards organism when given:
 
-   value:                        Object defined from a StreamField block.
+    value:                         Object defined from a StreamField block.
 
-   value.category:               A set of values related to the card category
-                                  (title), including:
+    value.feature_cards:           List of Feature Card molecules. See Info Unit
+                                   molecule template for details.
 
-   value.category.url:           A string for the URL of the category page.
+    ========================================================================== #}
 
-   value.category.text:          A string for the title of the category.
+ {%- from 'v1/includes/blocks/heading.html' import heading without context %}
+ {%- from 'v1/includes/molecules/feature-card.html' import feature_card with context %}
 
-   value.icon:                   A string corresponding to an SVG icon.
+ <section>
+     <h2 class="u-show-on-mobile u-mt45">
+         Browse questions by category
+     </h2>
 
-   value.footer_label:           A tuple of items related to the card, including:
+     <ul class="u-show-on-mobile category__list m-list m-list--links u-mb0">
+     {% for card in value.feature_cards %}
+         <li class="m-list__item">
+             <a class="m-list__link a-link a-link--jump a-link--icon-after-text" href="{{ card.category.url }}">
+                 <span class="a-link__text">{{ card.category.text }}</span>
+                 {{ svg_icon( card.icon ) }}
+             </a>
+         </li>
+     {% endfor %}
+     </ul>
 
-   value.links:                  A tuple of items to create a list
-                                 of links, containing:
+     <div class="u-hide-on-mobile question-categories u-mb30">
+         <div class="o-card-group o-card-group--column-2">
+             <div class="o-card-group__cards">
 
-   value.links[i].url:           A string for the URL of the link.
+             {% for card in value.feature_cards %}
+                 {{- feature_card(card) }}
+             {% endfor %}
 
-   value.links[i].text:          A string for the text of the link.
-
-   value.links[i].aria_label:    (Optional) An aria-label for the link.
-
-   ========================================================================== #}
-
-{%- from 'v1/includes/blocks/heading.html' import heading without context %}
-
-{%- macro feature_card(value) -%}
-
-<article class="m-card">
-    <h2 class="m-card_heading">
-        <a href="{{ value.category.url }}">
-            <span class="m-card_icon">{{ svg_icon( value.icon ) }}</span>
-            <span>{{ value.category.text }}</span>
-        </a>
-    </h2>
-
-    <ul class="m-list">
-        {%- for link in value.links %}
-        <li class="m-list_item">
-        {%- if link.text is not none and link.text.find('@') > -1 -%}
-            {%- if not value.emails is defined -%}
-                {%- do value.update({'emails':[{'url':link.text}]}) -%}
-            {%- endif -%}
-            {% include 'contact-email.html' with context %}
-        {%- else -%}
-            {%- set link_text = link.text if link.text else 'Learn More' -%}
-            {%- set link -%}
-                <a class="a_link a-link__partially-styled"
-                   href="{{ link.url }}"
-                   {%- if link.aria_label -%}
-                   aria-label="{{ link.aria_label }}"
-                   {%- endif %}>
-                    <span class="a-link__partially-styled_plain">
-                        {{ link_text }}
-                    </span>
-                    <span class="a-link__partially-styled_underlined">
-                        {{ _('Read answer') }}
-                    </span>
-                </a>
-            {%- endset -%}
-            {{ link | safe }}
-        {%- endif %}
-        </li>
-        {%- endfor %}
-    </ul>
-
-    <div class="m-card_footer">
-        <a href="{{ value.category.url }}">
-            {{ value.footer_label }}
-        </a>
-    </div>
-
-</article>
-
-{% endmacro %}
+             </div>
+         </div>
+     </div>
+ </section>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
index 0a14ea6528d..c9ef8f7b373 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
@@ -26,11 +26,11 @@
             {% if is_horizontal -%}
                 {{ tagline.render() }}
             {%- endif %}
-            <div class="m-global-eyebrow_actions">
+            <div class="m-global-eyebrow__actions">
                 <ul class="m-list
                            m-list__horizontal
-                           m-global-eyebrow_languages">
-                    <li class="m-list_item">
+                           m-global-eyebrow__languages">
+                    <li class="m-list__item">
                         {% if language == 'es' %}
                         <a href="/" hreflang="en" lang="en">
                             English
@@ -41,43 +41,43 @@
                         </a>
                         {% endif %}
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/zh/" hreflang="zh" lang="zh">
                             中文
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/vi/" hreflang="vi" lang="vi">
                             Tiếng Việt
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ko/" hreflang="ko" lang="ko">
                             한국어
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/tl/" hreflang="tl" lang="tl">
                             Tagalog
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ru/" hreflang="ru" lang="ru">
                             Pусский
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ar/" hreflang="ar" lang="ar">
                             العربية
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ht/" hreflang="ht" lang="ht">
                             Kreyòl Ayisyen
                         </a>
                     </li>
                 </ul>
-                <span class="m-global-eyebrow_phone">
+                <span class="m-global-eyebrow__phone">
                     <a href="tel:+1-855-411-2372">(855) 411-2372</a>
                 </span>
             </div>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
index aaf026c90e7..5558c2e67ea 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
@@ -23,28 +23,28 @@
 
 <div class="m-global-search"
      data-js-hook="behavior_flyout-menu">
-    <div class="m-global-search_fallback">
+    <div class="m-global-search__fallback">
         <a rel="nofollow" href="{{ search_url }}">
             {{ _('Search') }}
         </a>
     </div>
-    <button class="m-global-search_trigger"
+    <button class="m-global-search__trigger"
             data-js-hook="behavior_flyout-menu_trigger"
             aria-label="{{ _('Search the consumerfinance.gov website') }}">
-        <span class="m-global-search_trigger-open-label">
+        <span class="m-global-search__trigger-open-label">
             {{ svg_icon('search') }}
             <span class="u-hide-on-mobile">{{ _('Search') }}</span>
         </span>
-        <span class="m-global-search_trigger-close-label">
+        <span class="m-global-search__trigger-close-label">
             {{ svg_icon('error') }}
             <span class="u-hide-on-mobile">{{ _('Close') }}</span>
         </span>
     </button>
-    <div class="m-global-search_content
+    <div class="m-global-search__content
                 u-hidden"
          data-js-hook="behavior_flyout-menu_content"
          role="search">
-        <form class="m-global-search_content-form"
+        <form class="m-global-search__content-form"
               action="{{ search_url_base }}"
               method="get">
             {#
@@ -60,11 +60,11 @@
                    value="{{ search_gov_affiliate() }}">
 
             <div class="o-form__input-w-btn">
-               <div class="o-form__input-w-btn_input-container m-form-field">
+               <div class="o-form--input-w-btn__input-container m-form-field">
                    <div class="a-text-input__full input-contains-label">
                        <label for="m-global-search_query"
-                              class="input-contains-label_before
-                                     input-contains-label_before__search">
+                              class="input-contains-label__before
+                                     input-contains-label__before__search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">{{ _('Search') }}</span>
                        </label>
@@ -77,7 +77,7 @@
                               placeholder="{{ _('Search the CFPB') }}">
                    </div>
                </div>
-               <div class="o-form__input-w-btn_btn-container">
+               <div class="o-form--input-w-btn__btn-container">
                    <button class="a-btn">{{ _('Search') }}</button>
                </div>
             </div>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/hero.html b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
index 99b8d0af879..ad63a714580 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/hero.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
@@ -64,20 +64,20 @@
                 {{- ' m-hero__overlay' if value.is_overlay else '' }}
                 {{- ' m-hero__50-50' if value.is_50_50 else '' }}
                 {{- ' m-hero__jumbo' if value.is_jumbo else '' }}">
-    <div class="m-hero_wrapper">
-        <div class="m-hero_text">
-            <h1 class="m-hero_heading">{{ value.heading }}
+    <div class="m-hero__wrapper">
+        <div class="m-hero__text">
+            <h1 class="m-hero__heading">{{ value.heading }}
                 {% if value.heading_continued %}
                 <br> {{ value.heading_continued }}
                 {% endif %}
             </h1>
-            <div class="m-hero_subhead">
+            <div class="m-hero__subhead">
                 {{ value.body | safe }}
             </div>
         </div>
-        <div class="m-hero_image-wrapper">
+        <div class="m-hero__image-wrapper">
         {% if img %}
-            <div class="m-hero_image"></div>
+            <div class="m-hero__image"></div>
         {% endif %}
         </div>
     </div>
@@ -99,7 +99,7 @@ <h1 class="m-hero_heading">{{ value.heading }}
             {% endif -%}
         }
     {% if img and img.width %}
-        .m-hero_image {
+        .m-hero__image {
             background-image: url('{{ sm_img.url }}');
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='{{ sm_img.url }}',
@@ -108,7 +108,7 @@ <h1 class="m-hero_heading">{{ value.heading }}
         }
 
         @media screen and (min-width: 37.5625em) {
-            .m-hero_image {
+            .m-hero__image {
                 background-image: url('{{ img.url }}');
                 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ img.url }}',
@@ -116,9 +116,9 @@ <h1 class="m-hero_heading">{{ value.heading }}
                 padding-bottom: {{ img.height / img.width * 100 }}%;
             }
 
-            .m-hero__jumbo .m-hero_wrapper,
-            .m-hero__50-50 .m-hero_wrapper,
-            .m-hero__overlay .m-hero_wrapper {
+            .m-hero__jumbo .m-hero__wrapper,
+            .m-hero__50-50 .m-hero__wrapper,
+            .m-hero__overlay .m-hero__wrapper {
                 background-image: url('{{ img.url }}');
                 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ img.url }}',
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html b/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
index 4895462925f..59fdeaacaf5 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
@@ -64,7 +64,7 @@
             {{- ' m-info-unit__inline' if format == '25-75' else '' }}">
 
     {% if link_image_and_heading %}
-        <a class="m-info-unit_heading-link"
+        <a class="m-info-unit__heading-link"
            href="{{ value.links[0].url | safe }}">
     {% endif %}
 
@@ -85,16 +85,16 @@
             {% set img_alt_text = value.links[0].text %}
         {% endif -%}
 
-        <img class="m-info-unit_image
-                    {{- ' m-info-unit_image__square' if img.is_square }}
-                    {{- ' u-image_border-circle' if border_radius_image == 'circle' }}
-                    {{- ' u-image_border-rounded' if border_radius_image == 'rounded' }}"
+        <img class="m-info-unit__image
+                    {{- ' m-info-unit__image__square' if img.is_square }}
+                    {{- ' u-image__border-circle' if border_radius_image == 'circle' }}
+                    {{- ' u-image__border-rounded' if border_radius_image == 'rounded' }}"
             src="{{ img.url }}"
             alt="{{ img_alt_text }}">
     {%- endif %}
 
     {%- if has_heading %}
-        <div class="m-info-unit_heading-text">
+        <div class="m-info-unit__heading-text">
             {{ heading( value.heading ) }}
         </div>
     {%- endif %}
@@ -103,13 +103,13 @@
         </a>
     {%- endif -%}
 
-    <div class="m-info-unit_content">
+    <div class="m-info-unit__content">
         {{ value.body | safe }}
 
         {% if value.links %}
             <ul class="m-list m-list__links u-mt15">
             {%- for link in value.links %}
-                <li class="m-list_item">
+                <li class="m-list__item">
                 {%- if link.text is not none and link.text.find('@') > -1 -%}
                     {%- if not value.emails is defined -%}
                         {%- do value.update({'emails':[{'url':link.text}]}) -%}
@@ -120,7 +120,7 @@
                         else 'Learn More' -%}
 
                     {%- set link -%}
-                        <a class="m-list_link"
+                        <a class="m-list__link"
                             href="{{ link.url }}"
                             {%- if link.aria_label -%}
                                 aria-label="{{ link.aria_label }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
index f4724210be1..12e93b64d45 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
@@ -61,24 +61,24 @@
             <a href="{{ value.links[0].url }}">
         {% endif %}
         {% if value.image.is_decorative %}
-        <div class="m-info-unit_image
-                    {{ 'm-info-unit_image__square' if value.image.is_square else '' }}"
+        <div class="m-info-unit__image
+                    {{ 'm-info-unit__image__square' if value.image.is_square else '' }}"
              style="background-image: url( {{ value.image.url }} );">
         </div>
         {% else %}
         <img src="{{ value.image.url }}"
              alt="{{ value.image.alt if value.image.alt else '' }}"
-             class="m-info-unit_image
-                    {{ 'm-info-unit_image__square' if value.image.is_square else '' }}">
+             class="m-info-unit__image
+                    {{ 'm-info-unit__image__square' if value.image.is_square else '' }}">
         {% endif %}
         {% if link_image_and_heading %}
             </a>
         {% endif %}
     {% endif %}
 
-    <div class="m-info-unit_content">
+    <div class="m-info-unit__content">
     {% if link_image_and_heading %}
-        <a class="m-info-unit_heading-link" href="{{ value.links[0].url }}">
+        <a class="m-info-unit__heading-link" href="{{ value.links[0].url }}">
     {% endif %}
             {{ value.heading | safe if value.heading else '' }}
             {{ value.sub_heading | safe if value.sub_heading else '' }}
@@ -91,7 +91,7 @@
         {% if value.links %}
             <ul class="m-list m-list__links">
             {% for link in value.links %}
-                <li class="m-list_item">
+                <li class="m-list__item">
                     {% if link.text is defined and link.text.find('@') > -1 %}
                         {% if not value.emails is defined %}
                             {% do value.update({'emails':[{'url':link.text}]}) %}
@@ -102,7 +102,7 @@
                             else 'Learn More' %}
 
                         {%- set link -%}
-                            <a class="m-list_link"
+                            <a class="m-list__link"
                                 href="{{ link.url }}"
                                 {%- if link.aria_label -%}
                                     aria-label="{{ link.aria_label }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/notification.html b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
index 52a8c4bb035..d7c7c649ec4 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/notification.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
@@ -49,19 +49,19 @@
               {{- type -}}
               {{- ' m-notification__visible' if is_visible else '' -}}">
       {{ svg_icon(icon) }}
-      <div class="m-notification_content"
+      <div class="m-notification__content"
           {{ 'role="alert"' if type == 'warning' or type == 'error' else '' }}>
           {%- if message %}
-          <div class="m-notification_message">{{ message }}</div>
+          <div class="m-notification__message">{{ message }}</div>
           {% endif -%}
           {%- if explanation %}
-              <div class="m-notification_explanation">{{ explanation }}</div>
+              <div class="m-notification__explanation">{{ explanation }}</div>
           {% endif -%}
           {% for link in links %}
               {% if link.text %}
                   {% if loop.first %}<ul class="m-list m-list__links">{% endif %}
-                      <li class="m-list_item">
-                          <a class="m-list_link" href="{{ link.url }}">
+                      <li class="m-list__item">
+                          <a class="m-list__link" href="{{ link.url }}">
                             {% if link.is_link_boldface %}<strong>{% endif %}
                             {{ link.text }}
                             {% if link.is_link_boldface %}</strong>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
index 915818896f9..71bc0ae203b 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
@@ -33,39 +33,39 @@
          aria-label="{{ _('Pagination') }}">
         {%- if current_page > 1 %}
         <a class="a-btn
-                  m-pagination_btn-prev"
+                  m-pagination__btn-prev"
            href="?page={{ (current_page - 1) ~
                           url_parameters(request.GET) ~
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
                   a-btn__disabled
-                  m-pagination_btn-prev">
+                  m-pagination__btn-prev">
         {% endif %}
-            <span class="a-btn_icon a-btn_icon__on-left">
+            <span class="a-btn__icon a-btn__icon--on-left">
                 {{- svg_icon('left') -}}
             </span>
             {{ _('Previous') }}
         </a>
         {%- if current_page < total_pages %}
         <a class="a-btn
-                  m-pagination_btn-next"
+                  m-pagination__btn-next"
            href="?page={{ (current_page + 1) ~
                           url_parameters(request.GET) ~
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
                   a-btn__disabled
-                  m-pagination_btn-next">
+                  m-pagination__btn-next">
         {% endif -%}
             {{ _('Next') }}
-            <span class="a-btn_icon a-btn_icon__on-right">
+            <span class="a-btn__icon a-btn__icon--on-right">
                 {{- svg_icon('right') -}}
             </span>
         </a>
-        <form class="m-pagination_form" action="{{ fragment_id }}">
-            <label for="m-pagination_current-page-{{ index | string }}">
-                <span class="m-pagination_label">
+        <form class="m-pagination__form" action="{{ fragment_id }}">
+            <label for="m-pagination__current-page-{{ index | string }}">
+                <span class="m-pagination__label">
                     {{ _('Page') }}
                 </span>
                 <span class="u-visually-hidden">
@@ -81,8 +81,8 @@
                     {% endif %}
                 {% endfor %}
             {% endfor %}
-            <input id="m-pagination_current-page-{{ index | string }}"
-                   class="m-pagination_current-page"
+            <input id="m-pagination__current-page-{{ index | string }}"
+                   class="m-pagination__current-page"
                    name="page"
                    type="number"
                    min="1"
@@ -90,12 +90,12 @@
                    pattern="[0-9]*"
                    inputmode="numeric"
                    value="{{ current_page }}">
-            <span class="m-pagination_label">
+            <span class="m-pagination__label">
                 {{- ' ' ~ _('of') ~ ' ' -}} {{- total_pages -}}
             </span>
             <button class="a-btn
                            a-btn__link
-                           m-pagination_btn-submit"
+                           m-pagination__btn-submit"
                     type="submit">
                 {{ _('Go') }}
             </button>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/quote.html b/cfgov/v1/jinja2/v1/includes/molecules/quote.html
index b5764bcaa20..891323b2727 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/quote.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/quote.html
@@ -17,11 +17,11 @@
    ========================================================================== #}
 
 <aside class="m-pull-quote" aria-hidden="true">
-    <p class="m-pull-quote_body">
+    <p class="m-pull-quote__body">
         {{ value.body }}
     </p>
     {% if value.citation %}
-    <p class="m-pull-quote_citation">
+    <p class="m-pull-quote__citation">
         {{ value.citation }}
     </p>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-content.html b/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
index c7609c3ff68..a7434d6fd0e 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
@@ -32,7 +32,7 @@
 <div class="m-related-links">
     {% if value.heading %}
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading" id="{{ value.heading | slugify_unique }}">
+            <h2 class="m-slug-header__heading" id="{{ value.heading | slugify_unique }}">
                 {{ value.heading }}
             </h2>
         </header>
@@ -43,9 +43,9 @@ <h2 class="m-slug-header_heading" id="{{ value.heading | slugify_unique }}">
     {% if value.links %}
         <ul class="m-list m-list__links">
         {% for link in value.links %}
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a href="{{ link.url }}"
-                  class="m-list_link"
+                  class="m-list__link"
                   {%- if link.aria_label -%}
                     aria-label="{{ link.aria_label }}"
                   {% endif -%}>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html
index 50d8f795452..f11d020ad4c 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html
@@ -32,27 +32,27 @@
 {% macro render() %}
 
 {% set show_enf_data = False %}
-<div class="m-related-metadata block block__flush-top">
+<div class="m-related-metadata block block--flush-top">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
           Action Details
         </h2>
     </header>
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Forum
         </h3>
         {{_categories(page.categories)}}
     </div>
     {% if page.court %}
-        <div class="m-related-metadata_item-container">
+        <div class="m-related-metadata__item-container">
             <h3 class="h4">
               Court
             </h3>
             {{page.court}}
         </div>
     {% endif %}
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Docket number
         </h3>
@@ -61,14 +61,14 @@ <h3 class="h4">
         {% endfor %}
     </div>
     {% if page.initial_filing_date %}
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Initial filing date
         </h3>
         {{_date(page.initial_filing_date)}}
     </div>
     {% endif %}
-    <div class="m-related-metadata_item-container m-related-metadata_status">
+    <div class="m-related-metadata__item-container m-related-metadata__status">
         <h3 class="h4">
           Status
         </h3>
@@ -85,7 +85,7 @@ <h3 class="h4">
         >See status definitions</a>
     </div>
     {% if show_enf_data and statutes|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Statutes
           </h3>
@@ -94,7 +94,7 @@ <h3 class="h4">
     {% endif %}
     {{_dispositions(page.enforcement_dispositions.all())}}
     {% if show_enf_data and defendant_types|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Defendant/Respondent type
           </h3>
@@ -106,7 +106,7 @@ <h3 class="h4">
       </div>
     {% endif %}
     {% if products|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Products
           </h3>
@@ -115,7 +115,7 @@ <h3 class="h4">
     {% endif %}
 
     {% if show_enf_data and at_risk_groups|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             At Risk Groups
           </h3>
@@ -148,10 +148,10 @@ <h3 class="h4">
 <ul class="m-list
            m-list__unstyled
            m-list__links
-           m-related-metadata_topics">
+           m-related-metadata__topics">
     {% for item in list %}
-    <li class="m-list_item">
-        <span class="m-list_link">{{item}}</span>
+    <li class="m-list__item">
+        <span class="m-list__link">{{item}}</span>
     </li>
     {% endfor %}
 </ul>
@@ -194,7 +194,7 @@ <h3 class="h4">
    ========================================================================== #}
 {% macro _dispositions(dispositions) %}
     {% if show_enf_data and dispositions|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Total consumer relief
           </h3>
@@ -202,7 +202,7 @@ <h3 class="h4">
             ${{'{:,}'.format(total_consumer_relief)}}
           </div>
       </div>
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Total civil money penalties
           </h3>
@@ -231,7 +231,7 @@ <h3 class="h4">
 {% macro _categories(categories_check) %}
     <ul class="m-list m-list__unstyled">
     {% for category in page.categories.all() %}
-    <li class="m-list_item">
+    <li class="m-list__item">
         <span>{{ category.get_name_display() }}</span>
     </li>
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
index 29413c68db8..bbb7e7a46a0 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
@@ -43,7 +43,7 @@
 } %}
 <div class="m-related-metadata">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.slug }}
         </h2>
     </header>
@@ -53,7 +53,7 @@ <h2 class="m-slug-header_heading">
         {% if 'topics' in block.block_type and not block.value.show_topics %}
             {% continue %}
         {% endif %}
-        <div class="m-related-metadata_item-container">
+        <div class="m-related-metadata__item-container">
             <h3 class="h4">
                 {{ block.value.heading }}
             </h3>
@@ -84,15 +84,15 @@ <h3 class="h4">
 <ul class="m-list
            m-list__unstyled
            m-list__links
-           {{ 'm-related-metadata_topics' if is_related_topics else '' }} ">
+           {{ 'm-related-metadata__topics' if is_related_topics else '' }} ">
     {% for link in list.links %}
-    <li class="m-list_item">
+    <li class="m-list__item">
         {% if link.url %}
-            <a href="{{ link.url }}" class="m-list_link">
+            <a href="{{ link.url }}" class="m-list__link">
                 {{ link.text }}
             </a>
         {% else %}
-            <span class="m-list_link">{{ link.text }}</span>
+            <span class="m-list__link">{{ link.text }}</span>
         {% endif %}
     </li>
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
index 33b50858da7..2c3f6cedb0b 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
@@ -16,14 +16,14 @@
 
 {% macro _related_posts_list(posts, limit) %}
     {% if limit %}{% set posts = posts[ :limit | int ] %}{% endif %}
-    <ul class="m-related-posts_list
+    <ul class="m-related-posts__list
                m-list
                m-list__unstyled">
         {% for post in posts %}
             {% set post_url = post.url or '' %}
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <h3 class="h4 u-mb5">
-                    <a class="m-list_link"
+                    <a class="m-list__link"
                        href="{{ post_url or post.permalink }}">
                         {{ post.title | safe }}
                     </a>
@@ -78,12 +78,12 @@ <h3 class="h4 u-mb5">
 {% macro render( value ) %}
 <div class="m-related-posts">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.header_title }}
         </h2>
     </header>
     {% for subposts in value.posts %}
-        <div class="m-related-posts_list-container">
+        <div class="m-related-posts__list-container">
             {% if value.show_heading %}
                 <h3 class="h4">
                     {% if subposts.icon %}{{ svg_icon( subposts.icon ) }}{% endif %}
@@ -97,7 +97,7 @@ <h3 class="h4">
     <a class="a-link a-link__jump"
        href="{{ value.view_more_url }}"
        aria-label="{{ _('View more related posts') }}">
-        <span class="a-link_text">
+        <span class="a-link__text">
             {{ _('View more') }}
         </span>
     </a>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
index 4909eccad18..e6e1efc6701 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
@@ -23,7 +23,7 @@
    ========================================================================== #}
 <div class="m-related-topics">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.heading or 'Related Topics' }}
         </h2>
     </header>
@@ -31,8 +31,8 @@ <h2 class="m-slug-header_heading">
                m-list__unstyled
                m-list__links">
     {% for topic in value.topics %}
-    <li class="m-list_item">
-        <a href="{{ topic.url }}" class="m-list_link">
+    <li class="m-list__item">
+        <a href="{{ topic.url }}" class="m-list__link">
             {{ topic.text }}
         </a>
     </li>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html b/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
index 59f6f85c570..189deb3a305 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
@@ -15,7 +15,7 @@
         Subscribe to our RSS feed to get the latest content in your reader.
     </p>
     <a class="a-btn" href="{{ url }}">
-        <span class="a-btn_icon__on-left">
+        <span class="a-btn__icon--on-left">
             {{- svg_icon('rss') -}}
         </span>
         Subscribe to RSS
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
index d2c65e9e065..0ea2587e0d5 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
@@ -70,7 +70,7 @@
 <div class="m-social-media
             m-social-media__{{ 'share' if is_share_view else 'follow' }}">
     {% if is_share_view %}
-        <div class="h5 m-social-media_heading">
+        <div class="h5 m-social-media__heading">
             {% if is_printable -%}
                 {{ _('Share & print') }}
             {%- else -%}
@@ -82,7 +82,7 @@
     <ul class="m-list
                m-list__unstyled
                m-list__horizontal
-               m-social-media_icons">
+               m-social-media__icons">
 
         {% set facebook_homepage = _('https://www.facebook.com/CFPB') %}
         {% set facebook_info = {
@@ -152,8 +152,8 @@
 
         {% for link in links %}
             {% if is_share_view %}
-                <li class="m-list_item">
-                    <a class="m-social-media_icon"
+                <li class="m-list__item">
+                    <a class="m-social-media__icon"
                        href="{{ link.share_url if link.name != 'email' else link.share_url | trim }}"
                        {{ 'target="_blank" rel="noopener noreferrer"' | safe if link.name != 'email' else '' }}
                        aria-label="{{ _('Share on') }} {{ link.name }}">
@@ -161,8 +161,8 @@
                     </a>
                 </li>
             {% else %}
-                <li class="m-list_item">
-                    <a class="m-social-media_icon"
+                <li class="m-list__item">
+                    <a class="m-social-media__icon"
                        href="{{ link.homepage | trim }}"
                        aria-label="{{ _('Visit us on') }} {{ link.name }}">
                         {{ svg_icon(link.icon ~ '-square') }}
@@ -172,8 +172,8 @@
         {% endfor %}
 
         {% if is_share_view and is_printable %}
-            <li class="m-list_item m-social-media_print">
-                <button class="a-btn a-btn__link m-social-media_icon"
+            <li class="m-list__item m-social-media__print">
+                <button class="a-btn a-btn__link m-social-media__icon"
                    onclick="{{ print_info.share_url }}"
                    aria-label="{{ print_info.name }}"
                    type="button">
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html b/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
index 1ade5850104..5295d1eb3c3 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
@@ -57,8 +57,8 @@ <h1>{{ value.heading }}</h1>
 {% for link in value.links %}
     {% if link.text %}
         {% if loop.first %}<ul class="m-list m-list__links">{% endif %}
-            <li class="m-list_item">
-                <a class="m-list_link"
+            <li class="m-list__item">
+                <a class="m-list__link"
                    href="{{ link.url }}"
                    {% if link.aria_label %}aria-label="{{ link.aria_label }}"{% endif %}>
                    {% if link.is_link_boldface %}<strong>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/translation-links.html b/cfgov/v1/jinja2/v1/includes/molecules/translation-links.html
index eeb67ed50ee..72f034edb07 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/translation-links.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/translation-links.html
@@ -31,7 +31,7 @@
     {% set language = (language or page.language) | default( 'en' ) %}
 
     {%- if links and links | length > 1 %}
-    <div class="block block__sub {{ modifier_classes }}">
+    <div class="block block--sub {{ modifier_classes }}">
         <ul dir="ltr" class="m-translation-links">
             {%- for link in links %}
                 {# language is set by the context in the base template. #}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
index 3ccd61c0613..12e98d37ec3 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
@@ -50,14 +50,14 @@
 
         <div class="o-search-bar_input">
             <div class="o-form__input-w-btn">
-                <div class="o-form__input-w-btn_input-container">
+                <div class="o-form--input-w-btn__input-container">
                     <div class="m-btn-inside-input
                                 input-contains-label
                                 {% if autocomplete %}m-autocomplete{% endif %}"
                          data-language="{{ language }}">
                         <label for="o-search-bar_query"
-                               class="input-contains-label_before
-                                      input-contains-label_before__search">
+                               class="input-contains-label__before
+                                      input-contains-label__before__search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">
                                 {{ _('Search for your question') }}
@@ -76,7 +76,7 @@
                          id="o-search-bar_error-message"
                          role="alert">
                         {{ svg_icon('error-round') }}
-                        <p class="a-form-alert_text">
+                        <p class="a-form-alert__text">
                             Searches are limited to {{ autocomplete_max_chars }}
                             characters.
                             {% if complaint_link %}
@@ -87,7 +87,7 @@
                         </p>
                     </div>
                 </div>
-                <div class="o-form__input-w-btn_btn-container">
+                <div class="o-form--input-w-btn__btn-container">
                     <button class="a-btn"
                             type="submit"
                             aria-label="{{ _('Search Ask CFPB for your question') }}">
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
index d9971da4564..fd148243fd0 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
@@ -45,7 +45,7 @@
     <div class="block u-text-centered">
     {% if value.heading %}<h2 class="h1">{{ value.heading }}</h2>{% endif %}
     </div>
-    <div class="o-card-group_cards">
+    <div class="o-card-group__cards">
     {% for _card in value.cards %}
         {{ card.render( _card ) }}
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/chart.html b/cfgov/v1/jinja2/v1/includes/organisms/chart.html
index 5bdff6ff85e..70d37d8a01d 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/chart.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/chart.html
@@ -35,7 +35,7 @@ <h3>{{ value.title }}</h3>
          {% if value.description %}{{ value.description }}{% endif %}
     </div>
 
-    <p class="m-chart-footnote block__sub block__border-top block short-desc">
+    <p class="m-chart-footnote block--sub block--border-top block short-desc">
         <strong>Source:</strong> CFPB Consumer Credit Panel<br>
         <strong>Date published:</strong> {{ value.date_published.strftime('%B %Y') }}<br>
 
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html b/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
index 0f5c8fd9a9f..88166635de2 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
@@ -25,8 +25,8 @@
 
 <h2>Data snapshot</h2>
 <div class="o-info-unit-group">
-    <div class="content-l_col
-                content-l_col-1-2">
+    <div class="content-l__col
+                content-l__col-1-2">
         <h3><b>{{ value.num_originations }}</b>
         <br/>
         {{ value.num_originations_text }}
@@ -58,8 +58,8 @@ <h3><b>{{ value.inquiry_year_over_year_change }}</b>
     {% if value.image %}
     </div>
 
-    <div class="content-l_col
-                content-l_col-1-2">
+    <div class="content-l__col
+                content-l__col-1-2">
         <div class="m-full-width-media">
             {% set media = image(value.image, 'original') %}
             <img class="richtext-image full-width"
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
index dea2eb7f1da..bd0a5700c13 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
@@ -41,25 +41,25 @@
      id="{{ value.group_index_slug if value.group_index_slug else value.label | slugify_unique }}"
      {{ 'itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question"'
         if value.is_faq else '' }} >
-    <button class="o-expandable_header" type="button">
-        <span class="o-expandable_icon">
+    <button class="o-expandable__header" type="button">
+        <span class="o-expandable__icon">
             {% if value.icon %} {{ svg_icon( value.icon ) }} {% endif %}
         </span>
-        <span class="o-expandable_label"
+        <span class="o-expandable__label"
               {{'itemprop="name"' if value.is_faq else ''}}>
             {{ value.label }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content"
+    <div class="o-expandable__content"
           {{ 'itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"'
         if value.is_faq else '' }}>
         {% if value.is_faq %}<div itemprop='text'>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html b/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
index 54aa0768bcb..36b990f0bda 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
@@ -23,11 +23,11 @@ <h2 class="u-show-on-mobile u-mt45">
         Browse questions by category
     </h2>
 
-    <ul class="u-show-on-mobile category_list m-list m-list__links u-mb0">
+    <ul class="u-show-on-mobile category__list m-list m-list--links u-mb0">
     {% for card in value.feature_cards %}
-        <li class="m-list_item">
-            <a class="m-list_link a-link a-link__jump a-link__icon-after-text" href="{{ card.category.url }}">
-                <span class="a-link_text">{{ card.category.text }}</span>
+        <li class="m-list__item">
+            <a class="m-list__link a-link a-link--jump a-link--icon-after-text" href="{{ card.category.url }}">
+                <span class="a-link__text">{{ card.category.text }}</span>
                 {{ svg_icon( card.icon ) }}
             </a>
         </li>
@@ -35,8 +35,8 @@ <h2 class="u-show-on-mobile u-mt45">
     </ul>
 
     <div class="u-hide-on-mobile question-categories u-mb30">
-        <div class="o-card-group o-card-group__column-2">
-            <div class="o-card-group_cards">
+        <div class="o-card-group o-card-group--column-2">
+            <div class="o-card-group__cards">
 
             {% for card in value.feature_cards %}
                 {{- feature_card(card) }}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
index 61e0841697d..4446ec6413c 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
@@ -34,7 +34,7 @@
 
 <section class="o-featured-content-module
                 {{ 'o-featured-content-module__left' if value.layout_left }}">
-    <div class="o-featured-content-module_text">
+    <div class="o-featured-content-module__text">
         <h2 class="h3">{{ value.heading }}</h2>
 
         <p>{{ value.body }}</p>
@@ -42,8 +42,8 @@ <h2 class="h3">{{ value.heading }}</h2>
         {% if value.links %}
         <ul class="m-list m-list__links">
             {% for link in value.links %}
-                <li class="m-list_item">
-                    <a class="m-list_link"
+                <li class="m-list__item">
+                    <a class="m-list__link"
                        href="{{ link.url }}"
                        {% if link.aria_label %}aria-label="{{ link.aria_label }}"{% endif %}>
                        {% if link.is_link_boldface == True%}<strong>{% endif %}
@@ -62,8 +62,8 @@ <h2 class="h3">{{ value.heading }}</h2>
             {% include 'v1/includes/organisms/video-player.html' %}
         {% endwith %}
     {% elif value.image and value.image.url %}
-        <div class="o-featured-content-module_visual">
-            <img class="o-featured-content-module_img"
+        <div class="o-featured-content-module__visual">
+            <img class="o-featured-content-module__img"
                  src="{{ value.image.url }}"
                  alt="{{ value.image.alt_text }}">
         </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
index ffd3bedd7f6..16047163e46 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
@@ -33,9 +33,9 @@
 {% endmacro %}
 
 {% macro _filter_multiselect( label, data, filter_count ) %}
-    <div class="content-l_col
-                content-l_col-1-{{ '3' if filter_count == 3 else '2' }}">
-        <div class="o-form_group">
+    <div class="content-l__col
+                content-l__col-1-{{ '3' if filter_count == 3 else '2' }}">
+        <div class="o-form__group">
             <div class="m-form-field">
                 <label class="a-label a-label__heading"
                         for="{{ data.id_for_label }}">
@@ -49,9 +49,9 @@
 
 {% macro _render_filter_fields(value, form) -%}
     {% if value.filter_by_keyword %}
-        <div class="content-l_col
-                    content-l_col-1">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading"
                            for="{{ form.title.id_for_label }}">
@@ -86,9 +86,9 @@
     {% endif %}
 
     {% if value.filter_by_category %}
-        <div class="content-l_col
-                    content-l_col-1-{{ '3' if filter_count == 3 else '2' }}">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1-{{ '3' if filter_count == 3 else '2' }}">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading"
                            for="{{ form.categories.id_for_label }}"
@@ -132,19 +132,19 @@
 
     {% if value.filter_by_date_range %}
         {# Ensures the dates appear on their own line #}
-        <div class="content-l_col
-                    content-l_col-1">
+        <div class="content-l__col
+                    content-l__col-1">
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-2-3">
-                    <div class="o-form_group">
-                        <fieldset class="o-form_fieldset">
+                <div class="content-l__col
+                            content-l__col-2-3">
+                    <div class="o-form__group">
+                        <fieldset class="o-form__fieldset">
                             <legend class="a-legend">
                                 Date range
                             </legend>
                             <div class="content-l">
-                                <div class="content-l_col
-                                            content-l_col-1-2">
+                                <div class="content-l__col
+                                            content-l__col-1-2">
                                     <div class="m-form-field">
                                         <label class="a-label a-label__heading"
                                                 for="{{ form.from_date.id_for_label }}">
@@ -153,8 +153,8 @@
                                         {{ form.from_date }}
                                     </div>
                                 </div>
-                                <div class="content-l_col
-                                            content-l_col-1-2">
+                                <div class="content-l__col
+                                            content-l__col-1-2">
                                     <div class="m-form-field">
                                         <label class="a-label a-label__heading"
                                                 for="{{ form.to_date.id_for_label }}">
@@ -176,8 +176,8 @@
     <form method="get" action=".">
         <div class="content-l">
             {{ _render_filter_fields(value, form) }}
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <button class="a-btn" type="submit">
                     Apply filters
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-results.html b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-results.html
index b7824cde736..0c80c87204e 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-results.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-results.html
@@ -62,8 +62,8 @@
         {% endif %}
 
         <div class="block
-                    block__padded
-                    block__sub
+                    block--padded
+                    block--sub
                     {%- if not has_active_filters %}
                     u-hidden
                     {%- endif %}"
@@ -80,9 +80,9 @@
 
         {% if results_page.paginator.count %}
             <section class="block
-                            block__sub
+                            block--sub
                             {%- if has_active_filters %}
-                            block__flush-top
+                            block--flush-top
                             {%- endif %}"
                      data-cy="filterable-list-results">
                 {% if page.filterable_results_compact %}
@@ -104,7 +104,7 @@
                 {# DISPLAY THE PAGINATOR, IF THERE ARE RESULTS OVER A COUNT. #}
 
                 {% if results_page.paginator.num_pages > 1 %}
-                    <div class="block block__flush-top block__flush-bottom block__padded-top">
+                    <div class="block block--flush-top block--flush-bottom block--padded-top">
                         {% import 'v1/includes/molecules/pagination.html' as pagination with context %}
                         {{ pagination.render(
                             results_page.paginator.num_pages,
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/footer.html b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
index a5727043439..2f28e7bb382 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/footer.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
@@ -20,155 +20,155 @@
 <footer class="o-footer">
     <div class="wrapper wrapper__match-content">
 
-        <div class="o-footer_pre">
+        <div class="o-footer__pre">
 
             <a class="a-btn
                       a-btn__secondary
-                      o-footer_top-button"
+                      o-footer__top-button"
                 data-gtm_ignore="true"
                 data-js-hook="behavior_return-to-top"
                 href="#">
                 {{ _('Back to top') }} {{ svg_icon('arrow-up') }}
             </a>
 
-            <ul class="o-footer_nav-list m-list">
+            <ul class="o-footer__nav-list m-list">
                 {% if language == 'es' %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/herramientas-del-consumidor/">Para consumidores</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/herramientas-del-consumidor/">Para consumidores</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/obtener-respuestas/">Obtener respuestas</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/obtener-respuestas/">Obtener respuestas</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/enviar-una-queja/">Enviar una queja</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/enviar-una-queja/">Enviar una queja</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/quienes-somos/">Quiénes somos</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/quienes-somos/">Quiénes somos</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/comprar-casa/">Comprar casa</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/comprar-casa/">Comprar casa</a>
                     </li>
                 {% else %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/">
                             About Us
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/contact-us/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/contact-us/">
                             Contact Us
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/careers/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/careers/">
                             Careers
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/events/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/events/">
                             Events
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/enforcement/information-industry-whistleblowers/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/enforcement/information-industry-whistleblowers/">
                             Industry Whistleblowers
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/cfpb-ombudsman/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/cfpb-ombudsman/">
                             CFPB Ombudsman
                         </a>
                     </li>
                 {% endif %}
             </ul>
             <div class="block
-                        block__flush-top
-                        block__flush-bottom
-                        block__padded-top">
+                        block--flush-top
+                        block--flush-bottom
+                        block--padded-top">
                 {{ social_media.render( { 'is_share_view': false } ) }}
             </div>
-        </div>{# END .o-footer_pre #}
+        </div>{# END .o-footer__pre #}
 
         {% if language == 'es' %}
-        <div class="block block__flush-bottom block__flush-top block__padded-bottom">
+        <div class="block block--flush-bottom block--flush-top block--padded-bottom">
             En este momento, la política de información sólo está disponible en inglés.
         </div>
         {% endif %}
 
         <div class="o-footer-middle-left">
 
-            <div class="o-footer_col">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/foia-requests/">
+            <div class="o-footer__col">
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/foia-requests/">
                             FOIA
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/privacy/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/privacy/">
                             Privacy
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link"
+                    <li class="m-list__item">
+                        <a class="m-list__link"
                            href="/privacy/website-privacy-policy/">
                             Website Privacy Policy & Legal Notices
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/data/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/data/">
                             Data
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/open-government/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/open-government/">
                             Open Government
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/open-government/information-quality-guidelines/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/open-government/information-quality-guidelines/">
                             Information Quality Guidelines
                         </a>
                     </li>
                 </ul>
             </div>
-            <div class="o-footer_col">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/diversity-and-inclusion/">
+            <div class="o-footer__col">
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/diversity-and-inclusion/">
                             Diversity & Inclusion
                         </a>
                     </li>
                     {% if language != 'es' %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/administrative-adjudication-proceedings/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/administrative-adjudication-proceedings/">
                             Administrative Adjudication
                         </a>
                     </li>
                     {% endif %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/plain-writing/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/plain-writing/">
                             Plain Writing
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/accessibility/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/accessibility/">
                             Accessibility
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/office-civil-rights/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/office-civil-rights/">
                             Office of Civil Rights
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/office-civil-rights/no-fear-act-cummings-act/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/office-civil-rights/no-fear-act-cummings-act/">
                             No FEAR Act &amp; Cummings Act
                         </a>
                     </li>
                     {% if language != 'es'%}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/tribal/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/tribal/">
                             Tribal
                         </a>
                     </li>
@@ -178,18 +178,18 @@
         </div>{# END .o-footer-middle-left #}
 
         <div class="o-footer-middle-right">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link a-link"
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link a-link"
                            href="{{ _('https://www.usa.gov/') }}">{{ _('USA.gov') }}</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link a-link"
+                    <li class="m-list__item">
+                        <a class="m-list__link a-link"
                            href="https://oig.federalreserve.gov/">Office of Inspector General</a>
                     </li>
                     {% if language == 'es'%}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/cfpb-ombudsman/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/cfpb-ombudsman/">
                             CFPB Ombudsman
                         </a>
                      </li>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html b/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html
index 8c0bc6c1e2f..1ca887a7657 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html
@@ -36,7 +36,7 @@
                 {{ block | safe }}
             </div>
         {% elif block_type in ['email_signup'] %}
-            <div class="block{{ " block__flush-top" if loop.first }} m-inset__email">
+            <div class="block{{ " block--flush-top" if loop.first }} m-inset__email">
                 <div class="o-well">
                     {% include_block block %}
                 </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/header.html b/cfgov/v1/jinja2/v1/includes/organisms/header.html
index c484c921e2b..a8bf453f4c1 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/header.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html
@@ -67,12 +67,12 @@
     {% import 'v1/includes/molecules/global-eyebrow.html' as global_eyebrow with context %}
     {{ global_eyebrow.render( true, language ) }}
 
-    <div class="o-header_content">
+    <div class="o-header__content">
 
         <div class="wrapper wrapper__match-content">
             {% if language == 'es' %}
-            <a class="o-header_logo" href="/es/">
-                <img class="o-header_logo-img"
+            <a class="o-header__logo" href="/es/">
+                <img class="o-header__logo-img"
                      src="{{ static('img/logo_es_286x50.png') }}"
                      srcset="{{ static('img/logo_es_228x40.png') }} 228w,
                              {{ static('img/logo_es_228x40@2x.png') }} 456w,
@@ -85,8 +85,8 @@
                      alt="Oficina para la Protección Financiera del Consumidor">
             </a>
             {% else %}
-            <a class="o-header_logo" href="/">
-                <img class="o-header_logo-img"
+            <a class="o-header__logo" href="/">
+                <img class="o-header__logo-img"
                      src="{{ static('img/logo_237x50.png') }}"
                      srcset="{{ static('img/logo_161x34.png') }} 161w,
                              {{ static('img/logo_161x34@2x.png') }} 322w,
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
index 5a81d739529..4a2546cbc84 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
@@ -60,10 +60,10 @@
                 {{- ' content-l__top-divider' if value.lines_between_items else '' -}}">
     {% endif %}
 
-        <div class="content-l_col
-                    {{- ' content-l_col-1-2' if value.format == '50-50' else '' -}}
-                    {{- ' content-l_col-1-3' if value.format == '33-33-33' else '' -}}
-                    {{- ' content-l_col-1' if value.format == '25-75' else '' -}}">
+        <div class="content-l__col
+                    {{- ' content-l__col-1-2' if value.format == '50-50' else '' -}}
+                    {{- ' content-l__col-1-3' if value.format == '33-33-33' else '' -}}
+                    {{- ' content-l__col-1' if value.format == '25-75' else '' -}}">
             {{- info_unit(unit, value.format, value.link_image_and_heading, value.border_radius_image) }}
         </div>
 
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
index a5f533fca61..46bbda518dd 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
@@ -30,8 +30,8 @@ <h2>{{ heading | safe }}</h2>
 
     <div class="content-l">
         {% for block in blocks %}
-        <div class="content-l_col
-                    content-l_col-1-{{ columns }}">
+        <div class="content-l__col
+                    content-l__col-1-{{ columns }}">
             {{ block }}
         </div>
         {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html b/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
index c1d3f9003b1..3ce57340220 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
@@ -36,7 +36,7 @@
 
 <div class="o-item-introduction">
     {% if filter_page_url and page.categories.count() > 0 and value.show_category %}
-        <div class="o-item-introduction_intro">
+        <div class="o-item-introduction__intro">
             {{ category_slug.render(category=page.categories.first().name, href=filter_page_url) }}
         </div>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
index ebf0db1b529..c43f67facd8 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
@@ -25,15 +25,15 @@
 <div class="o-full-width-text-group" id="mp-line-chart-container" data-chart-time-span="{{ time_frame }}" data-chart-start-date="{{ sampling_dates|first }}" data-chart-end-date="{{ sampling_dates|last }}">
     <div class="m-full-width-text">
         <div class="block
-                block__flush-top
-                block__flush-bottom
-                block__padded-bottom">
+                block--flush-top
+                block--flush-bottom
+                block--padded-bottom">
         {{ value.content_block|safe }}
         </div>
         <h3 class="u-mb30">Filter by location to display trends</h3>
         <form class="content-l u-mb45" id="mp-line-chart-controls" name="mp-line-chart-controls">
             <div id="mp-chart-loading" class="mp-loading"></div>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <label class="a-label" for="mp-line-chart-geo"><h4>Select location type</h4></label>
                 <div class="m-form-field m-form-field__radio" id="mp-line-chart-geo">
                     <div class="m-form-field m-form-field__radio u-mb10">
@@ -53,7 +53,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
                     </div>
                 </div>
             </fieldset>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <div class="m-form-field m-form-field__select mp-line-chart-select-container u-mb30" id="mp-line-chart-state-container" style="display:none">
                     <label class="a-label" for="mp-line-chart-state"><h4 id="mp-state-dropdown-title">Select state</h4></label>
                     <div class="a-select">
@@ -169,7 +169,7 @@ <h3 id="mp-line-chart-title">Percentage of mortgages {{ time_frame_styled }} {%
          id="mp-line-chart">
         {{ value.description }}
     </div>
-    <p class="m-chart-footnote block__sub block__border-top block short-desc">
+    <p class="m-chart-footnote block--sub block--border-top block short-desc">
     <strong>Source:</strong> National Mortgage Database<br>
     <strong>Date published:</strong> {{ pub_date_formatted }}<br>
     <strong>Downloads:</strong> CSV files with data by <a class="icon-link icon-link__download" href="{{ state_meta['url'] }}" <span class="icon-link_text">state</span></a> ({{ state_meta['size'] }}), <a class="icon-link icon-link__download" href="{{ metro_meta['url'] }}" <span class="icon-link_text">metro and non-metro areas</span></a> ({{ metro_meta['size'] }}), or <a class="icon-link icon-link__download" href="{{ county_meta['url'] }}"><span class="icon-link_text">county</span></a> ({{ county_meta['size'] }}).<br>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
index 9a168027ab1..8a700349ee2 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
@@ -20,15 +20,15 @@
 <div class="o-full-width-text-group" id="mp-map-container" data-chart-time-span="{{ time_frame }}" data-chart-color="{{ data_vis_color }}" data-chart-start-date="{{ sampling_dates|first }}" data-chart-end-date="{{ sampling_dates|last }}">
     <div class="m-full-width-text">
         <div class="block
-                block__flush-top
-                block__flush-bottom
-                block__padded-bottom">
+                block--flush-top
+                block--flush-bottom
+                block--padded-bottom">
         {{ value.content_block|safe }}
         </div>
         <form id="mp-map-controls" name="mp-map-controls" class="mp-controls u-js-only">
             <div id="mp-map-loading" class="mp-loading"></div>
             <h3 class="u-mb30">Choose location to display on the map</h3>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <label class="a-label" for="mp-map-geo"><h4>Select map view</h4></label>
                 <div class="m-form-field m-form-field__radio" id="mp-map-geo">
                     <div class="m-form-field m-form-field__radio u-mb10">
@@ -42,7 +42,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
                     </div>
                 </div>
             </fieldset>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <div class="m-form-field m-form-field__select mp-map-select-container" id="mp-map-state-container">
                     <label class="a-label" for="mp-map-state"><h4>Select state to zoom</h4></label>
                     <div class="a-select">
@@ -121,7 +121,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
             </fieldset>
             <fieldset class="content-l">
                 <h4 class="u-mt30">Select month and year to display</h4>
-                <div class="content-l_col content-l_col-1-2 u-m0">
+                <div class="content-l__col content-l__col-1-2 u-m0">
                     <div class="m-form-field m-form-field__select" id="mp-map-month-container">
                         <label class="a-label u-mb15" for="mp-map-month">Month</label>
                         <div class="a-select">
@@ -142,7 +142,7 @@ <h4 class="u-mt30">Select month and year to display</h4>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="m-form-field m-form-field__select" id="mp-map-year-container">
                         <label class="a-label u-mb15" for="mp-map-year">Year</label>
                         <div class="a-select">
@@ -158,11 +158,11 @@ <h4 class="u-mt30">Select month and year to display</h4>
                         u-mt30"
                   id="mp-map-notification">
                 {{ svg_icon('warning-round') }}
-                <div class="m-notification_content">
-                    <div class="m-notification_message">
+                <div class="m-notification__content">
+                    <div class="m-notification__message">
                         Invalid date
                     </div>
-                    <p class="m-notification_explanation">
+                    <p class="m-notification__explanation">
                         We only have data available through {{ thru_month_formatted }}.
                         Please select a valid date.
                     </p>
@@ -208,7 +208,7 @@ <h3 id="mp-map-title">Percentage of mortgages {% if time_frame == '90' %} at lea
             </g>
         </svg>
     </div>
-    <p class="m-chart-footnote block__sub block short-desc">
+    <p class="m-chart-footnote block--sub block short-desc">
     <strong>Source:</strong> National Mortgage Database<br>
     <strong>Date published:</strong> {{ pub_date_formatted }}<br>
     <strong>Downloads:</strong> CSV files with data by <a class="icon-link icon-link__download" href="{{ state_meta['url'] }}" <span class="icon-link_text">state</span></a> ({{ state_meta['size'] }}), <a class="icon-link icon-link__download" href="{{ metro_meta['url'] }}" <span class="icon-link_text">metro and non-metro areas</span></a> ({{ metro_meta['size'] }}), or <a class="icon-link icon-link__download" href="{{ county_meta['url'] }}"><span class="icon-link_text">county</span></a> ({{ county_meta['size'] }}).<br>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html b/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
index dc8487f457e..513e869cf2f 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
@@ -64,15 +64,15 @@
     <article class="o-post-preview" lang="{{ post.language }}">
         <div class="m-meta-header">
             {% if show_categories and post.categories.exists()  %}
-            <div class="m-meta-header_item-group">
+            <div class="m-meta-header__item-group">
                 {% import 'v1/includes/macros/category-slug.html' as category_slug %}
                 {% for cat in post.categories.all() %}
-                    <span class="m-meta-header_item">{{ category_slug.render(category=cat.name) }}</span>
+                    <span class="m-meta-header__item">{{ category_slug.render(category=cat.name) }}</span>
                 {% endfor %}
             </div>
             {% endif %}
             {% if show_date %}
-            <div class="m-meta-header_item">
+            <div class="m-meta-header__item">
                 <span class="a-date">
                     {{ date_label | default( '', true ) }}
                     {% if 'EventPage' in post.specific_class.__name__ %}
@@ -92,14 +92,14 @@
         {% if 'EventPage' in post.specific_class.__name__ %}
             {% set event = post.specific %}
             {% if event.venue_image_type != 'none' %}
-                <div class="o-post-preview_image-container">
+                <div class="o-post-preview__image-container">
                     {% if event.venue_image_type == 'map' %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ event.location_image_url() }}"
                              alt="">
                     {% elif event.venue_image_type == 'image' and event.venue_image %}
                         {% set img = image(event.venue_image, 'width-540') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ img.url }}"
                              alt="{{ image_alt_value(img) }}">
                     {% endif %}
@@ -107,7 +107,7 @@
             {% endif %}
         {% endif %}
 
-        <div class="o-post-preview_content">
+        <div class="o-post-preview__content">
         {% if 'EventPage' in post.specific_class.__name__ %}
             {% set event = post.specific %}
             {% if event.start_dt %}
@@ -120,7 +120,7 @@
             {% endif %}
         {% endif %}
 
-            <h3 class="o-post-preview_title">
+            <h3 class="o-post-preview__title">
                 <a href="{{ post_url }}">
                     {{- post.seo_title or post.title -}}
                 </a>
@@ -129,7 +129,7 @@ <h3 class="o-post-preview_title">
             {% if 'EventPage' in post.specific_class.__name__ %}
                 {% set event = post.specific %}
                 {% if event.start_dt %}
-                    <div class="o-post-preview_subtitle">
+                    <div class="o-post-preview__subtitle">
                     {% if event.venue_city and event.venue_state %}
                         {{ event.venue_city }}, {{ event.venue_state }}
                     {% endif %}
@@ -141,17 +141,17 @@ <h3 class="o-post-preview_title">
                 {% endif %}
             {% endif %}
             {% if post.comments_close_date %}
-                <div class="o-post-preview_subtitle">
+                <div class="o-post-preview__subtitle">
                     Comments close {{ time.render(post.comments_close_date, {'date':true}) }}
                 </div>
             {% endif %}
             {% if post.search_description %}
-                <div class="o-post-preview_description">
+                <div class="o-post-preview__description">
                     {{ post.search_description }}
                 </div>
             {% endif %}
             {% if post.get_authors() %}
-                <div class="o-post-preview_byline-group">
+                <div class="o-post-preview__byline-group">
                 {% for author in post.get_authors() %}
                     {% if loop.first %}By {% elif loop.last %}and {% endif %}
                     {{ author.name }}</a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
index ea1b6ca7e5b..063df9fdc13 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
@@ -35,21 +35,21 @@ <h3>Table of contents</h3>
     {% set version_label = " (" + _(version_status) + ")" if version_status else '' %}
     {% set sec_nav_settings_label = sec_nav_settings_label + version_label %}
     <nav class="o-secondary-nav" aria-label="{{ _('Table of contents') }}">
-        <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-            <span class="o-secondary-nav_label">
+        <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+            <span class="o-secondary-nav__label">
                 {{ sec_nav_settings_label }}
             </span>
-            <span class="o-secondary-nav_cues">
-                <span class="o-secondary-nav_cue-open" aria-label="Show">
+            <span class="o-secondary-nav__cues">
+                <span class="o-secondary-nav__cue-open" aria-label="Show">
                     {{ svg_icon('down') }}
                 </span>
-                <span class="o-secondary-nav_cue-close" aria-label="Hide">
+                <span class="o-secondary-nav__cue-close" aria-label="Hide">
                     {{ svg_icon('up') }}
                 </span>
             </span>
         </button>
 
-        <div class="o-secondary-nav_content">
+        <div class="o-secondary-nav__content">
 
         {% if version_status %}
             <p class="u-hide-on-desktop">
@@ -57,16 +57,16 @@ <h3>Table of contents</h3>
             </p>
         {% endif %}
         <div id="ctrl-f"></div>
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents">
             {%- for item in toc_headers %}
             <li>
                 {{ _navlink(item.id + ". " + item.header, item.anchor, true) }}
                 {% if item.children %}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children">
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children">
                     {%- for child in item.children %}
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         {{ _navlink(child.id + ". " + child.header, child.anchor, false) }}
                     </li>
                 {%- endfor %}
@@ -80,9 +80,9 @@ <h3>Table of contents</h3>
 {% endmacro %}
 
 {% macro _navlink(text, href, parent=true, current=false) %}
-<a class="o-secondary-nav_link
-          {{ 'o-secondary-nav_link__parent' if parent else '' }}
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          {{ 'o-secondary-nav__link__parent' if parent else '' }}
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
index baabfd3c20e..ecdba831f31 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
@@ -19,29 +19,29 @@
             {{ '' if any_children else 'o-secondary-nav__no-children' }}"
      aria-label="{{ _('Section navigation') }}">
 
-    <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-        <span class="o-secondary-nav_label">
+    <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+        <span class="o-secondary-nav__label">
             {{ _('Navigate this section') }}
         </span>
-        <span class="o-secondary-nav_cues">
-            <span class="o-secondary-nav_cue-open" aria-label="Show">
+        <span class="o-secondary-nav__cues">
+            <span class="o-secondary-nav__cue-open" aria-label="Show">
                 {{ svg_icon('down') }}
             </span>
-            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                 {{ svg_icon('up') }}
             </span>
         </span>
     </button>
 
-    <div class="o-secondary-nav_content">
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents">
+    <div class="o-secondary-nav__content">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents">
         {%- for item in nav_items %}
             <li data-nav-is-active="{{ item.expanded }}">
                 {{ _navlink(item.title, item.url, true, item.active) }}
             {%- if item.children -%}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children">
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children">
                 {%- for child in item.children -%}
                     <li>
                         {{ _navlink(child.title, child.url, false, child.active) }}
@@ -57,9 +57,9 @@
 {% endmacro %}
 
 {% macro _navlink(text, href, parent=true, current=false) %}
-<a class="o-secondary-nav_link
-          {{ 'o-secondary-nav_link__parent' if parent else '' }}
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          {{ 'o-secondary-nav__link__parent' if parent else '' }}
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
index 9c4bd762d4a..d66d2098b46 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
@@ -20,40 +20,40 @@
 <div class="o-sidebar-breakout
             content__flush-bottom
             wrapper">
-    <div class="content_intro">
+    <div class="content__intro">
         <div class="content-l">
             {% if caller is defined %}
                 {% for block in page.content %}
                     {% if 'text_introduction' in block.block_type %}
-                        <section class="o-sidebar-breakout_col
-                                        content-l_col
-                                        content-l_col-2-3">
+                        <section class="o-sidebar-breakout__col
+                                        content-l__col
+                                        content-l__col-2-3">
                             {{ caller(block) }}
                         </section>
                     {% endif %}
                 {% endfor %}
             {% endif %}
-            <aside class="o-sidebar-breakout_col
-                          content-l_col
-                          content-l_col-1-3
+            <aside class="o-sidebar-breakout__col
+                          content-l__col
+                          content-l__col-1-3
                           block
-                          block__flush-bottom">
+                          block--flush-bottom">
                 {% for block in page.sidebar_breakout %}
                     {% if 'breakout_image' in block.block_type %}
                         {% set blocks = block.value.bound_blocks %}
                         {% if blocks.image is defined %}
                             {% set photo = image(blocks.image.value, 'original') %}
-                            <div class="o-sidebar-breakout_img-container
-                                        {{ 'o-sidebar-breakout_img-container__round'
+                            <div class="o-sidebar-breakout__img-container
+                                        {{ 'o-sidebar-breakout__img-container__round'
                                            if blocks.is_round | string == 'True' else '' }}">
-                              <div class="o-sidebar-breakout_img"
+                              <div class="o-sidebar-breakout__img"
                                    style="background-image:url( {{ photo.url }} )">
                               </div>
                             </div>
                             {% if blocks.heading.value or blocks.body.value %}
-                                <div class="o-sidebar-breakout_text-container">
+                                <div class="o-sidebar-breakout__text-container">
                                 {% if blocks.heading.value %}
-                                    <h4 class="o-sidebar-breakout_text-heading">
+                                    <h4 class="o-sidebar-breakout__text-heading">
                                         {% if blocks.icon %}
                                             {{ svg_icon(blocks.icon) }}
                                         {% endif %}
@@ -61,7 +61,7 @@ <h4 class="o-sidebar-breakout_text-heading">
                                     </h4>
                                 {% endif %}
                                 {% if blocks.body.value %}
-                                    <p class="o-sidebar-breakout_text-body">
+                                    <p class="o-sidebar-breakout__text-body">
                                         {{ blocks.body.render() | safe }}
                                     </p>
                                 {% endif %}
@@ -72,12 +72,12 @@ <h4 class="o-sidebar-breakout_text-heading">
                         {% include_block block %}
                     {% elif 'slug' in block.block_type %}
                         <header class="m-slug-header">
-                            <h2 class="m-slug-header_heading">
+                            <h2 class="m-slug-header__heading">
                                 {{ block.value }}
                             </h2>
                         </header>
                     {% elif 'paragraph' in block.block_type %}
-                        <p class="o-sidebar-breakout_text-body">
+                        <p class="o-sidebar-breakout__text-body">
                             {{ block.value | safe }}
                         </p>
                     {% else %}
@@ -89,5 +89,5 @@ <h2 class="m-slug-header_heading">
         </div>
     </div>
 </div>
-<div class="content_line"></div>
+<div class="content__line"></div>
 {% endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
index 7e2871eb4df..0480cde8e1f 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
@@ -23,12 +23,12 @@
 
 <div class="o-sidebar-contact-info">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Contact Information
         </h2>
     </header>
 
-    <div class="o-sidebar-contact-info_content">
+    <div class="o-sidebar-contact-info__content">
         {% if value.contact.heading %}
             <h3>{{ value.contact.heading }}</h3>
         {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html b/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html
index 6ff59ffe3ee..d9ce92173bd 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/simple-chart.html
@@ -59,7 +59,7 @@ <h5>Figure {{ value.figure_number }}</h5>
          >
     </div>
     <div class="o-simple-chart_tilemap_legend"></div>
-    <p class="m-chart-footnote block__sub block__border-top block short-desc">
+    <p class="m-chart-footnote block--sub block--border-top block short-desc">
         {% if value.source_credits %}<strong>Source:</strong> {{value.source_credits}}<br>{% endif %}
         {% if value.date_published %}<strong>Date Published:</strong> {{value.date_published}}<br>{% endif %}
         {% if value.download_text %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
index 4ca38d9cc7b..5fc25d23cd0 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
@@ -46,17 +46,17 @@
 
     <div class="o-video-player
                 o-video-player__youtube
-                {{- ' o-featured-content-module_visual' if is_fcm else '' }}"
+                {{- ' o-featured-content-module__visual' if is_fcm else '' }}"
          data-id="{{ video_id }}"
          data-src="{{ video_url }}"
          {{- ' data-custom-thumbnail' if thumbnail_url else '' }}>
         {{ caller() | safe if caller else '' }}
-        <div class="o-video-player_video-container
-                    {{- ' o-video-player_video-container__flexible' if not is_fcm else '' }}
+        <div class="o-video-player__video-container
+                    {{- ' o-video-player__video-container__flexible' if not is_fcm else '' }}
                     u-show-on-video-playing">
-            <div class="o-video-player_video-actions-container">
-                <div class="o-video-player_video-actions">
-                    <button class="a-btn o-video-player_close-btn"
+            <div class="o-video-player__video-actions-container">
+                <div class="o-video-player__video-actions">
+                    <button class="a-btn o-video-player__close-btn"
                         aria-label="{{ _('Close video') }}"
                         aria-hidden="true"
                         tabindex="-1">
@@ -74,8 +74,8 @@
                     } ) }}
                 {% endif %}
             </div>
-            <div class="o-video-player_iframe-container">
-                <iframe class="o-video-player_iframe"
+            <div class="o-video-player__iframe-container">
+                <iframe class="o-video-player__iframe"
                     src="{{ video_url }}"
                     allow="fullscreen; autoplay"
                     aria-hidden="true"
@@ -83,12 +83,12 @@
                 </iframe>
             </div>
         </div>
-        <div class="o-video-player_image-container
+        <div class="o-video-player__image-container
                     u-hide-on-video-playing">
 
             {# This link is for the default, no-JavaScript, state of the video player. #}
-            <a class="o-video-player_play-btn
-                      o-video-player_play-btn__{{ button_pos }}"
+            <a class="o-video-player__play-btn
+                      o-video-player__play-btn__{{ button_pos }}"
                href="{{ video_url }}"
                target="_blank"
                rel="noopener noreferrer"
@@ -101,8 +101,8 @@
                 TODO: Figure out how to pull video title from API and put it
                 in aria-label below for screen readers.
             #}
-            <button class="o-video-player_play-btn
-                           o-video-player_play-btn__{{ button_pos }}
+            <button class="o-video-player__play-btn
+                           o-video-player__play-btn__{{ button_pos }}
                            u-hidden"
                     aria-label="{{ _('Play video') }}">
                 {{ svg_icon('play') }}
@@ -119,16 +119,16 @@
                 thumbnail_url or
                 static( 'img/cfpb_video_cover_card_954x200.png' )
             %}
-            <img class="o-video-player_image
-                        {{- ' o-video-player_image__thumbnail' if thumbnail_url else '' }}
-                        {{- ' o-featured-content-module_img' if is_fcm else '' }}"
+            <img class="o-video-player__image
+                        {{- ' o-video-player__image__thumbnail' if thumbnail_url else '' }}
+                        {{- ' o-featured-content-module__img' if is_fcm else '' }}"
                  alt=""
                  src="{{ image_url }}">
 
             {#
                 Provide a duration timestamp in the corner of the video.
             #}
-            <time class="o-video-player_duration u-hidden">00:00</time>
+            <time class="o-video-player__duration u-hidden">00:00</time>
         </div>
     </div>
 {%- endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html b/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
index 6cb4f04d364..81bc2a4e523 100644
--- a/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
+++ b/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
@@ -24,7 +24,7 @@
 
 {% if value.sidefoot_heading %}
     <header class="m-slug-header">
-       <h2 class="m-slug-header_heading">
+       <h2 class="m-slug-header__heading">
            {{ value.sidefoot_heading }}
        </h2>
     </header>
diff --git a/cfgov/v1/jinja2/v1/includes/tags.html b/cfgov/v1/jinja2/v1/includes/tags.html
index 292d5b60034..b537c072f95 100644
--- a/cfgov/v1/jinja2/v1/includes/tags.html
+++ b/cfgov/v1/jinja2/v1/includes/tags.html
@@ -23,19 +23,19 @@
 {% macro render(tags, show_heading=true) %}
 <div class="m-tags">
     {% if show_heading %}
-    <span class="m-tags_heading">
+    <span class="m-tags__heading">
         Topics:
     </span>
     {% endif %}
-    <ul class="m-tags_list" aria-label="Topics">
+    <ul class="m-tags__list" aria-label="Topics">
         {% for tag in tags %}
-        <li class="m-tags_item">
+        <li class="m-tags__item">
             {% if tag.url %}
-            <a href="{{ tag.url }}" class="m-tags_tag">
+            <a href="{{ tag.url }}" class="m-tags__tag">
             {% else %}
-            <span class="m-tags_tag">
+            <span class="m-tags__tag">
             {% endif %}
-                <span class="m-tags_bullet" aria-hidden="true">&bull;</span>
+                <span class="m-tags__bullet" aria-hidden="true">&bull;</span>
                 {{ tag.text }}
             {% if tag.url %}
             </a>
diff --git a/cfgov/v1/jinja2/v1/includes/templates/render_block.html b/cfgov/v1/jinja2/v1/includes/templates/render_block.html
index 2d0c69dbc40..0b4185175d5 100644
--- a/cfgov/v1/jinja2/v1/includes/templates/render_block.html
+++ b/cfgov/v1/jinja2/v1/includes/templates/render_block.html
@@ -2,9 +2,9 @@
    {% set block_classes = ['block'] %}
 
    {% if block.value.has_top_rule_line %}
-      {% do block_classes.append('block__padded-top block__border-top') %}
+      {% do block_classes.append('block--padded-top block--border-top') %}
    {% elif index == 1 %}
-      {% do block_classes.append('block__flush-top') %}
+      {% do block_classes.append('block--flush-top') %}
    {% endif %}
 
    {% if block.block.meta.classname %}
@@ -17,6 +17,6 @@
 
    {# TODO: Rename `has_rule` to `has_bottom_rule_line` #}
    {% if block.value.has_rule %}
-      <div class="a-rule-break block block__sub"></div>
+      <div class="a-rule-break block block--sub"></div>
    {% endif %}
 {% endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/templates/streamfield-sidefoot.html b/cfgov/v1/jinja2/v1/includes/templates/streamfield-sidefoot.html
index 1c9aae4fef2..1cd67d2ec0c 100644
--- a/cfgov/v1/jinja2/v1/includes/templates/streamfield-sidefoot.html
+++ b/cfgov/v1/jinja2/v1/includes/templates/streamfield-sidefoot.html
@@ -5,19 +5,19 @@
 {% macro render(streamfield) %}
     {% for block in streamfield %}
         {% if 'related_posts' in block.block_type %}
-            <div class="block{{ ' block__flush-top' if loop.first else '' }}">
+            <div class="block{{ ' block--flush-top' if loop.first else '' }}">
                 {% include_block block %}
             </div>
         {% elif 'related_metadata' in block.block_type %}
-            <div class="block{{ ' block__flush-top' if loop.first else '' }}">
+            <div class="block{{ ' block--flush-top' if loop.first else '' }}">
                 {{ related_metadata.render(block.value) }}
             </div>
         {% elif 'social_media' in block.block_type %}
-            <div class="block{{ ' block__flush-top' if loop.first else '' }}">
+            <div class="block{{ ' block--flush-top' if loop.first else '' }}">
                 {{ social_media.render(block.value) }}
             </div>
         {% elif 'rss_feed' in block.block_type %}
-            <div class="block{{ ' block__flush-top' if loop.first else '' }}">
+            <div class="block{{ ' block--flush-top' if loop.first else '' }}">
                 {% include_block block %}
             </div>
         {% else %}
diff --git a/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html b/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
index ede5194b237..f425a85215e 100644
--- a/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
+++ b/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
@@ -1,6 +1,6 @@
 <div class="upcoming-events">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Upcoming events
         </h2>
     </header>
diff --git a/cfgov/v1/jinja2/v1/layouts/404.html b/cfgov/v1/jinja2/v1/layouts/404.html
index a1857accc89..8dfc60b52e7 100644
--- a/cfgov/v1/jinja2/v1/layouts/404.html
+++ b/cfgov/v1/jinja2/v1/layouts/404.html
@@ -34,10 +34,10 @@ <h1>404: Page not found</h1>
 
         <aside class="block block__sub">
             <ul class="m-list m-list__horizontal m-list__divider">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
@@ -48,7 +48,7 @@ <h1>404: Page not found</h1>
         <p>Are you sure this is the right web address?
             <a class="a-link a-link__jump"
             href={{"mailto:CFPB_website@consumerfinance.gov?subject=404%20Error%20at%20%22" + request.build_absolute_uri() + "%22"}}>
-                <span class="a-link_text">Let us know</span>
+                <span class="a-link__text">Let us know</span>
             </a>
         </p>
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/500.html b/cfgov/v1/jinja2/v1/layouts/500.html
index 2b9ad7f9482..d03eaca51e1 100644
--- a/cfgov/v1/jinja2/v1/layouts/500.html
+++ b/cfgov/v1/jinja2/v1/layouts/500.html
@@ -34,10 +34,10 @@ <h1>500: Server error</h1>
 
         <aside class="block block__sub">
             <ul class="m-list m-list__horizontal m-list__divider">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
@@ -48,7 +48,7 @@ <h1>500: Server error</h1>
         <p>Are you sure this is the right web address?
             <a class="a-link a-link__jump"
                href={{"mailto:CFPB_website@consumerfinance.gov?subject=500%20Error%20at%20%22" + request.build_absolute_uri() + "%22"}} >
-                <span class="a-link_text">Let us know</span>
+                <span class="a-link__text">Let us know</span>
             </a>
         </p>
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html b/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
index 9cb376ecdf9..6a8f5b82d24 100644
--- a/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
+++ b/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
@@ -3,7 +3,7 @@
 {% endif %}
 
 {% if breadcrumb_items | length > 0 %}
-    <div class="u-layout-grid_breadcrumbs">
+    <div class="u-layout-grid__breadcrumbs">
         {%- import 'v1/includes/molecules/breadcrumbs.html' as breadcrumbs with context -%}
         {{ breadcrumbs.render(breadcrumb_items) }}
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html
index 4283e2722dc..5b425db38ed 100644
--- a/cfgov/v1/jinja2/v1/layouts/base.html
+++ b/cfgov/v1/jinja2/v1/layouts/base.html
@@ -255,7 +255,7 @@
     <div class="a-overlay u-hidden"></div>
 
     <div class="skip-nav">
-        <a class="skip-nav_link"
+        <a class="skip-nav__link"
           href="{% block skip_nav_target %}#main{% endblock %}">
             {{ _('Skip to main content') }}
         </a>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
index 99952324ac1..950fca69dc0 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
@@ -4,7 +4,7 @@
     {# Overrides the default skip nav target of #main so that we skip over the
        left side nav on pages that extend this template and go right to the
        main content area. #}
-    #content_main
+    #content__main
 {%- endblock %}
 
 {% block content scoped %}
@@ -13,18 +13,18 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block hero -%}{%- endblock %}
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
             {% block body_content scoped %}
-                <aside class="u-layout-grid_secondary-nav">
+                <aside class="u-layout-grid__secondary-nav">
                     {% import 'v1/includes/organisms/secondary-nav.html' as secondary_nav with context %}
                     {{ secondary_nav.render() }}
                 </aside>
-                <div class="u-layout-grid_main"
-                        id="content_main">
+                <div class="u-layout-grid__main"
+                        id="content__main">
                     {% block content_main scoped -%}{%- endblock %}
                 </div>
             {% endblock %}
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
index 2e6f7595f37..aace6faf589 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
@@ -6,22 +6,22 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        {% if self.content_intro() %}
+        {% if self.content__intro() %}
             <div class="u-layout_content-intro">
                 {% block content_intro scoped -%}{%- endblock %}
             </div>
         {% endif %}
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
 
             {% block body_content scoped %}
-                <div class="u-layout-grid_main">
+                <div class="u-layout-grid__main">
                     {% block content_main scoped -%}{%- endblock %}
                 </div>
-                <aside class="u-layout-grid_sidebar">
+                <aside class="u-layout-grid__sidebar">
                     {% block content_sidebar scoped -%}{%- endblock %}
                 </aside>
             {% endblock %}
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-full.html b/cfgov/v1/jinja2/v1/layouts/layout-full.html
index e8d519a80d2..ea857e8f2c2 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-full.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-full.html
@@ -10,20 +10,20 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        {% if self.content_intro() %}
+        {% if self.content__intro() %}
             <div class="u-layout_content-intro">
                 {% block content_intro scoped -%}{%- endblock %}
             </div>
         {% endif %}
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
 
             {% block body_content scoped %}
-                {# content_main_modifiers block is only used by the homepage #}
-                <div class="u-layout-grid_main {% block content_main_modifiers -%}{%- endblock %}">
+                {# content__main_modifiers block is only used by the homepage #}
+                <div class="u-layout-grid__main {% block content_main_modifiers -%}{%- endblock %}">
                     {% block content_main scoped -%}{%- endblock %}
                 </div>
             {% endblock %}
diff --git a/cfgov/v1/jinja2/v1/newsroom/index.html b/cfgov/v1/jinja2/v1/newsroom/index.html
index 0e3737c0a1e..3bbd5b15db9 100644
--- a/cfgov/v1/jinja2/v1/newsroom/index.html
+++ b/cfgov/v1/jinja2/v1/newsroom/index.html
@@ -44,8 +44,8 @@
             <div class="content-l">
                 <section class="block
                                 block__flush-top
-                                content-l_col
-                                content-l_col-1-2">
+                                content-l__col
+                                content-l__col-1-2">
                     {% import 'v1/includes/molecules/related-content.html' as related_links %}
                     {{- related_links.render({
                         'heading': 'Related links',
@@ -60,7 +60,7 @@
                         }
                     ]}) -}}
                 </section>
-                <section class="block content-l_col content-l_col-1-2">
+                <section class="block content-l__col content-l__col-1-2">
                     {% include 'v1/includes/templates/upcoming-events.html' %}
                 </section>
             </div>
diff --git a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
index dd7cea9908d..7ad0a95b68e 100644
--- a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
+++ b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
@@ -3,7 +3,7 @@
 {% block post_article_content %}
     <aside class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Press information
             </h2>
         </header>
diff --git a/cfgov/v1/jinja2/v1/template_debug.html b/cfgov/v1/jinja2/v1/template_debug.html
index 0ea8064a0f5..5794fcfab4f 100644
--- a/cfgov/v1/jinja2/v1/template_debug.html
+++ b/cfgov/v1/jinja2/v1/template_debug.html
@@ -41,7 +41,7 @@ <h1>{{ debug_template_name }}</h1>
         {% endif %}
 
         {% for name, rendered in debug_test_cases | items %}
-        <div class="content_line"></div>
+        <div class="content__line"></div>
         <div id="{{ name | slugify }}" class="test-case">
             <h2>
                 {{ name }}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html b/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
index 79b8e11cb3e..b4d1c01a8e3 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
@@ -1,6 +1,6 @@
 <div class="block">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">{{ _('Legal disclaimer') }}</h2>
+        <h2 class="m-slug-header__heading">{{ _('Legal disclaimer') }}</h2>
     </header>
     <p>
         {{ _('The content on this page provides general consumer information.') }}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
index 7d8177e3252..94dd0cc652e 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="m-notification_message">
+    <div class="m-notification__content">
+        <div class="m-notification__message">
             This form is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/wellbeing/jinja2/wellbeing/about.html b/cfgov/wellbeing/jinja2/wellbeing/about.html
index b01b42e7e02..1a5deb0c8ae 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/about.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/about.html
@@ -93,7 +93,7 @@ <h2>{{ _('Why doesn’t this questionnaire ask about financial details?') }}</h2
     {% if (current_language == 'en') %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     For further reading and research
                 </h2>
             </header>
@@ -121,7 +121,7 @@ <h2 class="m-slug-header_heading">
 
         <div class="block">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Materials are publicly available for use at no cost
                 </h2>
             </header>
@@ -137,7 +137,7 @@ <h2 class="m-slug-header_heading">
                         a-link__icon
                         a-link__icon-after-text"
                 href="https://cfpb.github.io/design-system/foundation/logo">
-                    <span class="a-link_text">name and logo guidelines</span>
+                    <span class="a-link__text">name and logo guidelines</span>
                     {{ svg_icon('external-link') -}}
                 </a>.
             </p>
@@ -149,7 +149,7 @@ <h2 class="m-slug-header_heading">
     {% else %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">Recursos Adicionales</h2>
+                <h2 class="m-slug-header__heading">Recursos Adicionales</h2>
             </header>
             <p>
                 <a href="https://files.consumerfinance.gov/f/documents/201701_cfpb_FinancialWell-Being_Quick-Guide-Spanish.pdf">Escala de Bienestar Financiero del CFPB</a>:
diff --git a/cfgov/wellbeing/jinja2/wellbeing/home.html b/cfgov/wellbeing/jinja2/wellbeing/home.html
index a4ca5bca17b..fe59a965bd8 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/home.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/home.html
@@ -25,7 +25,7 @@
         .m-hero {
             background-color: #7eb7e8;
         }
-        .m-hero_image {
+        .m-hero__image {
             background-image: url( '{{ static("apps/financial-well-being/img/fwb_hero_826x380.png") }}' );
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ static("apps/financial-well-being/img/fwb_hero_826x380.png") }}',
@@ -38,17 +38,17 @@
 
 {% block content_intro -%}
     <section class="m-hero">
-        <div class="m-hero_wrapper wrapper">
-            <div class="m-hero_text">
-                <h1 class="m-hero_heading">{{ _('Find out your financial well-being') }}</h1>
-                <div class="m-hero_subhead">
+        <div class="m-hero__wrapper wrapper">
+            <div class="m-hero__text">
+                <h1 class="m-hero__heading">{{ _('Find out your financial well-being') }}</h1>
+                <div class="m-hero__subhead">
                     <p>
                         {{ _('Answer ten questions to measure your current financial well-being and see steps you can take to improve it.') }}
                     </p>
                 </div>
             </div>
-            <div class="m-hero_image-wrapper">
-                <div class="m-hero_image"></div>
+            <div class="m-hero__image-wrapper">
+                <div class="m-hero__image"></div>
             </div>
         </div>
     </section>
@@ -95,13 +95,13 @@ <h2>{{ _('Here’s how it works:') }}</h2>
                         m-notification__visible
                         m-notification__warning">
                 {{ svg_icon('warning-round') }}
-                <div class="m-notification_content">
-                    <p class="m-notification_message">
+                <div class="m-notification__content">
+                    <p class="m-notification__message">
                         {{ _('We never collect or store the answers you provide.') }}
                     </p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link"
+                        <li class="m-list__item">
+                            <a class="m-list__link"
                             href="/privacy/website-privacy-policy/">
                                 {{ _('See how your privacy is protected.') }}
                             </a>
@@ -115,7 +115,7 @@ <h2>{{ _('Here’s how it works:') }}</h2>
             <div class="block">
                 <h2>{{ _('Part 1: How well does this statement describe you or your situation?') }}</h2>
                 <div class="o-well">
-                    <fieldset class="o-form_fieldset o-scale" id="question_1">
+                    <fieldset class="o-form__fieldset o-scale" id="question_1">
                         <h3 class="a-legend">
                             {{ _('I could handle a major unexpected expense') }}
                         </h3>
@@ -188,7 +188,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_2">
+                    <fieldset class="o-form__fieldset o-scale" id="question_2">
                         <h3 class="a-legend">
                             {{ _('I am securing my financial future') }}
                         </h3>
@@ -261,7 +261,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_3">
+                    <fieldset class="o-form__fieldset o-scale" id="question_3">
                         <h3 class="a-legend">
                             {{ _('Because of my money situation, I feel like I will never have the things I want in life') }}
                         </h3>
@@ -334,7 +334,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_4">
+                    <fieldset class="o-form__fieldset o-scale" id="question_4">
                         <h3 class="a-legend">
                             {{ _('I can enjoy life because of the way I’m managing my money') }}
                         </h3>
@@ -407,7 +407,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_5">
+                    <fieldset class="o-form__fieldset o-scale" id="question_5">
                         <h3 class="a-legend">
                             {{ _('I am just getting by financially') }}
                         </h3>
@@ -480,7 +480,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_6">
+                    <fieldset class="o-form__fieldset o-scale" id="question_6">
                         <h3 class="a-legend">
                             {{ _('I am concerned that the money I have or will save won’t last') }}
                         </h3>
@@ -558,7 +558,7 @@ <h3 class="a-legend">
             <div class="block">
                 <h2>{{ _('Part 2: How often does this statement apply to you?') }}</h2>
                 <div class="o-well">
-                    <fieldset class="o-form_fieldset o-scale" id="question_7">
+                    <fieldset class="o-form__fieldset o-scale" id="question_7">
                         <h3 class="a-legend">
                             {{ _('Giving a gift for a wedding, birthday or other occasion would put a strain on my finances for the month') }}
                         </h3>
@@ -631,7 +631,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_8">
+                    <fieldset class="o-form__fieldset o-scale" id="question_8">
                         <h3 class="a-legend">
                             {{ _('I have money left over at the end of the month') }}
                         </h3>
@@ -703,7 +703,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_9">
+                    <fieldset class="o-form__fieldset o-scale" id="question_9">
                         <h3 class="a-legend">
                             {{ _('I am behind with my finances') }}
                         </h3>
@@ -776,7 +776,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_10">
+                    <fieldset class="o-form__fieldset o-scale" id="question_10">
                         <h3 class="a-legend">
                             {{ _('My finances control my life') }}
                         </h3>
@@ -854,13 +854,13 @@ <h3 class="a-legend">
             <div class="block u-mb30">
                 <h2>{{ _('About you') }}</h2>
                 <div class="o-well">
-                    <div class="o-form_group">
-                        <fieldset class="o-form_fieldset" id="age">
+                    <div class="o-form__group">
+                        <fieldset class="o-form__fieldset" id="age">
                             <h3 class="a-legend">
                                 {{ _('Select your age group. This changes the scoring calculation.') }}
                             </h3>
                             <ul class="m-list m-list__unstyled content-l">
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -875,7 +875,7 @@ <h3 class="a-legend">
                                         </label>
                                     </div>
                                 </li>
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -894,12 +894,12 @@ <h3 class="a-legend">
                         </fieldset>
                     </div>
                     <div>
-                        <fieldset class="o-form_fieldset" id="method">
+                        <fieldset class="o-form__fieldset" id="method">
                             <h3 class="a-legend">
                                 {{ _('Select how you completed the questionnaire. This changes the scoring calculation.') }}
                             </h3>
                             <ul class="m-list m-list__unstyled content-l">
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -915,7 +915,7 @@ <h3 class="a-legend">
                                         </label>
                                     </div>
                                 </li>
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -937,7 +937,7 @@ <h3 class="a-legend">
             </div>
 
             <div class="block block__flush-top">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <input class="submit-quiz a-btn"
                         id="submit-quiz"
                         type="submit"
@@ -960,20 +960,20 @@ <h3>{{ _('About us') }}</h3>
             {{ _('a U.S. government agency that makes sure banks, lenders, and other financial companies treat you fairly.') }}
         </p>
         <a class="a-link a-link__jump" href="/about-us/the-bureau/">
-            <span class="a-link_text">{{ _('Learn how the CFPB can help you') }}</span>
+            <span class="a-link__text">{{ _('Learn how the CFPB can help you') }}</span>
         </a>
     </div>
 
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">{{ _('About this questionnaire') }}</h2>
+            <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
         </header>
         <p>
             {{ _('CFPB researchers developed the questionnaire and a way to score it, as a tool to help measure your current financial well-being—') }}
             {{ _('that is, how well your current money situation is providing you with financial security and freedom of choice, today and for the future.') }}
         </p>
         <a class="a-link a-link__jump" href="{{ url('fwb_about_' + current_language) }}">
-            <span class="a-link_text">{{ _('See more background') }}</span>
+            <span class="a-link__text">{{ _('See more background') }}</span>
         </a>
     </div>
 
diff --git a/cfgov/wellbeing/jinja2/wellbeing/results.html b/cfgov/wellbeing/jinja2/wellbeing/results.html
index 13a379faf4a..4553de05d72 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/results.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/results.html
@@ -87,24 +87,24 @@ <h1>{{ _('Your financial well-being score') }}</h1>
     </p>
 
     <ul class="save-links m-list m-list__horizontal">
-        <li class="m-list_item u-js-only">
-            <a class="m-list_link
+        <li class="m-list__item u-js-only">
+            <a class="m-list__link
                       a-link
                       a-link__icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
-                <span class="a-link_text">{{ _('Print') }}</span>
+                <span class="a-link__text">{{ _('Print') }}</span>
             </a>
         </li>
-        <li class="m-list_item">
-            <a class="m-list_link
+        <li class="m-list__item">
+            <a class="m-list__link
                       a-link
                       a-link__icon"
                href="../../save-as-pdf-instructions/"
                target="_blank"
                rel="noopener noreferrer">
                 {{ svg_icon('download') }}
-                <span class="a-link_text">{{ _('Save as PDF') }}</span>
+                <span class="a-link__text">{{ _('Save as PDF') }}</span>
             </a>
         </li>
     </ul>
@@ -152,20 +152,20 @@ <h2>{{ _('Your result') }}</h2>
     {% if user_score %}
         <div class="o-expandable
                     o-expandable__border">
-            <button class="o-expandable_header">
-                <span class="o-expandable_label">
+            <button class="o-expandable__header">
+                <span class="o-expandable__label">
                     {{ _('Review your answers') }}
                 </span>
-                <span class="o-expandable_cues">
-                    <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                <span class="o-expandable__cues">
+                    <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                         {{ svg_icon('plus-round') }}
                     </span>
-                    <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                    <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                         {{ svg_icon('minus-round') }}
                     </span>
                 </span>
             </button>
-            <div class="o-expandable_content">
+            <div class="o-expandable__content">
                 <table>
                     <thead>
                         <tr>
@@ -194,7 +194,7 @@ <h2>{{ _('What would you like to do next?') }}</h2>
         </p>
 
         <div class="content-l u-mt30 u-mb30">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <h3>{{ _('Take control of day-to-day money management') }}</h3>
                 <ul>
                     <li>
@@ -203,14 +203,14 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_bill-calendar.pdf">
-                            <span class="a-link_text">{{ _('bill calendar') }}</span>
+                            <span class="a-link__text">{{ _('bill calendar') }}</span>
                             {{ svg_icon('download') }}
                         </a>
                         {{ _('and') }}
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_spending-tracker.pdf">
-                            <span class="a-link_text">{{ _('spending tracker') }}</span>
+                            <span class="a-link__text">{{ _('spending tracker') }}</span>
                             {{ svg_icon('download') }}
                         </a>
                         {{ _('to see and manage your everyday expenses.') }}
@@ -222,7 +222,7 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_debt-worksheet.pdf">
-                            <span class="a-link_text">debt log</span>
+                            <span class="a-link__text">debt log</span>
                             {{ svg_icon('download') }}
                         </a>
                         and find templates to help you communicate with
@@ -246,7 +246,7 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                 </ul>
             </div>
 
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <h3>{{ _('Get on track for your financial future') }}</h3>
                 {% if (current_language == 'en') %}
                 <ul>
@@ -261,14 +261,14 @@ <h3>{{ _('Get on track for your financial future') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/201705_cfpb_My-New-Money-Goal.pdf">
-                            <span class="a-link_text">worksheet</span>
+                            <span class="a-link__text">worksheet</span>
                             {{ svg_icon('download') }}
                         </a>
                         or
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_monthly-budget.pdf">
-                            <span class="a-link_text">budgeting tool</span>
+                            <span class="a-link__text">budgeting tool</span>
                             {{ svg_icon('download') }}
                         </a>.
                     </li>
@@ -475,35 +475,35 @@ <h4>{{ _('Compare by') }}</h4>
     {% if (current_language == 'en') %}
     <div class="block block__flush-top">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">Looking for more help?</h2>
+            <h2 class="m-slug-header__heading">Looking for more help?</h2>
         </header>
         <p>
             You can further explore the tips, tools, answers, and resources
             in our Consumer Tools section, including:
         </p>
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/debt-collection/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/debt-collection/">
                   Debt collection
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/student-loans/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/student-loans/">
                   Student loans
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/credit-reports-and-scores/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/credit-reports-and-scores/">
                   Credit reports and scores
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/ask-cfpb/category-credit-cards/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/ask-cfpb/category-credit-cards/">
                   Credit cards
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/mortgages/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/mortgages/">
                   Mortgages
                 </a>
             </li>
@@ -512,14 +512,14 @@ <h2 class="m-slug-header_heading">Looking for more help?</h2>
     {% endif %}
     <div class="block block__flush-top">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">{{ _('About this questionnaire') }}</h2>
+            <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
         </header>
         <p>
             {{ _('CFPB researchers developed the questionnaire and a way to score it, as a tool to help measure your current financial well-being—') }}
             {{ _('that is, how well your current money situation is providing you with financial security and freedom of choice, today and for the future.') }}
         </p>
         <a class="a-link a-link__jump" href="{{ url('fwb_about_' + current_language) }}">
-            <span class="a-link_text">{{ _('See more background') }}</span>
+            <span class="a-link__text">{{ _('See more background') }}</span>
         </a>
     </div>
 
diff --git a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
index 547e8987914..c447bf349db 100644
--- a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
+++ b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
@@ -2,7 +2,7 @@
 
 {{
   checkbox.render({
-    'class': 'content-l_col-1-2 m-form-field__lg-target a-yes-cbg-checkbox',
+    'class': 'content-l__col-1-2 m-form-field__lg-target a-yes-cbg-checkbox',
     'label': value.item,
     'value': value.item,
     'behavior': 'checklist_array_item'
diff --git a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
index 7dab0638828..bdf5ad5a008 100644
--- a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
+++ b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
@@ -17,13 +17,13 @@
    ========================================================================== #}
 
 <div class="cbg-checklist">
-  <div class="block block__sub u-hidden cbg-checklist-error">
+  <div class="block block--sub u-hidden cbg-checklist-error">
     <div class="m-notification
                 m-notification__visible
                 m-notification__error">
       {{ svg_icon('error-round') }}
-      <div class="m-notification_content">
-        <div class="m-notification_message">Choose at least one goal.</div>
+      <div class="m-notification__content">
+        <div class="m-notification__message">Choose at least one goal.</div>
       </div>
     </div>
   </div>
@@ -40,7 +40,7 @@
   </div>
 
   <button class="u-mt15 u-mb30 a-btn js-cbg-print">Print my checklist</button>
-  <div class="content_line"></div>
+  <div class="content__line"></div>
 </div>
 
 <div class="cbg-print-paper u-hidden">
@@ -48,9 +48,9 @@ <h2>My Car-Buying Checklist</h2>
   <p>
     There’s a lot to consider when buying a car. Focus on a few goals first, and once you’ve had a chance to complete these goals, revisit the original checklist and decide what you’d like to focus on next.
   </p>
-  <div class="block block__sub">
+  <div class="block block--sub">
     <h3>I'm working on these goals first:</h3>
-    <table class="block block__sub cbg-print-goals" width="100%">
+    <table class="block block--sub cbg-print-goals" width="100%">
       <thead>
         <tr>
           <th>Goals</th>
@@ -61,10 +61,10 @@ <h3>I'm working on these goals first:</h3>
     </table>
   </div>
 
-  <div class="block block__flush-bottom">
+  <div class="block block--flush-bottom">
     <h3>I’ll consider these goals next:</h3>
 
-    <table class="block block__sub cbg-print-next-steps" width="100%">
+    <table class="block block--sub cbg-print-next-steps" width="100%">
       <thead>
         <tr>
           <th>Goals to consider next:</th>
diff --git a/docs/atomic-structure.md b/docs/atomic-structure.md
index 579edd07e43..aab749b3182 100644
--- a/docs/atomic-structure.md
+++ b/docs/atomic-structure.md
@@ -57,8 +57,8 @@ Prefixed with `m-` in class names.
          m-notification__error"
 >
   {{ svg_icon('error') }}
-  <div class="m-notification_content" role="alert">
-    <div class="m-notification_message">Page not found.</div>
+  <div class="m-notification__content" role="alert">
+    <div class="m-notification__message">Page not found.</div>
   </div>
 </div>
 ```
@@ -111,8 +111,8 @@ Prefixed with `o-` in class names.
 
 ```html
 <div class="o-expandable">
-  <button class="o-expandable_header">
-    <div class="o-expandable_label">…</div>
+  <button class="o-expandable__header">
+    <div class="o-expandable__label">…</div>
   </button>
 </div>
 ```
diff --git a/docs/editing-components.md b/docs/editing-components.md
index 1bbabac1ef2..8dafe7fcd9b 100644
--- a/docs/editing-components.md
+++ b/docs/editing-components.md
@@ -222,13 +222,13 @@ this is what its Jinja2 template looks like (comments excluded):
 <div class="m-related-content">
   {% if value.heading %}
   <header class="m-slug-header">
-    <h2 class="m-slug-header_heading">{{ value.heading }}</h2>
+    <h2 class="m-slug-header__heading">{{ value.heading }}</h2>
   </header>
   {% endif %} {{ value.paragraph | safe }} {% if value.links %}
   <ul class="m-list m-list__links">
     {% for link in value.links %}
-    <li class="m-list_item">
-      <a href="{{ link.url }}" class="m-list_link">{{ link.text }}</a>
+    <li class="m-list__item">
+      <a href="{{ link.url }}" class="m-list__link">{{ link.text }}</a>
     </li>
     {% endfor %}
   </ul>
diff --git a/docs/functional-testing.md b/docs/functional-testing.md
index 398b58db84c..7a84af9c224 100644
--- a/docs/functional-testing.md
+++ b/docs/functional-testing.md
@@ -47,7 +47,7 @@ export default class ConsumerTools {
     });
   }
   successNotification() {
-    return cy.get('.m-notification_message');
+    return cy.get('.m-notification__message');
   }
 }
 ```
diff --git a/docs/javascript-unit-tests.md b/docs/javascript-unit-tests.md
index 76b72364156..d31571aa263 100644
--- a/docs/javascript-unit-tests.md
+++ b/docs/javascript-unit-tests.md
@@ -543,8 +543,8 @@ import Notification from '../../../../cfgov/unprocessed/js/molecules/Notificatio
 const HTML_SNIPPET = `
   <div class="m-notification">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"></svg>
-    <div class="m-notification_content">
-      <div class="m-notification_message">Notification content</div>
+    <div class="m-notification__content">
+      <div class="m-notification__message">Notification content</div>
     </div>
   </div>
 `;
diff --git a/docs/wagtail-pages.md b/docs/wagtail-pages.md
index 96bf3f03fd5..a3d427bd38b 100644
--- a/docs/wagtail-pages.md
+++ b/docs/wagtail-pages.md
@@ -194,7 +194,7 @@ This is done by overriding the `template` attribute on the page model.
 For example, the [interactive regulations landing page](https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/regulations3k/models/pages.py)
 includes a customized list of recently issued notices that gets loaded dynamically from the Federal Register.
 To do this it provides its own template that inherits from our base templates
-and overrides the `content_sidebar` block to include a separate `recent_notices` template:
+and overrides the `content__sidebar` block to include a separate `recent_notices` template:
 
 ```python
 from v1.models import CFGOVPage
diff --git a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
index 9fa896752f1..9d93a63dd05 100644
--- a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
+++ b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
@@ -44,11 +44,11 @@ export class FilingInstructionGuide {
   }
 
   getMobileTOCHeader() {
-    return cy.get('.o-fig_sidebar .o-secondary-nav_header');
+    return cy.get('.o-fig_sidebar .o-secondary-nav__header');
   }
 
   getMobileTOCBody() {
-    return cy.get('.o-secondary-nav_content');
+    return cy.get('.o-secondary-nav__content');
   }
 
   goToSection(section) {
@@ -56,7 +56,7 @@ export class FilingInstructionGuide {
   }
 
   getNavItem(section) {
-    return cy.get(`a.o-secondary-nav_link[href="#${section}"]`);
+    return cy.get(`a.o-secondary-nav__link[href="#${section}"]`);
   }
 
   clickNavItem(section) {
@@ -76,7 +76,7 @@ export class FilingInstructionGuide {
   }
 
   toggleToc() {
-    return cy.get('.o-secondary-nav_header').click();
+    return cy.get('.o-secondary-nav__header').click();
   }
 
   scrollToBottom() {
diff --git a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
index b99eff70735..3733b4bb57e 100644
--- a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
+++ b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
@@ -45,16 +45,16 @@ describe('1071 Filing Instruction Guide (FIG)', () => {
             fig.goToSection(4);
             fig
               .getNavItem(1)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(2)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(3)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(4)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
           });
 
           it('should auto-expand subsections', () => {
@@ -87,37 +87,37 @@ describe('1071 Filing Instruction Guide (FIG)', () => {
             fig.clickSectionHeading(1);
             fig
               .getNavItem(1)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('not.be.visible');
 
             fig.clickSectionHeading(3);
             fig
               .getNavItem(3)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading('application-method');
             fig
               .getNavItem('application-method')
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading(5);
             fig
               .getNavItem(5)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('not.be.visible');
 
             fig.clickSectionHeading(3);
             fig
               .getNavItem(3)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading('action-taken');
             fig
               .getNavItem('action-taken')
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
           });
 
diff --git a/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js b/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
index 283f9bf591e..9c615899528 100644
--- a/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
+++ b/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
@@ -24,6 +24,6 @@ export class EmailSignup {
   }
 
   successNotification() {
-    return cy.get('.m-notification_message');
+    return cy.get('.m-notification__message');
   }
 }
diff --git a/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
index 56404a006f9..8af2a84c7c0 100644
--- a/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
@@ -42,7 +42,7 @@ export class Filter {
   clickCategory(option) {
     const sel = `[data-option=${option}`;
     cy.get('[data-cy=categories-heading]').click();
-    cy.get('.o-multiselect_options').should('be.visible');
+    cy.get('.o-multiselect__options').should('be.visible');
     return cy.get(sel).click();
   }
 
@@ -73,7 +73,7 @@ export class Filter {
   }
 
   expandableTarget() {
-    return cy.get('.o-expandable_header');
+    return cy.get('.o-expandable__header');
   }
 
   search() {
diff --git a/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
index cea7fc92501..43600b6988f 100644
--- a/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
@@ -33,38 +33,38 @@ export class FilterableListControl {
 
   getResultCategoryHasTags() {
     return this.getResults()
-      .find('.m-tags_tag')
+      .find('.m-tags__tag')
       .closest('.o-post-preview')
-      .find('.m-meta-header_item:first');
+      .find('.m-meta-header__item:first');
   }
 
   getResultTagHasCategories() {
     return this.getResults()
-      .find('.m-meta-header_item:first')
+      .find('.m-meta-header__item:first')
       .closest('.o-post-preview')
-      .find('.m-tags_tag:first');
+      .find('.m-tags__tag:first');
   }
 
   getResultTag() {
-    return this.getResults().find('.m-tags_tag:first');
+    return this.getResults().find('.m-tags__tag:first');
   }
 
   getResultTitleHasTag() {
     return this.getResults()
-      .find('.m-tags_tag:first')
+      .find('.m-tags__tag:first')
       .closest('.o-post-preview')
-      .find('.o-post-preview_title:first');
+      .find('.o-post-preview__title:first');
   }
 
   getResultCategory() {
-    return this.getResults().find('.m-meta-header_item:first');
+    return this.getResults().find('.m-meta-header__item:first');
   }
 
   getResultTitleHasCategory() {
     return this.getResults()
-      .find('.m-meta-header_item:first')
+      .find('.m-meta-header__item:first')
       .closest('.o-post-preview')
-      .find('.o-post-preview_title:first');
+      .find('.o-post-preview__title:first');
   }
 
   resultsHeaderContent() {
@@ -72,7 +72,7 @@ export class FilterableListControl {
   }
 
   resultsContent() {
-    return this.getResults().find('.o-post-preview_content');
+    return this.getResults().find('.o-post-preview__content');
   }
 
   firstResultContent() {
@@ -80,7 +80,7 @@ export class FilterableListControl {
   }
 
   resultTitle() {
-    return cy.get('.o-post-preview_title:first');
+    return cy.get('.o-post-preview__title:first');
   }
 
   lastResultContent() {
@@ -89,12 +89,12 @@ export class FilterableListControl {
 
   resultsHeaderLeft() {
     return cy.get(
-      `.o-post-preview .m-meta-header_item-group .m-meta-header_item:first`,
+      `.o-post-preview .m-meta-header__item-group .m-meta-header__item:first`,
     );
   }
 
   resultsHeaderRight() {
-    return cy.get(`.o-post-preview .m-meta-header_item`);
+    return cy.get(`.o-post-preview .m-meta-header__item`);
   }
 
   firstResultHeader() {
@@ -122,10 +122,10 @@ export class FilterableListControl {
   }
 
   showFilters() {
-    return cy.get('.o-filterable-list .o-expandable_cue-open').click();
+    return cy.get('.o-filterable-list .o-expandable__cue-open').click();
   }
 
   hideFilters() {
-    return cy.get('.o-expandable_cue-close').click();
+    return cy.get('.o-expandable__cue-close').click();
   }
 }
diff --git a/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
index d7e51a25e58..dca078bf58a 100644
--- a/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
@@ -37,6 +37,6 @@ export class FilterableList {
   }
 
   selectedTopics() {
-    return cy.get('.o-multiselect_choices > li');
+    return cy.get('.o-multiselect__choices > li');
   }
 }
diff --git a/test/cypress/integration/components/footer/footer-helpers.cy.js b/test/cypress/integration/components/footer/footer-helpers.cy.js
index ae393bfd788..c9eb8739b2c 100644
--- a/test/cypress/integration/components/footer/footer-helpers.cy.js
+++ b/test/cypress/integration/components/footer/footer-helpers.cy.js
@@ -4,11 +4,11 @@ export class Footer {
   }
 
   topButton() {
-    return this.footer().get('.o-footer_top-button');
+    return this.footer().get('.o-footer__top-button');
   }
 
   navList() {
-    return this.footer().get('.o-footer_nav-list');
+    return this.footer().get('.o-footer__nav-list');
   }
 
   middle(position) {
@@ -17,13 +17,13 @@ export class Footer {
 
   links() {
     return cy.get(
-      '.o-footer_nav-list a, .o-footer-middle-left a,' +
-        ' .o-footer-middle-right a, .m-social-media_icons a',
+      '.o-footer__nav-list a, .o-footer-middle-left a,' +
+        ' .o-footer-middle-right a, .m-social-media__icons a',
     );
   }
 
   socialMediaIcons() {
-    return this.footer().get('.m-social-media_icons');
+    return this.footer().get('.m-social-media__icons');
   }
 
   officialWebsite() {
diff --git a/test/cypress/integration/components/header/header-helpers.cy.js b/test/cypress/integration/components/header/header-helpers.cy.js
index f1ab26786f6..e189ec4b23a 100644
--- a/test/cypress/integration/components/header/header-helpers.cy.js
+++ b/test/cypress/integration/components/header/header-helpers.cy.js
@@ -1,10 +1,10 @@
 export class Header {
   headerContent() {
-    return cy.get('.o-header_content');
+    return cy.get('.o-header__content');
   }
 
   headerLogo() {
-    return cy.get('.o-header_logo-img');
+    return cy.get('.o-header__logo-img');
   }
 
   /* Overlay is technically outside of the header,
diff --git a/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js b/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
index 044e0b7b828..59fb40f9df6 100644
--- a/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
+++ b/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
@@ -9,7 +9,7 @@ export class Multiselect {
   }
 
   clickAway() {
-    return cy.get('.o-expandable_content').click({ force: true });
+    return cy.get('.o-expandable__content').click({ force: true });
   }
 
   multiSelect(name) {
diff --git a/test/cypress/integration/components/pagination/pagination-helpers.cy.js b/test/cypress/integration/components/pagination/pagination-helpers.cy.js
index d80beea9db5..40d2608baca 100644
--- a/test/cypress/integration/components/pagination/pagination-helpers.cy.js
+++ b/test/cypress/integration/components/pagination/pagination-helpers.cy.js
@@ -4,15 +4,15 @@ export class Pagination {
   }
 
   enter(name) {
-    cy.get('#m-pagination_current-page-0').clear({ force: true });
-    cy.get('#m-pagination_current-page-0').type(name);
+    cy.get('#m-pagination__current-page-0').clear({ force: true });
+    cy.get('#m-pagination__current-page-0').type(name);
     cy.get('.m-pagination').within(() => {
-      cy.get('.m-pagination_form').submit();
+      cy.get('.m-pagination__form').submit();
     });
   }
 
   lastResults() {
-    cy.get('.m-pagination_form .u-visually-hidden')
+    cy.get('.m-pagination__form .u-visually-hidden')
       .invoke('text')
       .then(($el) => {
         const lastPage = $el.toString().trim().split(' ')[3];
@@ -21,7 +21,7 @@ export class Pagination {
   }
 
   currentPageLabel() {
-    cy.get('label[for="m-pagination_current-page-0"]');
+    cy.get('label[for="m-pagination__current-page-0"]');
   }
 
   paginationLabel() {
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
index f1e4f48c64e..159c1de0ccd 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
@@ -6,10 +6,10 @@ export class AskCfpbAnswerPage {
   }
 
   getFirstLinkInSummary() {
-    return cy.get('.o-summary_content a').first();
+    return cy.get('.o-summary__content a').first();
   }
 
   getSummaryBtn() {
-    return cy.get('.o-summary_btn');
+    return cy.get('.o-summary__btn');
   }
 }
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
index df2d71b95fa..9681cd53b3d 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
@@ -65,32 +65,37 @@ describe('Ask CFPB', () => {
       });
 
       it('should hide content on mobile', () => {
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-transition',
         );
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-summary',
         );
-        cy.get('.o-summary_content').invoke('outerHeight').should('be.lte', 92);
+        cy.get('.o-summary__content')
+          .invoke('outerHeight')
+          .should('be.lte', 92);
         answerPage.getFirstLinkInSummary().should('not.be.visible');
         answerPage.getSummaryBtn().click();
         answerPage.getFirstLinkInSummary().should('be.visible');
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-transition',
         );
-        cy.get('.o-summary_content').should('not.have.class', 'u-no-animation');
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
+          'not.have.class',
+          'u-no-animation',
+        );
+        cy.get('.o-summary__content').should(
           'not.have.class',
           'u-max-height-summary',
         );
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-default',
         );
-        cy.get('.o-summary_content').invoke('outerHeight').should('be.gt', 92);
+        cy.get('.o-summary__content').invoke('outerHeight').should('be.gt', 92);
       });
     });
   });
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
index 6b79185a8b0..946c0ec4ea8 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
@@ -13,7 +13,7 @@ export class AskCfpbSearch {
   }
 
   autocomplete() {
-    return cy.get('.m-autocomplete_results');
+    return cy.get('.m-autocomplete__results');
   }
 
   submitButton() {
diff --git a/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js b/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
index 9d6c72dac47..bcd92bc8103 100644
--- a/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
@@ -27,7 +27,7 @@ export class ExploreCreditCards {
   }
 
   openFilterExpandable() {
-    cy.get('.o-filterable-list-controls button.o-expandable_header').click();
+    cy.get('.o-filterable-list-controls button.o-expandable__header').click();
   }
 
   clickShowMoreButton() {
diff --git a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
index 18e999c52ee..360bbca1549 100644
--- a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
@@ -8,7 +8,7 @@ export class ObtenerRespuestasBuscar {
   }
 
   autocomplete() {
-    return cy.get('.m-autocomplete_results');
+    return cy.get('.m-autocomplete__results');
   }
 
   search() {
diff --git a/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js b/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
index e3c777defa5..61da86fc718 100644
--- a/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
+++ b/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
@@ -22,7 +22,7 @@ export class PrepaidAgreementsSearch {
   }
 
   filtersForm() {
-    return cy.get('.content_sidebar').find('form');
+    return cy.get('.content__sidebar').find('form');
   }
 
   applyFilters() {
diff --git a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
index 5e5f51ce68c..74886417c39 100644
--- a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
+++ b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
@@ -1,7 +1,7 @@
 export default `
 <main class="u-layout-grid u-layout-grid__1-3 o-fig" id="main">
-    <div class="u-layout-grid_wrapper">
-        <div class="u-layout-grid_breadcrumbs">
+    <div class="u-layout-grid__wrapper">
+        <div class="u-layout-grid__breadcrumbs">
             <nav class="breadcrumbs" aria-label="Breadcrumbs">
                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__left" viewBox="0 0 10 19">
                     <path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path>
@@ -10,24 +10,24 @@ export default `
                 <a href="/data-research/small-business-lending/filing-instructions-guide/"> Small Business Lending Rule Filing Instructions Guides </a>
             </nav>
         </div>
-        <aside class="u-layout-grid_secondary-nav u-layout-grid_secondary-nav__sticky">
+        <aside class="u-layout-grid__secondary-nav u-layout-grid__secondary-nav__sticky">
             <div class="o-fig_sidebar">
                 <div class="u-hide-on-tablet">
                     <h3>Table of contents</h3>
                 </div>
                 <nav class="o-secondary-nav" aria-label="Table of contents" data-js-hook="state_atomic_init behavior_flyout-menu">
-                    <button class="o-secondary-nav_header" type="button" aria-expanded="false" data-js-hook="behavior_flyout-menu_trigger">
-                        <span class="o-secondary-nav_label"> Table of contents </span>
-                        <span class="o-secondary-nav_cues">
-                            <span class="o-secondary-nav_cue-open" aria-label="Show">
+                    <button class="o-secondary-nav__header" type="button" aria-expanded="false" data-js-hook="behavior_flyout-menu_trigger">
+                        <span class="o-secondary-nav__label"> Table of contents </span>
+                        <span class="o-secondary-nav__cues">
+                            <span class="o-secondary-nav__cue-open" aria-label="Show">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__down" viewBox="0 0 17 19"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg>
                             </span>
-                            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+                            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__up" viewBox="0 0 17 19"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg>
                             </span>
                         </span>
                     </button>
-                    <div class="o-secondary-nav_content u-max-height-transition u-max-height-zero" data-js-hook="behavior_flyout-menu_content" data-open="false" style="max-height: 1693px;" hidden="">
+                    <div class="o-secondary-nav__content u-max-height-transition u-max-height-zero" data-js-hook="behavior_flyout-menu_content" data-open="false" style="max-height: 1693px;" hidden="">
                         <div id="ctrl-f">
                             <div class="tw-relative tw-pointer-events-auto">
                                 <button type="button" class="tw-border tw-border-slate-600 tw-border-solid tw-w-full md:tw-bg-white tw-flex tw-bg-white tw-mt-2.5 tw-mb-4 tw-items-center tw-text-slate-600 tw-py-1.5 tw-pl-2">
@@ -39,133 +39,133 @@ export default `
                                 </button>
                             </div>
                         </div>
-                        <ul class="o-secondary-nav_list o-secondary-nav_list__parents">
+                        <ul class="o-secondary-nav__list o-secondary-nav__list--parents">
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#1"> 1. What is the filing instructions guide? </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#1"> 1. What is the filing instructions guide? </a>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#2"> 2. Filing process overview </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children u-hide-on-desktop">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#2.1"> 2.1. About the small business lending platform </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#2"> 2. Filing process overview </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children u-hide-on-desktop">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#2.1"> 2.1. About the small business lending platform </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#2.2"> 2.2. File format </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#2.2"> 2.2. File format </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#3"> 3. Data points </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#uid"> 3.1. Unique identifier </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#3"> 3. Data points </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#uid"> 3.1. Unique identifier </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#application-date"> 3.2. Application date </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#application-date"> 3.2. Application date </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link o-secondary-nav_link__current" href="#application-method"> 3.3. Application method </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link o-secondary-nav__link__current" href="#application-method"> 3.3. Application method </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#application-recipient"> 3.4. Application recipient </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#application-recipient"> 3.4. Application recipient </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#credit-type"> 3.5. Credit type </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#credit-type"> 3.5. Credit type </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#credit-purpose"> 3.6. Credit purpose </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#credit-purpose"> 3.6. Credit purpose </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#amount-applied-for"> 3.7. Amount applied for </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#amount-applied-for"> 3.7. Amount applied for </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#amount-approved-or-originated"> 3.8. Amount approved or originated </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#amount-approved-or-originated"> 3.8. Amount approved or originated </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#action-taken"> 3.9. Action taken </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#action-taken"> 3.9. Action taken </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#action-taken-date"> 3.10. Action taken date </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#action-taken-date"> 3.10. Action taken date </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#denial-reasons"> 3.11. Denial reasons </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#denial-reasons"> 3.11. Denial reasons </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#pricing-information"> 3.12. Pricing information </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#pricing-information"> 3.12. Pricing information </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#census-tract"> 3.13. Census tract </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#census-tract"> 3.13. Census tract </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#gross-annual-revenue"> 3.14. Gross annual revenue </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#gross-annual-revenue"> 3.14. Gross annual revenue </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#naics-code"> 3.15. North American Industry Classification System (NAICS) code </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#naics-code"> 3.15. North American Industry Classification System (NAICS) code </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#number-of-workers"> 3.16. Number of workers </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#number-of-workers"> 3.16. Number of workers </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#time-in-business"> 3.17. Time in business </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#time-in-business"> 3.17. Time in business </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#minority-women-lgbtqi-owned-business-status"> 3.18. Minority-owned, women-owned, and LGBTQI+-owned business statuses </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#minority-women-lgbtqi-owned-business-status"> 3.18. Minority-owned, women-owned, and LGBTQI+-owned business statuses </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#number-of-principal-owners"> 3.19. Number of principal owners </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#number-of-principal-owners"> 3.19. Number of principal owners </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-1"> 3.20. Demographic information of principal owner 1 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-1"> 3.20. Demographic information of principal owner 1 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-2"> 3.21. Demographic information of principal owner 2 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-2"> 3.21. Demographic information of principal owner 2 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-3"> 3.22. Demographic information of principal owner 3 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-3"> 3.22. Demographic information of principal owner 3 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-4"> 3.23. Demographic information of principal owner 4 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-4"> 3.23. Demographic information of principal owner 4 </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#4"> 4. Data validation </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children u-hide-on-desktop">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.1"> 4.1. Single-field errors </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#4"> 4. Data validation </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children u-hide-on-desktop">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.1"> 4.1. Single-field errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.2"> 4.2. Multi-field errors </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.2"> 4.2. Multi-field errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.3"> 4.3. Register-level errors </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.3"> 4.3. Register-level errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.4"> 4.4. Single-field warnings </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.4"> 4.4. Single-field warnings </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.5"> 4.5. Multi-field warnings </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.5"> 4.5. Multi-field warnings </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#5"> 5. Where to get help </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#5"> 5. Where to get help </a>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#6"> 6. Paperwork Reduction Act </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#6"> 6. Paperwork Reduction Act </a>
                             </li>
                         </ul>
                     </div>
                 </nav>
             </div>
         </aside>
-        <div class="u-layout-grid_main content__flush-bottom research-report o-fig_main" id="content_main">
+        <div class="u-layout-grid__main content__flush-bottom research-report o-fig_main" id="content__main">
             <div class="eyebrow"></div>
             <h1>Filing instructions guide for small business lending data collected in 2024</h1>
             <div class="lead-paragraph"></div>
-            <div class="block block__border-top u-fig-print-link">
+            <div class="block block--border-top u-fig-print-link">
                 <a class="a-link a-link__icon" href="javascript:window.print()">
-                    <span class="a-link_text">Print this guide</span>
+                    <span class="a-link__text">Print this guide</span>
                     <svg class="cf-icon-svg cf-icon-svg__print" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="m8.698 2.358 3.065 3.066v1.95h.16a1.112 1.112 0 0 1 1.109 1.108v4.837a1.112 1.112 0 0 1-1.109 1.108h-.16v1.726a.477.477 0 0 1-.475.475H2.712a.477.477 0 0 1-.475-.475v-1.726h-.16A1.112 1.112 0 0 1 .968 13.32V8.482a1.112 1.112 0 0 1 1.109-1.108h.16v-4.54a.476.476 0 0 1 .475-.476zm-.22 3.876a.61.61 0 0 1-.608-.608v-2.16H3.345v3.908h7.31v-1.14zm2.177 4.512h-7.31v4.773h7.31zm-1.054.874h-5.26v1.109h5.26zm0 1.962h-5.26v1.108h5.26zm2.437-4.485a.554.554 0 1 0-.554.554.554.554 0 0 0 .554-.554z"
@@ -272,7 +272,7 @@ export default `
                 <p data-block-key="cvu2g">
                     <a class="a-link a-link__icon"
                        href="https://raw.githubusercontent.com/cfpb/sbl-content/2024-v1/fig-files/file-spec/2024-data-points.csv">
-                        <span class="a-link_text">Data spec (CSV)</span>
+                        <span class="a-link__text">Data spec (CSV)</span>
                         <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"
@@ -453,23 +453,23 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(5)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_credit_product"> Field 5: Credit product </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_credit_product"> Field 5: Credit product </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_credit_product_ff"> Field 6: Free-form text field for other credit products </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_credit_product_ff"> Field 6: Free-form text field for other credit products </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_guarantee"> Field 7: Type of guarantee </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_guarantee"> Field 7: Type of guarantee </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_guarantee_ff"> Field 8: Free-form text field for other guarantee </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_guarantee_ff"> Field 8: Free-form text field for other guarantee </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_loan_term_flag"> Field 9: Loan term: NA/NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_loan_term_flag"> Field 9: Loan term: NA/NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_loan_term"> Field 10: Loan term </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_loan_term"> Field 10: Loan term </a>
                         </li>
                     </ul>
                 </div>
@@ -1233,47 +1233,47 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(12)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_interest_rate_type"> Field 20: Interest rate type </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_interest_rate_type"> Field 20: Interest rate type </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_init_rate_period"> Field 21: Initial rate period </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_init_rate_period"> Field 21: Initial rate period </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_fixed_rate"> Field 22: Fixed rate: interest rate </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_fixed_rate"> Field 22: Fixed rate: interest rate </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_margin"> Field 23: Variable rate transaction: margin </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_margin"> Field 23: Variable rate transaction: margin </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_name"> Field 24: Variable rate transaction: index name </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_name"> Field 24: Variable rate transaction: index name </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_name_ff"> Field 25: Variable rate transaction: index name: other </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_name_ff"> Field 25: Variable rate transaction: index name: other </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_value"> Field 26: Variable rate transaction: index value </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_value"> Field 26: Variable rate transaction: index value </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_origination_charges"> Field 27: Total origination charges </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_origination_charges"> Field 27: Total origination charges </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_broker_fees"> Field 28: Amount of total broker fees </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_broker_fees"> Field 28: Amount of total broker fees </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_initial_charges"> Field 29: Initial annual charges </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_initial_charges"> Field 29: Initial annual charges </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_mca_addcost_flag"> Field 30: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing: NA flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_mca_addcost_flag"> Field 30: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing: NA flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_mca_addcost"> Field 31: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_mca_addcost"> Field 31: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_prepenalty_allowed"> Field 32: Prepayment penalty could be imposed </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_prepenalty_allowed"> Field 32: Prepayment penalty could be imposed </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_prepenalty_exists"> Field 33: Prepayment penalty exists </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_prepenalty_exists"> Field 33: Prepayment penalty exists </a>
                         </li>
                     </ul>
                 </div>
@@ -2355,32 +2355,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_ethnicity"> Field 46: Ethnicity of principal owner 1 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_ethnicity"> Field 46: Ethnicity of principal owner 1 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_ethnicity_ff"> Field 47: Ethnicity of principal owner 1: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_ethnicity_ff"> Field 47: Ethnicity of principal owner 1: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race"> Field 48: Race of principal owner 1 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race"> Field 48: Race of principal owner 1 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_anai_ff"> Field 49: Race of principal owner 1: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_anai_ff"> Field 49: Race of principal owner 1: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_asian_ff"> Field 50: Race of principal owner 1: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_asian_ff"> Field 50: Race of principal owner 1: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_baa_ff"> Field 51: Race of principal owner 1: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_baa_ff"> Field 51: Race of principal owner 1: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_pi_ff"> Field 52: Race of principal owner 1: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_pi_ff"> Field 52: Race of principal owner 1: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_gender_flag"> Field 53: Sex/gender of principal owner 1: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_gender_flag"> Field 53: Sex/gender of principal owner 1: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_gender_ff"> Field 54: Sex/gender of principal owner 1: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_gender_ff"> Field 54: Sex/gender of principal owner 1: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -2846,32 +2846,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_ethnicity"> Field 55: Ethnicity of principal owner 2 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_ethnicity"> Field 55: Ethnicity of principal owner 2 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_ethnicity_ff"> Field 56: Ethnicity of principal owner 2: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_ethnicity_ff"> Field 56: Ethnicity of principal owner 2: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race"> Field 57: Race of principal owner 2 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race"> Field 57: Race of principal owner 2 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_anai_ff"> Field 58: Race of principal owner 2: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_anai_ff"> Field 58: Race of principal owner 2: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_asian_ff"> Field 59: Race of principal owner 2: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_asian_ff"> Field 59: Race of principal owner 2: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_baa_ff"> Field 60: Race of principal owner 2: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_baa_ff"> Field 60: Race of principal owner 2: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_pi_ff"> Field 61: Race of principal owner 2: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_pi_ff"> Field 61: Race of principal owner 2: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_gender_flag"> Field 62: Sex/gender of principal owner 2: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_gender_flag"> Field 62: Sex/gender of principal owner 2: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_gender_ff"> Field 63: Sex/gender of principal owner 2: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_gender_ff"> Field 63: Sex/gender of principal owner 2: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3026,32 +3026,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_ethnicity"> Field 64: Ethnicity of principal owner 3 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_ethnicity"> Field 64: Ethnicity of principal owner 3 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_ethnicity_ff"> Field 65: Ethnicity of principal owner 3: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_ethnicity_ff"> Field 65: Ethnicity of principal owner 3: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race"> Field 66: Race of principal owner 3 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race"> Field 66: Race of principal owner 3 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_anai_ff"> Field 67: Race of principal owner 3: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_anai_ff"> Field 67: Race of principal owner 3: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_asian_ff"> Field 68: Race of principal owner 3: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_asian_ff"> Field 68: Race of principal owner 3: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_baa_ff"> Field 69: Race of principal owner 3: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_baa_ff"> Field 69: Race of principal owner 3: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_pi_ff"> Field 70: Race of principal owner 3: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_pi_ff"> Field 70: Race of principal owner 3: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_gender_flag"> Field 71: Sex/gender of principal owner 3: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_gender_flag"> Field 71: Sex/gender of principal owner 3: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_gender_ff"> Field 72: Sex/gender of principal owner 3: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_gender_ff"> Field 72: Sex/gender of principal owner 3: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3206,32 +3206,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_ethnicity"> Field 73: Ethnicity of principal owner 4 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_ethnicity"> Field 73: Ethnicity of principal owner 4 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_ethnicity_ff"> Field 74: Ethnicity of principal owner 4: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_ethnicity_ff"> Field 74: Ethnicity of principal owner 4: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race"> Field 75: Race of principal owner 4 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race"> Field 75: Race of principal owner 4 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_anai_ff"> Field 76: Race of principal owner 4: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_anai_ff"> Field 76: Race of principal owner 4: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_asian_ff"> Field 77: Race of principal owner 4: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_asian_ff"> Field 77: Race of principal owner 4: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_baa_ff"> Field 78: Race of principal owner 4: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_baa_ff"> Field 78: Race of principal owner 4: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_pi_ff"> Field 79: Race of principal owner 4: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_pi_ff"> Field 79: Race of principal owner 4: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_gender_flag"> Field 80: Sex/gender of principal owner 4: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_gender_flag"> Field 80: Sex/gender of principal owner 4: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_gender_ff"> Field 81: Sex/gender of principal owner 4: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_gender_ff"> Field 81: Sex/gender of principal owner 4: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3426,7 +3426,7 @@ export default `
                 <p data-block-key="abnhl">
                     <a class="a-link a-link__icon"
                        href="https://raw.githubusercontent.com/cfpb/sbl-content/2024-v1/fig-files/validation-spec/2024-validations.csv">
-                        <span class="a-link_text">Validation spec (CSV)</span>
+                        <span class="a-link__text">Validation spec (CSV)</span>
                         <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"
diff --git a/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js b/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
index 0d9607d5e38..f50d17fb52e 100644
--- a/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
+++ b/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
@@ -56,15 +56,15 @@ describe('The Filing Instruction Guide side navigation', () => {
     it('should highlight nav items', () => {
       highlightNavItem('#4');
       expect(navItems.get('#4').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#2');
       expect(navItems.get('#2').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#5');
       expect(navItems.get('#5').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
     });
 
@@ -72,17 +72,17 @@ describe('The Filing Instruction Guide side navigation', () => {
       highlightNavItem('#4');
       unHighlightNavItem('#4');
       expect(navItems.get('#4').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#2');
       unHighlightNavItem('#2');
       expect(navItems.get('#2').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#5');
       unHighlightNavItem('#5');
       expect(navItems.get('#5').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
     });
   });
diff --git a/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js b/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
index 711761d24f9..5ee7e1ca9ce 100644
--- a/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
+++ b/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
@@ -64,13 +64,13 @@ const HTML_SNIPPET = `
   <div class="block u-mb30">
     <h2>About you</h2>
     <div class="question-group">
-      <fieldset class="o-form_fieldset" id="method">
+      <fieldset class="o-form__fieldset" id="method">
         <h3 class="o-scale_header">
             Select how you completed the questionnaire.
             This changes the scoring calculation.
         </h3>
         <ul class="m-list m-list__unstyled content-l">
-          <li class="content-l_col content-l_col-1-2">
+          <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
                         m-form-field__radio
                         m-form-field__lg-target">
@@ -90,7 +90,7 @@ const HTML_SNIPPET = `
               </label>
             </div>
           </li>
-          <li class="content-l_col content-l_col-1-2">
+          <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
                         m-form-field__radio
                         m-form-field__lg-target">
@@ -115,7 +115,7 @@ const HTML_SNIPPET = `
       </fieldset>
     </div>
   </div>
-  <div class="o-form_group">
+  <div class="o-form__group">
     <input class="submit-quiz a-btn"
            id="submit-quiz"
            type="submit"
diff --git a/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js b/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
index 87cc8ae4b8d..0d74fdfa5d1 100644
--- a/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
+++ b/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
@@ -20,15 +20,15 @@ const dataLayerEvent = {
 const HTML_SNIPPET = `
 <div class="content">
   <div class="o-expandable">
-    <button class="o-expandable_header">
-      <span class="o-expandable_label">
+    <button class="o-expandable__header">
+      <span class="o-expandable__label">
       </span>
-      <span class="o-expandable_cues">
-        <span class="o-expandable_cue-open" role="img" aria-label="Show"></span>
-        <span class="o-expandable_cue-close" role="img" aria-label="Hide"></span>
+      <span class="o-expandable__cues">
+        <span class="o-expandable__cue-open" role="img" aria-label="Show"></span>
+        <span class="o-expandable__cue-close" role="img" aria-label="Hide"></span>
       </span>
     </button>
-    <div class="o-expandable_content"></div>
+    <div class="o-expandable__content"></div>
   </div>
   <figure class="comparison-chart" id="comparison-chart">
     <div class="comparison-chart_toggle u-js-only">
@@ -110,8 +110,8 @@ describe('fwb-results', () => {
       '.comparison-chart_toggle-button',
     );
     dataPoint = document.querySelectorAll('.comparison_data-point');
-    expandableTarget = document.querySelector('.o-expandable_header');
-    expandableContent = document.querySelector('.o-expandable_content');
+    expandableTarget = document.querySelector('.o-expandable__header');
+    expandableContent = document.querySelector('.o-expandable__content');
     initFwbResults();
   });
 
diff --git a/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js b/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
index 6c5f77d3ce3..3fa22622e80 100644
--- a/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
+++ b/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
@@ -2,34 +2,34 @@ export default `
 <main id="main" data-context="paying-for-college2">
     <div id="financial-offer" class="understanding-financial-aid-offer">
         <section class="m-hero">
-            <div class="m-hero_wrapper wrapper">
-                <div class="m-hero_text">
-                    <h1 class="m-hero_heading">
+            <div class="m-hero__wrapper wrapper">
+                <div class="m-hero__text">
+                    <h1 class="m-hero__heading">
                         Understanding your financial aid offer
                     </h1>
-                    <p class="m-hero_subhead">
+                    <p class="m-hero__subhead">
                         This personalized summary will help you evaluate your
                         financial aid offer from your school to see how
                         student debt may impact your future finances. </p>
                 </div>
-                <div class="m-hero_image-wrapper">
-                  <div class="m-hero_image"></div>
+                <div class="m-hero__image-wrapper">
+                  <div class="m-hero__image"></div>
                 </div>
             </div>
         </section>
-        <div class="content_line"></div>
-        <section class="verify step content_wrapper">
-            <div class="content_main">
+        <div class="content__line"></div>
+        <section class="verify step content__wrapper">
+            <div class="content__main">
 
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noSchool">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the school ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right school ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -37,26 +37,26 @@ export default `
 
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noProgram">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                   <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                   <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the program ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right program ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
                 </div>
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noOffer">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                    <div class="m-notification_content">
-                        <div class="m-notification_message">Error!</div>
-                        <p class="m-notification_explanation"></p>
+                    <div class="m-notification__content">
+                        <div class="m-notification__message">Error!</div>
+                        <p class="m-notification__explanation"></p>
                             The information your school provided is missing the offer ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right offer ID and it's in the correct format.
                         <p></p>
 
-                        <p class="m-notification_explanation"></p>
+                        <p class="m-notification__explanation"></p>
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         <p></p>
                     </div>
@@ -173,12 +173,12 @@ export default `
                         </form>
                     </div>
                 </div>
-                <div class="content_line"></div>
+                <div class="content__line"></div>
             </div>
         </section>
         <section id="info-right" class="information-right" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__right">
@@ -221,11 +221,11 @@ export default `
                             </div>
                         </div>
                     </div>
-                    <div class="content_line"></div>
+                    <div class="content__line"></div>
                 </div>
             </section>
-            <section class="review step content_wrapper" data-section="review">
-                <div class="content_main">
+            <section class="review step content__wrapper" data-section="review">
+                <div class="content__main">
                     <div class="review_wrapper">
                         <div class="review_intro">
                             <h2 class="step_heading">
@@ -335,7 +335,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -367,7 +367,7 @@ export default `
                                             </label>
                                             <p class="aid-form_definition">
                                                 Based on financial need,
-                                                <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants/pell" rel="noopener noreferrer" target="_blank"><span class="a-link_text">see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
+                                                <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants/pell" rel="noopener noreferrer" target="_blank"><span class="a-link__text">see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
                                         <div class="aid-form_input-wrapper">
@@ -458,7 +458,7 @@ export default `
                                             <p class="aid-form_definition">
                                                 Money for service members or
                                                 veterans that you don’t have
-                                                to pay back; <a class="a-link a-link__icon" href="https://www.vets.gov/gi-bill-comparison-tool" rel="noopener noreferrer" target="_blank"><span class="a-link_text">see how much the
+                                                to pay back; <a class="a-link a-link__icon" href="https://www.vets.gov/gi-bill-comparison-tool" rel="noopener noreferrer" target="_blank"><span class="a-link__text">see how much the
                                                 GI Bill pays</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
@@ -468,7 +468,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -516,7 +516,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="grantsTotal" id="summary_total-grants-scholarships">10,100</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -686,7 +686,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="workstudy">3,000</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -731,7 +731,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="savingsTotal">18,000</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -803,12 +803,12 @@ export default `
                                                 Reserved for students most in
                                                 need; interest starts
                                                 accumulating 9 months after you
-                                                leave school; <a class="a-link a-link__icon" href="https://studentaid.ed.gov/sa/types/loans/perkins" rel="noopener noreferrer" target="_blank"><span class="a-link_text">
+                                                leave school; <a class="a-link a-link__icon" href="https://studentaid.ed.gov/sa/types/loans/perkins" rel="noopener noreferrer" target="_blank"><span class="a-link__text">
                                                 see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="perkins" style="display: none;"></div>
+                                    <div class="content__line loans_line" data-section="perkins" style="display: none;"></div>
                                     <div class="form-group_item" data-section="subsidized" style="display: none;">
                                         <div class="aid-form_label-wrapper">
                                             <label class="form-label" for="contrib__subsidized">
@@ -847,7 +847,7 @@ export default `
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="subsidized" style="display: none;"></div>
+                                    <div class="content__line loans_line" data-section="subsidized" style="display: none;"></div>
                                     <div class="form-group_item" data-section="unsubsidized">
                                         <div class="aid-form_label-wrapper">
                                             <label class="form-label" for="contrib__unsubsidized">
@@ -888,7 +888,7 @@ export default `
                                         </div>
                                     </div>
                                     <div data-section="gradPlus">
-                                      <div class="content_line loans_line"></div>
+                                      <div class="content__line loans_line"></div>
                                       <div class="form-group_item">
                                           <div class="aid-form_label-wrapper">
                                               <label class="form-label" for="contrib__direct-plus">
@@ -925,7 +925,7 @@ export default `
                                       </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="federalLoans">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1031,7 +1031,7 @@ export default `
                                         </button>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1105,7 +1105,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="tuitionpaymentplan" style="display: block;">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1167,7 +1167,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="tuitionRepayYearly" id="summary_total-payment-plans">1,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1225,7 +1225,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="summaryLoanTotal">7,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1335,7 +1335,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="summaryLoanTotal">7,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1415,8 +1415,8 @@ export default `
                 </div>
             </section>
             <section class="continue step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="continue_wrapper">
                             <div class="continue_content">
                                 <h2 class="step_heading">
@@ -1443,8 +1443,8 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="evaluate step content_wrapper" data-section="evaluate">
-                <div class="content_main">
+            <section class="evaluate step content__wrapper" data-section="evaluate">
+                <div class="content__main">
                     <div class="evaluate_wrapper">
                         <div class="evaluate_intro">
                             <h2 class="step_heading">
@@ -1671,7 +1671,7 @@ export default `
                                   payment is <span id="criteria_loan-monthly" data-financial="loanMonthly">$562</span>,
                                   based on standard loan terms of <span data-financial="repaymentTerm" data-currency="false">10</span> years. Once
                                   you leave school, you are able to choose one
-                                  of <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link_text">several
+                                  of <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link__text">several
                                   different repayment options for your federal
                                   loans</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a> that may help reduce your monthly
                                   student loan payment.
@@ -1682,7 +1682,7 @@ export default `
                                     qualify for a federal tax credit or
                                     deduction. As a result, when you start
                                     repaying your loans, you may be able to
-                                    <a class="a-link a-link__icon" href="https://www.irs.gov/newsroom/tax-benefits-for-education-information-center" rel="noopener noreferrer" target="_blank"><span class="a-link_text">reduce your
+                                    <a class="a-link a-link__icon" href="https://www.irs.gov/newsroom/tax-benefits-for-education-information-center" rel="noopener noreferrer" target="_blank"><span class="a-link__text">reduce your
                                     federal tax burden</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>. Please consult with
                                     your tax advisor.
                                 </p>
@@ -1767,7 +1767,7 @@ export default `
                                     </div>
                                     <div>
                                         <p>
-                                          <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link_text">
+                                          <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link__text">
                                             Learn about other federal repayment options
                                           </span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                         </p>
@@ -1917,7 +1917,7 @@ export default `
                                             (the average national salary for all
                                             students who attended
                                             college)</span> in the region you
-                                            plan to live (Source: <a class="a-link a-link__icon" href="http://www.bls.gov/cex/" rel="noopener noreferrer" target="_blank"><span class="a-link_text">Bureau of Labor
+                                            plan to live (Source: <a class="a-link a-link__icon" href="http://www.bls.gov/cex/" rel="noopener noreferrer" target="_blank"><span class="a-link__text">Bureau of Labor
                                             Statistics</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>). Your expenses may
                                             be higher or lower.
                                         </p>
@@ -2098,7 +2098,7 @@ export default `
                                     </div>
                                 </form>
                                 <div class="aid-form_summary">
-                                    <div class="content_line
+                                    <div class="content__line
                                     aid-form_equals-line"></div>
                                     <div class="line-item line-item__total">
                                         <div class="line-item_title">
@@ -2223,8 +2223,8 @@ export default `
                 </div>
             </section>
             <section class="question step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="question_wrapper">
                             <div class="question_content">
                                 <h2 class="step_heading step_settlement">
@@ -2261,9 +2261,9 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="get-options step content_wrapper
+            <section class="get-options step content__wrapper
             column-well_wrapper">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="get-options_wrapper">
                         <div class="get-options_intro followup__no-not-sure">
                             <h2 class="step_heading">
@@ -2304,13 +2304,13 @@ export default `
                         </div>
                     </div>
                     <div class="get-options_wrapper">
-                        <div class="get-options__settlement content_main">
+                        <div class="get-options__settlement content__main">
                             <section class="option option__maximize-grants option__settlement">
                                 <h3 class="option_heading">
                                     Maximize all available grants and scholarships.
                                 </h3>
                                 <p>
-                                    Consider applying for <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants" rel="noopener noreferrer" target="_blank"><span class="a-link_text">additional
+                                    Consider applying for <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants" rel="noopener noreferrer" target="_blank"><span class="a-link__text">additional
                                     scholarships and grants</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>,
                                     which provide money you don’t have to repay.
                                     By increasing the amount of this type of
@@ -2326,7 +2326,7 @@ export default `
                                 <p>
                                     Living at home or finding cheaper off-campus
                                     housing can
-                                    <a class="a-link a-link__icon" href="https://studentaid.gov/resources/prepare-for-college/students/choosing-schools/consider-costs#how-can-i" rel="noopener noreferrer" target="_blank"><span class="a-link_text">reduce the
+                                    <a class="a-link a-link__icon" href="https://studentaid.gov/resources/prepare-for-college/students/choosing-schools/consider-costs#how-can-i" rel="noopener noreferrer" target="_blank"><span class="a-link__text">reduce the
                                     cost of attendance</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>, meaning you can
                                     borrow less money overall.
                                 </p>
@@ -2363,7 +2363,7 @@ export default `
                                     can help reduce the amount of money you need
                                     to borrow to pay for school, resulting in
                                     long-term benefits of reducing overall debt.
-                                    Check out <a class="a-link a-link__icon" href="https://www.careeronestop.org/jobsearch/job-search.aspx" rel="noopener noreferrer" target="_blank"><span class="a-link_text">resources for finding a
+                                    Check out <a class="a-link a-link__icon" href="https://www.careeronestop.org/jobsearch/job-search.aspx" rel="noopener noreferrer" target="_blank"><span class="a-link__text">resources for finding a
                                     job</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>, including links to job search
                                     sites, tips for writing a
                                     résumé, and more.
@@ -2373,7 +2373,7 @@ export default `
                         <aside class="get-options__sidebar
                                       column-well
                                       column-well__emphasis
-                                      content_sidebar">
+                                      content__sidebar">
                             <div class="column-well_content">
                                 <h3 class="option__take-action-header">
                                     What you can do
@@ -2401,7 +2401,7 @@ export default `
                                     college students
                                 </h4>
                                 <div>
-                                    <a class="a-link a-link__icon" href="https://collegescorecard.ed.gov" rel="noopener noreferrer" target="_blank"><span class="a-link_text">College
+                                    <a class="a-link a-link__icon" href="https://collegescorecard.ed.gov" rel="noopener noreferrer" target="_blank"><span class="a-link__text">College
                                     Scorecard</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                     <p>Compare <a href="https://collegescorecard.ed.gov/school/?133465" target="_blank" rel="noopener noreferrer" class="scorecard-school a-link a-link__icon">your
                                         school </a>’s annual costs,
@@ -2409,11 +2409,11 @@ export default `
                                         earnings.</p>
                                 </div>
                                 <p>
-                                    <a class="a-link a-link__icon" href="https://www.consumer.ftc.gov/articles/0395-choosing-college-questions-ask" rel="noopener noreferrer" target="_blank"><span class="a-link_text">Questions to ask
+                                    <a class="a-link a-link__icon" href="https://www.consumer.ftc.gov/articles/0395-choosing-college-questions-ask" rel="noopener noreferrer" target="_blank"><span class="a-link__text">Questions to ask
                                         your college</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                 </p>
                                 <div>
-                                    <a class="a-link a-link__icon" href="https://studentaid.gov/h/apply-for-aid/fafsa" rel="noopener noreferrer" target="_blank"><span class="a-link_text">FAFSA®</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
+                                    <a class="a-link a-link__icon" href="https://studentaid.gov/h/apply-for-aid/fafsa" rel="noopener noreferrer" target="_blank"><span class="a-link__text">FAFSA®</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                     <p>Apply for federal, state, and school
                                         financial aid.</p>
                                 </div>
@@ -2432,9 +2432,9 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="next-steps step content_wrapper">
-                <div class="content_main">
-                    <div class="content_line"></div>
+            <section class="next-steps step content__wrapper">
+                <div class="content__main">
+                    <div class="content__line"></div>
                     <div class="next-steps_wrapper">
                         <div class="next-steps_intro">
                             <h2 class="step_heading">
@@ -2481,7 +2481,7 @@ export default `
                             </p>
                             <div class="next-steps_controls">
                                 <button class="a-btn a-btn__full-on-xs" type="button" data-gtm_ignore="true">
-                                    <span class="a-btn_icon__on-left">
+                                    <span class="a-btn__icon--on-left">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__print" viewBox="0 0 14 19"><path d="m8.698 2.358 3.065 3.066v1.95h.16a1.112 1.112 0 0 1 1.109 1.108v4.837a1.112 1.112 0 0 1-1.109 1.108h-.16v1.726a.477.477 0 0 1-.475.475H2.712a.477.477 0 0 1-.475-.475v-1.726h-.16A1.112 1.112 0 0 1 .968 13.32V8.482a1.112 1.112 0 0 1 1.109-1.108h.16v-4.54a.476.476 0 0 1 .475-.476zm-.22 3.876a.61.61 0 0 1-.608-.608v-2.16H3.345v3.908h7.31v-1.14zm2.177 4.512h-7.31v4.773h7.31zm-1.054.874h-5.26v1.109h5.26zm0 1.962h-5.26v1.108h5.26zm2.437-4.485a.554.554 0 1 0-.554.554.554.554 0 0 0 .554-.554z"></path></svg>
                                     </span>
                                     Print
@@ -2493,8 +2493,8 @@ export default `
             </section>
         </section>
         <section id="info-wrong" class="information-wrong" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__wrong">
diff --git a/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js b/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
index 7fe1027002b..8d36ad539c9 100644
--- a/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
@@ -29,7 +29,7 @@ const HTML_SNIPPET2 = `
 
 const HTML_SNIPPET3 = `
   <div class="regulations3k">
-    <div id="content_main">
+    <div id="content__main">
       <div class="o-regulations-wayfinder" data-section="Comment for 1026.33 - Requirements for Reverse Mortgages">
           <div class="o-regulations-wayfinder_sidebar">
               <span class="h4">
@@ -246,7 +246,7 @@ describe('The Regs3K permalinks utils', () => {
     it('should update the wayfinder', () => {
       updateParagraphPositions();
       const mainContent = document.querySelector(
-        '.regulations3k #content_main',
+        '.regulations3k #content__main',
       );
       const wayfinder = document.querySelector('.o-regulations-wayfinder');
 
diff --git a/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js b/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
index 410cd984d25..26f75b22a4d 100644
--- a/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
@@ -32,7 +32,7 @@ describe('The Regs3K search page', () => {
     };
     const processedNotice = processNotice(notice);
     expect(processedNotice.constructor.name).toEqual('HTMLLIElement');
-    expect(processedNotice.className).toEqual('m-list_link');
+    expect(processedNotice.className).toEqual('m-list__link');
     expect(processedNotice.querySelector('a').href).toEqual(
       'https://federalregister.gov/',
     );
@@ -62,7 +62,7 @@ describe('The Regs3K search page', () => {
 
     // Wait for window.load to trigger.
     setTimeout(() => {
-      const numNotices = document.querySelectorAll('.m-list_link').length;
+      const numNotices = document.querySelectorAll('.m-list__link').length;
       expect(numNotices).toEqual(4);
     }, 1000);
   });
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
index a2f75db65db..e6e3170deba 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
@@ -6,14 +6,14 @@ let clearBtnDom;
 let inputDom;
 
 const HTML_SNIPPET = `
-<div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn__input-container">
      <div class="m-btn-inside-input
                  input-contains-label">
-         <label for="query" class="input-contains-label_before
-                                   input-contains-label_before__search">
+         <label for="query" class="input-contains-label__before
+                                   input-contains-label__before__search">
          </label>
-         <label for="query" class="input-contains-label_after
-                                   input-contains-label_after__clear">
+         <label for="query" class="input-contains-label__after
+                                   input-contains-label__after__clear">
          </label>
          <input type="text"
                 title="Search the CFPB"
@@ -27,9 +27,9 @@ const HTML_SNIPPET = `
 describe('ClearableInput', () => {
   beforeEach(() => {
     document.body.innerHTML = HTML_SNIPPET;
-    baseDom = document.querySelector('.o-form__input-w-btn_input-container');
+    baseDom = document.querySelector('.o-form--input-w-btn__input-container');
     inputDom = baseDom.querySelector('input');
-    clearBtnDom = baseDom.querySelector('.input-contains-label_after__clear');
+    clearBtnDom = baseDom.querySelector('.input-contains-label__after__clear');
   });
 
   describe('init function', () => {
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
index 7badd3b93fe..59895f9e1c1 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
@@ -10,25 +10,25 @@ const HTML_SNIPPET = `
      class="o-expandable
             o-expandable__background
             ">
-    <button class="o-expandable_header" type="button">
-        <span class="o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="o-expandable__label">
             Building block
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"/></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"/></svg>
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content
-                o-expandable_content__onload-open
+    <div class="o-expandable__content
+                o-expandable__content__onload-open
                 o-expandable__mobile-collapsed">
-            <div class="o-form_group u-mt15">
-                <fieldset class="o-form_fieldset">
+            <div class="o-form__group u-mt15">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         <li>
                             <div class="m-form-field m-form-field__checkbox">
@@ -46,14 +46,14 @@ const HTML_SNIPPET = `
 global.console = { error: jest.fn(), log: jest.fn() };
 
 let expandableDiv;
-const OPEN_DEFAULT_CLASS = 'o-expandable_content__onload-open';
+const OPEN_DEFAULT_CLASS = 'o-expandable__content__onload-open';
 
 describe('expandable-mobile', () => {
   beforeEach(() => {
     setInnerWidth(1000);
     // Load HTML fixture
     document.body.innerHTML = HTML_SNIPPET;
-    expandableDiv = document.querySelector('#test-div .o-expandable_content');
+    expandableDiv = document.querySelector('#test-div .o-expandable__content');
   });
 
   it('should not throw any errors on init', () => {
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
index 8acedeca23d..0fb0849e247 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
@@ -7,11 +7,11 @@ import { init as searchInit } from '../../../../../cfgov/unprocessed/apps/teache
 const HTML_SNIPPET = `
   <form class="tdp-activity-search" id="search-form" action="." data-js-hook="behavior_submit-search">
     <div class="input-contains-label">
-      <label for="search-text" class="input-contains-label_before input-contains-label_before__search">
+      <label for="search-text" class="input-contains-label__before input-contains-label__before__search">
           <span class="u-visually-hidden">The term to search for</span>
       </label>
       <input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q" placeholder="Enter your search term(s)" value="executive">
-      <label for="search-text" class="input-contains-label_after input-contains-label_after__clear u-hidden">Clear</label>
+      <label for="search-text" class="input-contains-label__after input-contains-label__after__clear u-hidden">Clear</label>
     </div>
     <button class="a-btn">Search</button>
   </form>
@@ -23,22 +23,22 @@ const HTML_SNIPPET = `
     <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
     <input type="hidden" name="page" inputmode="numeric" value="1">
     <div class="o-expandable o-expandable__background" data-bound="true">
-      <button class="o-expandable_header o-expandable_target__expanded" type="button">
-        <span class="o-expandable_label">
+      <button class="o-expandable__header o-expandable__target--expanded" type="button">
+        <span class="o-expandable__label">
           Building block
         </span>
-        <span class="o-expandable_cues">
-          <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+          <span class="o-expandable__cue-open" role="img" aria-label="Show">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
           </span>
-          <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+          <span class="o-expandable__cue-close" role="img" aria-label="Hide">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
           </span>
         </span>
       </button>
-      <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 119px;">
-        <div class="o-form_group u-mt15">
-          <fieldset class="o-form_fieldset">
+      <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 119px;">
+        <div class="o-form__group u-mt15">
+          <fieldset class="o-form__fieldset">
             <ul class="m-list m-list__unstyled">
               <li>
                 <div class="m-form-field m-form-field__checkbox">
@@ -65,18 +65,18 @@ const HTML_SNIPPET = `
     </div>
 
     <div class="o-expandable o-expandable__background" data-bound="true">
-      <button class="o-expandable_header o-expandable_target__expanded" type="button">
-        <span class="o-expandable_label">Topic</span>
-        <span class="o-expandable_cues">
-          <span class="o-expandable_cue-open" role="img" aria-label="Show">
+      <button class="o-expandable__header o-expandable__target--expanded" type="button">
+        <span class="o-expandable__label">Topic</span>
+        <span class="o-expandable__cues">
+          <span class="o-expandable__cue-open" role="img" aria-label="Show">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
           </span>
-          <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+          <span class="o-expandable__cue-close" role="img" aria-label="Hide">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
           </span>
         </span>
       </button>
-      <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 337px;">
+      <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 337px;">
         <ul class="m-list m-list__unstyled u-mt15">
           <li class="o-expandable-facets" data-bound="true">
             <div class="m-form-field m-form-field__checkbox">
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
index 4eeae8c148c..171618c89c1 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
@@ -26,22 +26,22 @@ const HTML_SNIPPET = `
       <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
       <input type="hidden" name="page" inputmode="numeric" value="1">
       <div class="o-expandable o-expandable__background" data-bound="true">
-        <button class="o-expandable_header o-expandable_target__expanded" type="button">
-          <span class="o-expandable_label">
+        <button class="o-expandable__header o-expandable__target--expanded" type="button">
+          <span class="o-expandable__label">
             Building block
           </span>
-          <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+          <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
             </span>
           </span>
         </button>
-        <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 119px;">
-          <div class="o-form_group u-mt15">
-            <fieldset class="o-form_fieldset">
+        <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 119px;">
+          <div class="o-form__group u-mt15">
+            <fieldset class="o-form__fieldset">
               <ul class="m-list m-list__unstyled">
                 <li>
                   <div class="m-form-field m-form-field__checkbox">
@@ -68,18 +68,18 @@ const HTML_SNIPPET = `
       </div>
 
       <div class="o-expandable o-expandable__background" data-bound="true">
-        <button class="o-expandable_header o-expandable_target__expanded" type="button">
-          <span class="o-expandable_label">Topic</span>
-          <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <button class="o-expandable__header o-expandable__target--expanded" type="button">
+          <span class="o-expandable__label">Topic</span>
+          <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
             </span>
           </span>
         </button>
-        <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 337px;">
+        <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 337px;">
           <ul class="m-list m-list__unstyled u-mt15">
             <li class="o-expandable-facets" data-bound="true">
               <div class="m-form-field m-form-field__checkbox">
@@ -148,27 +148,27 @@ const HTML_SNIPPET = `
     </form>
     <nav class="m-pagination" role="navigation" aria-label="Pagination">
         <a class="a-btn
-                  m-pagination_btn-prev"
+                  m-pagination__btn-prev"
            href="?page=21#pagination_content">
-            <span class="a-btn_icon a-btn_icon__on-left">{% include icons/left.svg %}</span>
+            <span class="a-btn__icon a-btn__icon--on-left">{% include icons/left.svg %}</span>
             Newer
         </a>
         <a class="a-btn
-                  m-pagination_btn-next"
+                  m-pagination__btn-next"
            href="?page=23#pagination_content">
-            <span class="a-btn_icon a-btn_icon__on-right">{% include icons/right.svg %}</span>
+            <span class="a-btn__icon a-btn__icon--on-right">{% include icons/right.svg %}</span>
             Older
         </a>
-        <form class="m-pagination_form"
+        <form class="m-pagination__form"
               action="#pagination_content">
-            <label class="m-pagination_label"
-                   for="m-pagination_current-page">
+            <label class="m-pagination__label"
+                   for="m-pagination__current-page">
                 Page
                 <span class="u-visually-hidden">
                     number 22 out
                 </span>
-                <input class="m-pagination_current-page"
-                       id="m-pagination_current-page"
+                <input class="m-pagination__current-page"
+                       id="m-pagination__current-page"
                        name="page"
                        type="number"
                        min="1"
@@ -176,12 +176,12 @@ const HTML_SNIPPET = `
                        pattern="[0-9]*"
                        inputmode="numeric"
                        value="22">
-                <span class="m-pagination_label"> of 149</span>
+                <span class="m-pagination__label"> of 149</span>
             </label>
             <button class="a-btn
                            a-btn__link
-                           m-pagination_btn-submit"
-                    id="m-pagination_btn-submit"
+                           m-pagination__btn-submit"
+                    id="m-pagination__btn-submit"
                     type="submit">Go</button>
         </form>
     </nav>
@@ -227,7 +227,7 @@ describe('The TDP custom analytics', () => {
   });
 
   it('should send an analytics event when next pagination button is clicked', () => {
-    const paginationButton = document.querySelector('.m-pagination_btn-next');
+    const paginationButton = document.querySelector('.m-pagination__btn-next');
     const spy = jest.fn();
 
     bindAnalytics(spy);
@@ -238,7 +238,7 @@ describe('The TDP custom analytics', () => {
   });
 
   it('should send an analytics event when an expandable is clicked', () => {
-    const expandable = document.querySelector('.o-expandable_header');
+    const expandable = document.querySelector('.o-expandable__header');
     const spy = jest.fn();
 
     bindAnalytics(spy);
diff --git a/test/unit_tests/js/modules/footer-button-spec.js b/test/unit_tests/js/modules/footer-button-spec.js
index 938cc052b24..67d43a45054 100644
--- a/test/unit_tests/js/modules/footer-button-spec.js
+++ b/test/unit_tests/js/modules/footer-button-spec.js
@@ -6,11 +6,11 @@ let footerBtnDom;
 
 const HTML_SNIPPET = `
 <div class="skip-nav">
-    <a class="skip-nav_link" href="#main">
+    <a class="skip-nav__link" href="#main">
         Skip to main content
     </a>
 </div>
-<a class="a-btn a-btn__secondary o-footer_top-button"
+<a class="a-btn a-btn__secondary o-footer__top-button"
    data-gtm_ignore="true" data-js-hook="behavior_return-to-top"
    href="#">
     Back to top
@@ -31,7 +31,7 @@ describe('footer-button', () => {
   beforeAll(() => {
     window.scrollTo = scrollTo;
     document.body.innerHTML = HTML_SNIPPET;
-    footerBtnDom = document.querySelector('.o-footer_top-button');
+    footerBtnDom = document.querySelector('.o-footer__top-button');
   });
 
   it(
diff --git a/test/unit_tests/js/molecules/Notification-spec.js b/test/unit_tests/js/molecules/Notification-spec.js
index 1a97865fc31..c0bd31af4e6 100644
--- a/test/unit_tests/js/molecules/Notification-spec.js
+++ b/test/unit_tests/js/molecules/Notification-spec.js
@@ -4,8 +4,8 @@ const HTML_SNIPPET = `
 <div class="m-notification">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1000 1200" class="cf-icon-svg"></svg>
-  <div class="m-notification_content">
-    <div class="m-notification_message">Notification content</div>
+  <div class="m-notification__content">
+    <div class="m-notification__message">Notification content</div>
   </div>
 </div>
 `;
@@ -85,9 +85,11 @@ describe('Notification', () => {
       const testMsg = 'Notification message content';
       notification.update(Notification.SUCCESS, testMsg);
 
-      const message = notificationElem.querySelector('.m-notification_message');
+      const message = notificationElem.querySelector(
+        '.m-notification__message',
+      );
       const explanation = notificationElem.querySelector(
-        '.m-notification_explanation',
+        '.m-notification__explanation',
       );
 
       expect(notificationElem.className).toContain('m-notification__success');
@@ -100,9 +102,11 @@ describe('Notification', () => {
       const testExplanation = 'Notification explanation content';
       notification.update(Notification.SUCCESS, testMsg, testExplanation);
 
-      const message = notificationElem.querySelector('.m-notification_message');
+      const message = notificationElem.querySelector(
+        '.m-notification__message',
+      );
       const explanation = notificationElem.querySelector(
-        '.m-notification_explanation',
+        '.m-notification__explanation',
       );
 
       expect(notificationElem.className).toContain('m-notification__success');
diff --git a/test/unit_tests/js/organisms/FilterableListControls-spec.js b/test/unit_tests/js/organisms/FilterableListControls-spec.js
index e9b9b068e27..e4f402483eb 100644
--- a/test/unit_tests/js/organisms/FilterableListControls-spec.js
+++ b/test/unit_tests/js/organisms/FilterableListControls-spec.js
@@ -7,31 +7,31 @@ const HTML_SNIPPET = `
 <div class="o-expandable
             o-expandable__background
             o-expandable__border">
-    <button class="o-expandable_header" type="button">
-        <span class="o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="o-expandable__label">
             Filter posts
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
                 Show
                 filters
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
                 Hide
                 filters
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
 
     <form method="get" action=".">
 
         <div class="content-l">
 
-        <div class="content-l_col
-                    content-l_col-1">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading" for="title">
                         Item name
@@ -46,10 +46,10 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-        <div class="content-l_col
-                    content-l_col-1-3">
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+        <div class="content-l__col
+                    content-l__col-1-3">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <legend class="a-legend">
                         Category
                     </legend>
@@ -95,13 +95,13 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-        <div class="content-l_col
-                    content-l_col-2-3">
+        <div class="content-l__col
+                    content-l__col-2-3">
             <div class="content-l">
 
-                    <div class="content-l_col
-                                content-l_col-1-2">
-                        <div class="o-form_group">
+                    <div class="content-l__col
+                                content-l__col-1-2">
+                        <div class="o-form__group">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading" for="topics">
                                     Topic
@@ -115,16 +115,16 @@ const HTML_SNIPPET = `
                         </div>
                     </div>
 
-                    <div class="content-l_col
-                                content-l_col-1">
-                        <div class="o-form_group">
-                            <fieldset class="o-form_fieldset">
+                    <div class="content-l__col
+                                content-l__col-1">
+                        <div class="o-form__group">
+                            <fieldset class="o-form__fieldset">
                                 <legend class="a-legend">
                                     Date range
                                 </legend>
                                 <div class="content-l">
-                                    <div class="content-l_col
-                                                content-l_col-1-2">
+                                    <div class="content-l__col
+                                                content-l__col-1-2">
                                         <div class="m-form-field">
                                             <label class="a-label a-label__heading" for="from_date">
                                                 From:
@@ -132,8 +132,8 @@ const HTML_SNIPPET = `
                                             <input type="text" name="from_date" data-type="date" placeholder="mm/dd/yyyy" class="a-text-input a-text-input__full" id="from_date">
                                         </div>
                                     </div>
-                                    <div class="content-l_col
-                                                content-l_col-1-2">
+                                    <div class="content-l__col
+                                                content-l__col-1-2">
                                         <div class="m-form-field">
                                             <label class="a-label a-label__heading" for="to_date">
                                                 To:
@@ -149,8 +149,8 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <input class="a-btn" type="submit" value="Apply filters">
                 <a class="a-btn a-btn__link a-btn__warning" href="/about-us/blog/">
@@ -165,8 +165,8 @@ const HTML_SNIPPET = `
 </div>
 
 <div class="m-notification">
-    <div class="m-notification_content">
-        <div class="m-notification_message"></div></div>
+    <div class="m-notification__content">
+        <div class="m-notification__message"></div></div>
     </div>
 
 </div>
diff --git a/test/unit_tests/js/organisms/MegaMenu-spec.js b/test/unit_tests/js/organisms/MegaMenu-spec.js
index 1f9ab68ed20..9f65859fed3 100644
--- a/test/unit_tests/js/organisms/MegaMenu-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenu-spec.js
@@ -24,7 +24,7 @@ describe('MegaMenu', () => {
   describe('collapse', () => {
     it('should not be expanded by default', () => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
       const defaultExpanded = firstContent.getAttribute('aria-expanded');
 
       expect(defaultExpanded).toEqual('false');
@@ -32,8 +32,8 @@ describe('MegaMenu', () => {
 
     it('should expand on click', (done) => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       let isExpanded;
 
       /**
@@ -61,8 +61,8 @@ describe('MegaMenu', () => {
 
     it('should close when calling the collapse method', (done) => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       let isExpanded;
 
       /**
diff --git a/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js b/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
index 550ad3f267a..1b2243b763e 100644
--- a/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
@@ -23,11 +23,11 @@ describe('MegaMenuDesktop', () => {
     */
     it('should expand on the first level sub-menu button click', (done) => {
       const menuTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       const subContentWrapper = navElem.querySelector(
-        '.o-mega-menu_content-2-wrapper',
+        '.o-mega-menu__content-2-wrapper',
       );
       let isExpanded;
 
@@ -55,15 +55,15 @@ describe('MegaMenuDesktop', () => {
     });
 
     it('should not be expanded by default', () => {
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       const isExpanded = subContent.getAttribute('aria-expanded');
 
       expect(isExpanded).toEqual('false');
     });
 
     it('should not be expanded on the main trigger click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
diff --git a/test/unit_tests/js/organisms/MegaMenuMobile-spec.js b/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
index 31ed9959767..c29655e6b00 100644
--- a/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
@@ -22,12 +22,12 @@ describe('MegaMenuMobile', () => {
        See https://github.com/jsdom/jsdom/issues/1781
     */
     it('should expand on the first level sub-menu button click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       const subTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const firstPanel = navElem.querySelector('.o-mega-menu_content-1');
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const firstPanel = navElem.querySelector('.o-mega-menu__content-1');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
@@ -75,15 +75,15 @@ describe('MegaMenuMobile', () => {
     });
 
     it('should not be expanded by default', () => {
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       const isExpanded = secondPanel.getAttribute('data-open');
 
       expect(isExpanded).toEqual('false');
     });
 
     it('should not be expanded on the main trigger click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
@@ -102,13 +102,13 @@ describe('MegaMenuMobile', () => {
     });
 
     it('should collapse on the first level sub-menu back button click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       const subTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       const subAltTrigger = secondPanel.querySelector(
-        '.o-mega-menu_content-alt-trigger',
+        '.o-mega-menu__content-alt-trigger',
       );
       let isExpanded;
 
diff --git a/test/unit_tests/mocks/emailSignupSnippet.js b/test/unit_tests/mocks/emailSignupSnippet.js
index 722abf2f50f..5a7ce8bd959 100644
--- a/test/unit_tests/mocks/emailSignupSnippet.js
+++ b/test/unit_tests/mocks/emailSignupSnippet.js
@@ -1,7 +1,7 @@
 export default `
 <div class="o-email-signup">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Stay informed
         </h2>
     </header>
@@ -15,8 +15,8 @@ export default `
           enctype="application/x-www-form-urlencoded">
         <div class="u-mb15">
             <div class="m-notification">
-                <div class="m-notification_content">
-                    <div class="m-notification_message"></div>
+                <div class="m-notification__content">
+                    <div class="m-notification__message"></div>
                 </div>
             </div>
         </div>
@@ -31,7 +31,7 @@ export default `
                    placeholder="mail@example.com"
                    required="">
         </div>
-        <div class="o-email-signup_buttons">
+        <div class="o-email-signup__buttons">
             <button class="a-btn">Sign up</button>
             <a class="a-btn a-btn__link a-btn__secondary"
                href="/owning-a-home/privacy-act-statement/"
diff --git a/test/unit_tests/mocks/megaMenuSnippet.js b/test/unit_tests/mocks/megaMenuSnippet.js
index 97113309176..8933f446a22 100644
--- a/test/unit_tests/mocks/megaMenuSnippet.js
+++ b/test/unit_tests/mocks/megaMenuSnippet.js
@@ -1,14 +1,14 @@
 export default `
 <nav class="o-mega-menu
             u-hidden" data-js-hook="behavior_flyout-menu" aria-label="Main menu">
-    <button class="o-mega-menu_trigger" data-js-hook="behavior_flyout-menu_trigger" aria-haspopup="menu">
-        <span class="o-mega-menu_trigger-open">
+    <button class="o-mega-menu__trigger" data-js-hook="behavior_flyout-menu_trigger" aria-haspopup="menu">
+        <span class="o-mega-menu__trigger-open">
             <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 14 19"><path d="M.789 4.836a1.03 1.03 0 0 1 1.03-1.029h10.363a1.03 1.03 0 1 1 0 2.059H1.818A1.03 1.03 0 0 1 .79 4.836zm12.422 4.347a1.03 1.03 0 0 1-1.03 1.029H1.819a1.03 1.03 0 0 1 0-2.059h10.364a1.03 1.03 0 0 1 1.029 1.03zm0 4.345a1.03 1.03 0 0 1-1.03 1.03H1.819a1.03 1.03 0 1 1 0-2.059h10.364a1.03 1.03 0 0 1 1.029 1.03z"></path></svg>
             <span class="u-visually-hidden">
                 Open the main menu
             </span>
         </span>
-        <span class="o-mega-menu_trigger-close">
+        <span class="o-mega-menu__trigger-close">
             <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg>
             <span class="u-visually-hidden">
                 Close the main menu
@@ -17,12 +17,12 @@ export default `
     </button>
 
 
-<div class="o-mega-menu_content o-mega-menu_content-1 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-1 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-1-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-1-wrapper ">
 
 
 
@@ -30,11 +30,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-1-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-1-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-1-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-1-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-1-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-1-list ">
 
 
             <ul>
@@ -44,11 +44,11 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item o-mega-menu_content-item__has-icon o-mega-menu_content-1-item__has-icon ">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item o-mega-menu__content-item--has-icon o-mega-menu__content-1-item__has-icon ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-1-link" href="/complaint/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-1-link" href="/complaint/">
 <div aria-level="2" role="heading">
-<span class="o-mega-menu_content-link-icon-pre o-mega-menu_content-1-link-icon-pre"><svg class="cf-icon-svg" viewBox="0 0 15 19" xmlns="http://www.w3.org/2000/svg"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-pre o-mega-menu__content-1-link-icon-pre"><svg class="cf-icon-svg" viewBox="0 0 15 19" xmlns="http://www.w3.org/2000/svg"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg></span>
 
 
         Submit a Complaint
@@ -65,9 +65,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
 <div aria-level="2" role="heading">
 
 
@@ -76,25 +76,25 @@ export default `
         Consumer Education
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
 
@@ -102,11 +102,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Consumer Education">
@@ -114,9 +114,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/">
 
 
 
@@ -134,9 +134,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/educator-tools/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/educator-tools/">
 
 
 
@@ -154,9 +154,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/coronavirus/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/coronavirus/">
 
 
 
@@ -174,9 +174,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-complaints/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-complaints/">
 
 
 
@@ -196,13 +196,13 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
 
             <div role="heading" aria-level="3" aria-label="Money Topics" class="h5
-                    o-mega-menu_group-heading
+                    o-mega-menu__group-heading
                     " id="money-topics-menu">
                  Money Topics
             </div>
@@ -212,9 +212,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/auto-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/auto-loans/">
 
 
 
@@ -232,9 +232,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/bank-accounts/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/bank-accounts/">
 
 
 
@@ -252,9 +252,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/credit-cards/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/credit-cards/">
 
 
 
@@ -272,9 +272,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/credit-reports-and-scores/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/credit-reports-and-scores/">
 
 
 
@@ -292,9 +292,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/debt-collection/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/debt-collection/">
 
 
 
@@ -312,9 +312,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/fraud/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/fraud/">
 
 
 
@@ -334,14 +334,14 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
 
             <div role="heading" aria-level="3" aria-label="Money Topics continued" class="h5
-                    o-mega-menu_group-heading
-                    o-mega-menu_group-heading__hidden" id="money-topics-continued-menu">
+                    o-mega-menu__group-heading
+                    o-mega-menu__group-heading__hidden" id="money-topics-continued-menu">
                  Money Topics
             </div>
 
@@ -350,9 +350,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/money-transfers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/money-transfers/">
 
 
 
@@ -370,9 +370,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/mortgages/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/mortgages/">
 
 
 
@@ -390,9 +390,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/payday-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/payday-loans/">
 
 
 
@@ -410,9 +410,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/prepaid-cards/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/prepaid-cards/">
 
 
 
@@ -430,9 +430,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/reverse-mortgages/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/reverse-mortgages/">
 
 
 
@@ -450,9 +450,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/student-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/student-loans/">
 
 
 
@@ -477,21 +477,21 @@ export default `
 
 
 
-            <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
+            <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list
-                            o-mega-menu_content-list__featured o-mega-menu_content-2-list__featured ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list
+                            o-mega-menu__content-list__featured o-mega-menu__content-2-list__featured ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Featured
                     </div>
                     <ul aria-label="Featured">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 17 19"><path d="m12.673 10.779.798 4.02c.221 1.11-.407 1.566-1.395 1.013L8.5 13.81l-3.576 2.002c-.988.553-1.616.097-1.395-1.013l.397-2.001.401-2.02-1.51-1.397-1.498-1.385c-.832-.769-.592-1.507.532-1.64l2.026-.24 2.044-.242 1.717-3.722c.474-1.028 1.25-1.028 1.724 0l1.717 3.722 2.044.242 2.026.24c1.124.133 1.364.871.533 1.64L14.184 9.38z"></path></svg>
-                                <span><span class="a-link_text">Explore guides to help you plan for big financial goals</span></span>
+                                <span><span class="a-link__text">Explore guides to help you plan for big financial goals</span></span>
                             </a>
                         </li>
 
@@ -500,47 +500,47 @@ export default `
 
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Additional Resources
                     </div>
                     <ul aria-label="Additional Resources">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/complaint/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 15 19"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg>
-                                <span class="a-link_text">Submit a Complaint</span>
+                                <span class="a-link__text">Submit a Complaint</span>
                             </a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/your-story/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 16 19"><path d="M6.808 11.29a3.19 3.19 0 0 1 .097 1.464 3.236 3.236 0 0 1-.535 1.277 3.15 3.15 0 0 1-2.286 1.316 3.43 3.43 0 0 1-2.628-.836A3.905 3.905 0 0 1 .26 12.269a4.433 4.433 0 0 1-.052-.653 5.807 5.807 0 0 1 .027-.74 5.497 5.497 0 0 1 .33-1.388 5.684 5.684 0 0 1 1.498-2.193A6.744 6.744 0 0 1 4.41 5.923q.344-.118.699-.201a1.241 1.241 0 0 1 .606-.046.792.792 0 0 1-.066 1.548 5.624 5.624 0 0 0-1.356.458 4.567 4.567 0 0 0-1.988 1.812 3.05 3.05 0 0 1 .998-.367 3.092 3.092 0 0 1 3.248 1.552 3.057 3.057 0 0 1 .257.611zm8.941.435a3.053 3.053 0 0 1 .038.708 3.185 3.185 0 0 1-1.207 2.265 3.334 3.334 0 0 1-2.609.615 3.375 3.375 0 0 1-2.165-1.35 3.722 3.722 0 0 1-.55-1.085 4.446 4.446 0 0 1-.203-1.224 5.63 5.63 0 0 1 .567-2.656 5.76 5.76 0 0 1 1.598-1.967 6.88 6.88 0 0 1 2.357-1.21 4.863 4.863 0 0 1 .676-.162.792.792 0 0 1 .602 1.404 1.277 1.277 0 0 1-.542.201 5.487 5.487 0 0 0-1.278.47 4.536 4.536 0 0 0-1.885 1.76 3.051 3.051 0 0 1 1.242-.4 3.098 3.098 0 0 1 3.359 2.631z"></path></svg>
-                                <span class="a-link_text">Tell Your Story</span>
+                                <span class="a-link__text">Tell Your Story</span>
                             </a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="a-link o-mega-menu_content-link o-mega-menu_content-2-link a-link__icon" href="https://pueblo.gpo.gov/CFPBPubs/CFPBPubs.php">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="a-link o-mega-menu__content-link o-mega-menu__content-2-link a-link__icon" href="https://pueblo.gpo.gov/CFPBPubs/CFPBPubs.php">
 <svg class="cf-icon-svg" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.477.477 0 0 1-.475-.475V3.046a.477.477 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.924H8.059a.575.575 0 0 1-.574-.574V3.679H1.95v11.84h8.102zM3.907 4.92a1.03 1.03 0 1 0 1.029 1.03 1.03 1.03 0 0 0-1.03-1.03zm4.958 3.253h-5.87v1.108h5.87zm0 2.354h-5.87v1.109h5.87zm0 2.354h-5.87v1.109h5.87z"></path></svg>
-<span class="a-link_text">Order free brochures</span>
+<span class="a-link__text">Order free brochures</span>
  <svg class="cf-icon-svg" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/ask-cfpb/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 11 19"><path d="M10.328 6.83a5.903 5.903 0 0 1-1.439 3.64 2.874 2.874 0 0 0-.584 1v1.037a.95.95 0 0 1-.95.95h-3.71a.95.95 0 0 1-.95-.95V11.47a2.876 2.876 0 0 0-.584-1A5.903 5.903 0 0 1 .67 6.83a4.83 4.83 0 0 1 9.28-1.878 4.796 4.796 0 0 1 .38 1.88zm-.95 0a3.878 3.878 0 0 0-7.756 0c0 2.363 2.023 3.409 2.023 4.64v1.037h3.71V11.47c0-1.231 2.023-2.277 2.023-4.64zM7.83 14.572a.475.475 0 0 1-.475.476h-3.71a.475.475 0 0 1 0-.95h3.71a.475.475 0 0 1 .475.474zm-.64 1.262a.238.238 0 0 1-.078.265 2.669 2.669 0 0 1-3.274 0 .237.237 0 0 1 .145-.425h2.983a.238.238 0 0 1 .225.16z"></path></svg>
-                                <span class="a-link_text">Browse Ask CFPB</span>
+                                <span class="a-link__text">Browse Ask CFPB</span>
                             </a>
                         </li>
 
@@ -563,9 +563,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/rules-policy/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/rules-policy/">
 <div aria-level="2" role="heading">
 
 
@@ -574,30 +574,30 @@ export default `
         Rules &amp; Policy
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/rules-policy/">
                 Rules &amp; Policy Overview
             </a>
@@ -608,11 +608,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -620,9 +620,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/final-rules/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/final-rules/">
 
 
 
@@ -640,9 +640,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/regulations/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/regulations/">
 
 
 
@@ -662,8 +662,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -671,9 +671,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/rules-under-development/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/rules-under-development/">
 
 
 
@@ -691,9 +691,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/notice-opportunities-comment/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/notice-opportunities-comment/">
 
 
 
@@ -711,9 +711,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/regulatory-agenda/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/regulatory-agenda/">
 
 
 
@@ -731,9 +731,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/petitions-rulemaking/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/petitions-rulemaking/">
 
 
 
@@ -753,8 +753,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -762,9 +762,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/competition-innovation/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/competition-innovation/">
 
 
 
@@ -782,9 +782,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/advisory-committees/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/advisory-committees/">
 
 
 
@@ -821,9 +821,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/enforcement/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/enforcement/">
 <div aria-level="2" role="heading">
 
 
@@ -832,30 +832,30 @@ export default `
         Enforcement
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/enforcement/">
                 Enforcement Overview
             </a>
@@ -866,11 +866,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Enforcement">
@@ -878,9 +878,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/actions/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/actions/">
 
 
 
@@ -898,9 +898,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/enforcement-by-the-numbers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/enforcement-by-the-numbers/">
 
 
 
@@ -918,9 +918,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/petitions/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/petitions/">
 
 
 
@@ -940,8 +940,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Enforcement">
@@ -949,9 +949,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/warning-letters/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/warning-letters/">
 
 
 
@@ -969,9 +969,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/payments-harmed-consumers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/payments-harmed-consumers/">
 
 
 
@@ -989,9 +989,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/information-industry-whistleblowers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/information-industry-whistleblowers/">
 
 
 
@@ -1028,9 +1028,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/compliance/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/compliance/">
 <div aria-level="2" role="heading">
 
 
@@ -1039,30 +1039,30 @@ export default `
         Compliance
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/compliance/">
                 Compliance Overview
             </a>
@@ -1073,11 +1073,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1085,9 +1085,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/compliance-resources/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/compliance-resources/">
 
 
 
@@ -1105,9 +1105,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/advisory-opinion-program/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/advisory-opinion-program/">
 
 
 
@@ -1125,9 +1125,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/circulars/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/circulars/">
 
 
 
@@ -1147,8 +1147,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1156,9 +1156,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervision-examinations/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervision-examinations/">
 
 
 
@@ -1176,9 +1176,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervisory-highlights/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervisory-highlights/">
 
 
 
@@ -1196,9 +1196,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervisory-guidance/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervisory-guidance/">
 
 
 
@@ -1218,8 +1218,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1227,9 +1227,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/registration-and-submission-programs/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/registration-and-submission-programs/">
 
 
 
@@ -1247,9 +1247,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/amicus/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/amicus/">
 
 
 
@@ -1286,9 +1286,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/data-research/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/data-research/">
 <div aria-level="2" role="heading">
 
 
@@ -1297,30 +1297,30 @@ export default `
         Data &amp; Research
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/data-research/">
                 Data &amp; Research Overview
             </a>
@@ -1331,11 +1331,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1343,9 +1343,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/research-reports/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/research-reports/">
 
 
 
@@ -1363,9 +1363,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/research-hub/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/research-hub/">
 
 
 
@@ -1383,9 +1383,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-complaints/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-complaints/">
 
 
 
@@ -1403,9 +1403,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/hmda/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/hmda/">
 
 
 
@@ -1425,8 +1425,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1434,9 +1434,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/public-data-inventory/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/public-data-inventory/">
 
 
 
@@ -1454,9 +1454,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-credit-trends/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-credit-trends/">
 
 
 
@@ -1474,9 +1474,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/mortgage-performance-trends/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/mortgage-performance-trends/">
 
 
 
@@ -1494,9 +1494,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/financial-well-being-survey-data/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/financial-well-being-survey-data/">
 
 
 
@@ -1516,8 +1516,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1525,9 +1525,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/credit-card-data/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/credit-card-data/">
 
 
 
@@ -1545,9 +1545,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/prepaid-accounts/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/prepaid-accounts/">
 
 
 
@@ -1572,21 +1572,21 @@ export default `
 
 
 
-            <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
+            <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list
-                            o-mega-menu_content-list__featured o-mega-menu_content-2-list__featured ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list
+                            o-mega-menu__content-list__featured o-mega-menu__content-2-list__featured ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Featured
                     </div>
                     <ul aria-label="Featured">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/financial-well-being-survey-data/">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/financial-well-being-survey-data/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 17 19"><path d="m12.673 10.779.798 4.02c.221 1.11-.407 1.566-1.395 1.013L8.5 13.81l-3.576 2.002c-.988.553-1.616.097-1.395-1.013l.397-2.001.401-2.02-1.51-1.397-1.498-1.385c-.832-.769-.592-1.507.532-1.64l2.026-.24 2.044-.242 1.717-3.722c.474-1.028 1.25-1.028 1.724 0l1.717 3.722 2.044.242 2.026.24c1.124.133 1.364.871.533 1.64L14.184 9.38z"></path></svg>
-                                <span><span class="a-link_text">Help advance financial well-being</span></span>
+                                <span><span class="a-link__text">Help advance financial well-being</span></span>
                             </a>
                         </li>
 
@@ -1611,9 +1611,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
 <div aria-level="2" role="heading">
 
 
@@ -1622,25 +1622,25 @@ export default `
         News
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
 
@@ -1648,11 +1648,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="News">
@@ -1660,9 +1660,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=press-release">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=press-release">
 
 
 
@@ -1680,9 +1680,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=op-ed&amp;categories=speech">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=op-ed&amp;categories=speech">
 
 
 
@@ -1700,9 +1700,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=testimony">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=testimony">
 
 
 
@@ -1720,9 +1720,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=directors-statement">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=directors-statement">
 
 
 
@@ -1742,8 +1742,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="News">
@@ -1751,9 +1751,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/blog/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/blog/">
 
 
 
@@ -1771,9 +1771,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/blog/?categories=directors-notebook">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/blog/?categories=directors-notebook">
 
 
 
@@ -1791,9 +1791,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/activity-log/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/activity-log/">
 
 
 
@@ -1811,9 +1811,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=consumer-advisories">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=consumer-advisories">
 
 
 
@@ -1869,54 +1869,54 @@ export default `
         <div class="wrapper
                     ">
 
-            <div class="m-global-eyebrow_actions">
+            <div class="m-global-eyebrow__actions">
                 <ul class="m-list
                            m-list__horizontal
-                           m-global-eyebrow_languages">
-                    <li class="m-list_item">
+                           m-global-eyebrow__languages">
+                    <li class="m-list__item">
 
                         <a href="/es/" hreflang="es" lang="es">
                             Español
                         </a>
 
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/zh/" hreflang="zh" lang="zh">
                             中文
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/vi/" hreflang="vi" lang="vi">
                             Tiếng Việt
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ko/" hreflang="ko" lang="ko">
                             한국어
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/tl/" hreflang="tl" lang="tl">
                             Tagalog
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ru/" hreflang="ru" lang="ru">
                             Pусский
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ar/" hreflang="ar" lang="ar">
                             العربية
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ht/" hreflang="ht" lang="ht">
                             Kreyòl Ayisyen
                         </a>
                     </li>
                 </ul>
-                <span class="m-global-eyebrow_phone">
+                <span class="m-global-eyebrow__phone">
                     <a href="tel:+1-855-411-2372">(855) 411-2372</a>
                 </span>
             </div>