diff --git a/cfgov/agreements/jinja2/agreements/search.html b/cfgov/agreements/jinja2/agreements/search.html
index 982e478063e..b7bd39d97d9 100755
--- a/cfgov/agreements/jinja2/agreements/search.html
+++ b/cfgov/agreements/jinja2/agreements/search.html
@@ -17,7 +17,7 @@ <h1>Credit card agreement database</h1>
     <div class="block">
         <div id="ccagrsearch">
             <h2>Agreements by '{{ issuer.name }}'</h2>
-            <table class="o-table o-table__striped o-table__stack-on-small u-w100pct">
+            <table class="o-table o-table--striped o-table--stack-on-small u-w100pct">
                 <thead>
                     <tr>
                         <th>Issuer</th>
@@ -99,7 +99,7 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                         of {{ page.paginator.num_pages }}
                     </label>
                     <button class="a-btn
-                                    a-btn__link
+                                    a-btn--link
                                     m-pagination__btn-submit"
                             id="m-pagination__btn-submit"
                             type="submit">Go</button>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
index cac24ed06bb..9123902140e 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
@@ -51,7 +51,7 @@ <h1>
 
         <div class="block block--sub">
 
-            <div class="o-summary o-summary__mobile">
+            <div class="o-summary o-summary--mobile">
                 <div class="o-summary__content answer-text">
                     {% include_block page.answer_content %}
                 </div>
@@ -67,7 +67,7 @@ <h2>{{ _('Don\'t see what you\'re looking for?') }}</h2>
                 {% if related_questions %}
                 <div class="block block--sub">
                     <h3>{{ _('Browse related questions') }} </h3>
-                    <ul class="m-list m-list__unstyled m-list--links">
+                    <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">
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
index 45aa7b7a645..bad492112c4 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
@@ -48,7 +48,7 @@ <h1>
                 </label>
                 <div class="m-form-field">
                     <input
-                        class="a-text-input a-text-input__full"
+                        class="a-text-input a-text-input--full"
                         type="text"
                         aria-label="{{ _('Search term') }}"
                         name="search_term"
@@ -56,7 +56,7 @@ <h1>
                         <button class="a-btn" id="ask-search" type="submit">
                             {{ _('Search') }}
                         </button>
-                        <a class="a-btn a-btn__link a-btn__warning"
+                        <a class="a-btn a-btn--link a-btn--warning"
                            href=".">
                             {{ _('Clear search') }}
                         </a>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/tip.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/tip.html
index 18690d37f75..9dbd977b614 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/tip.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/tip.html
@@ -14,7 +14,7 @@
 
    ========================================================================== #}
 
-<aside class="m-inset m-inset__bordered">
+<aside class="m-inset m-inset--bordered">
 	<h4>{{ _('Tip') }}</h4>
 	{{ value.content | richtext | safe }}
 </aside>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
index 08a7cb38356..3a7b1e70519 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
@@ -19,7 +19,7 @@
         <h1>Voluntary diversity assessment onboarding form</h1>
     </div>
     <div class="block">
-        <div class="m-notification m-notification__visible m-notification__success">
+        <div class="m-notification m-notification--visible m-notification--success">
             {{ svg_icon('approved-round') }}
             <div class="m-notification__content">
                 <div class="m-notification__message">
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 0fe80847fa1..2028a02830e 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
@@ -59,7 +59,7 @@ <h2>Institution information</h2>
             <div class="o-well u-mb30">
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.institution_name.id_for_label }}">
                             {{ form.institution_name.label }}
                         </label>
@@ -68,7 +68,7 @@ <h2>Institution information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.institution_address.id_for_label }}">
                             {{ form.institution_address.label }}
                         </label>
@@ -79,7 +79,7 @@ <h2>Institution information</h2>
                     <div class="content-l">
                         <div class="content-l__col content-l__col-1-2">
                             <div class="m-form-field">
-                                <label class="a-label a-label__heading"
+                                <label class="a-label a-label--heading"
                                        for="{{ form.institution_city.id_for_label }}">
                                     {{ form.institution_city.label }}
                                 </label>
@@ -88,7 +88,7 @@ <h2>Institution information</h2>
                         </div>
                         <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
-                                <label class="a-label a-label__heading"
+                                <label class="a-label a-label--heading"
                                        for="{{ form.institution_state.id_for_label }}">
                                     {{ form.institution_state.label }}
                                 </label>
@@ -97,7 +97,7 @@ <h2>Institution information</h2>
                         </div>
                         <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
-                                <label class="a-label a-label__heading"
+                                <label class="a-label a-label--heading"
                                        for="{{ form.institution_zip.id_for_label }}">
                                     {{ form.institution_zip.label }}
                                 </label>
@@ -108,7 +108,7 @@ <h2>Institution information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.tax_id.id_for_label }}">
                             {{ form.tax_id.label }}
                         </label>
@@ -123,7 +123,7 @@ <h2>Contact information</h2>
             <div class="o-well u-mb30">
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.contact_name.id_for_label }}">
                             {{ form.contact_name.label }}
                         </label>
@@ -132,7 +132,7 @@ <h2>Contact information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.contact_title.id_for_label }}">
                             {{ form.contact_title.label }}
                         </label>
@@ -141,7 +141,7 @@ <h2>Contact information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.contact_email.id_for_label }}">
                             {{ form.contact_email.label }}
                         </label>
@@ -150,7 +150,7 @@ <h2>Contact information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.contact_phone.id_for_label }}">
                             {{ form.contact_phone.label }}
                         </label>
@@ -159,7 +159,7 @@ <h2>Contact information</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
@@ -173,7 +173,7 @@ <h2>Contact information</h2>
                     <input class="a-btn"
                            type="submit"
                            value="Submit">
-                    <a class="a-btn a-btn__link a-btn__secondary"
+                    <a class="a-btn a-btn--link a-btn--secondary"
                        href="{{ url('diversity_inclusion:privacy') }}"
                        rel="noopener noreferrer"
                        target="_blank">
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 c63f0cde08a..6f21513d3a2 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
@@ -76,7 +76,7 @@ <h5>Instructions</h5>
     {% if valid_values %}
         {%- set header_row = valid_values[0] -%}
         {%- set body_rows = valid_values[1:] -%}
-        <table class="o-table o-table__stack-on-small">
+        <table class="o-table o-table--stack-on-small">
             <thead>
                 <tr>
                     {% for column in header_row %}
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 4b9ecc29c5b..a65271430ee 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
@@ -21,7 +21,7 @@
     <h1>{{ page.page_header }}</h1>
     <div class="lead-paragraph">{{ page.subheader }}</div>
     <div class="block block--border-top u-fig-print-link">
-      <a class="a-link a-link__icon" href="javascript:window.print()">
+      <a class="a-link a-link--icon" href="javascript:window.print()">
           <span class="a-link__text">Print this guide</span>
           {{ svg_icon('print') }}
       </a>
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 96b53607ffc..721e3748c59 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
@@ -13,14 +13,14 @@
 {% if effective_start_date and effective_end_date %}
     {% set date_message = 'You are viewing a previous version of the FIG, effective ' + effective_start_date + ' to ' + effective_end_date + '.' %}
 {% endif %}
-{% set banner_modification = ' o-banner__dark' if version_status == 'Archived' else ''  %}
+{% set banner_modification = ' o-banner--dark' if version_status == 'Archived' else ''  %}
 
 {% block banner_top %}
     {% if version_status %}
         {% import 'v1/includes/molecules/notification.html' as notification with context %}
         <div class="o-banner{{ banner_modification }}">
             <div class="wrapper
-                        wrapper__match-content">
+                        wrapper--match-content">
                 {{ notification.render(
                     'warning',
                     true,
@@ -37,7 +37,7 @@
 {% endblock %}
 
 {% block content scoped %}
-    <main class="u-layout-grid u-layout-grid__1-3
+    <main class="u-layout-grid u-layout-grid--1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
         <div class="u-layout-grid__wrapper">
diff --git a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
index f87f9ddc8a5..e18002561b3 100644
--- a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
+++ b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
@@ -19,10 +19,10 @@
     {% set category_index = loop.index %}
     {% for item in category.notes %}
         {% set id = 'page-' + page_num | string + '-category-' + category_index | string + '-note-'  + loop.index | string %}
-        <a class="image-map_overlay image-map_overlay__category-{{ category_index }}"
+        <a class="image-map__overlay image-map__overlay--category-{{ category_index }}"
            style="{{ 'top:' + item.coordinates.top | string + '%; left:' + item.coordinates.left | string + '%; width:' + item.coordinates.width | string + '%; height:' + item.coordinates.height | string + '%;' }}"
            href="#{{ id }}"
-           id="image-map_overlay__{{ id }}"
+           id="image-map__overlay--{{ id }}"
            tabindex="-1">
           <span class="u-visually-hidden">{{ item.heading }}</span>
          </a>
@@ -156,14 +156,14 @@
 
         {% for page in value.pages %}
         {% set page_num = loop.index %}
-        <div class="explain_page"
-             id="explain_page-{{ page_num }}">
-            <figure class="explain_container">
-                <div class="image-map explain_image-map">
-                    <div class="image-map_wrapper">
+        <div class="explain__page"
+             id="explain__page-{{ page_num }}">
+            <figure class="explain__container">
+                <div class="image-map explain__image-map">
+                    <div class="image-map__wrapper">
                         {% if page_count > 1 %}
-                            <div class="form-explainer_page-buttons">
-                                <button class="prev a-btn a-btn__disabled"
+                            <div class="form-explainer__page-buttons">
+                                <button class="prev a-btn a-btn--disabled"
                                         aria-label="Previous page">
                                     {{ svg_icon('left') }}
                                 </button>
@@ -174,15 +174,15 @@
                             </div>
                         {% endif %}
                         {% set media = image(page.image, 'original') %}
-                        <img class="image-map_image"
+                        <img class="image-map__image"
                              src="{{ media.url }}"
                              alt="">
                         {{ render_map_points( page.categories, page_num ) }}
                     </div>
                 </div>
-                <figcaption class="explain_terms">
+                <figcaption class="explain__terms">
                     <div class="o-expandable-group
-                                o-expandable-group__accordion">
+                                o-expandable-group--accordion">
                         {% for category in page.categories %}
                             {% set category_index = loop.index %}
                             {% if category.title %}
diff --git a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
index 180ba647946..b6483c7afb9 100644
--- a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
+++ b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
@@ -4,7 +4,7 @@
         <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">
+                    <label class="a-label a-label--heading" for="id_geo">
                         Geographic area
                     </label>
                     <div class="a-select">
@@ -29,7 +29,7 @@
                     Records included
                 </legend>
                {% for radio in form.records %}
-                <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                     <input class="a-radio" name="{{ radio.data.name }}" type="radio" id="{{ radio.id_for_label }}" value="{{ radio.data.value }}" {% if radio.data.selected %} checked{% endif %}>
                     <label class="a-label" for="{{ radio.id_for_label }}">
                         {{ radio.choice_label}}
@@ -53,7 +53,7 @@
                     Variable descriptions
                 </legend>
                {% for radio in form.field_descriptions %}
-                  <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                  <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                       <input class="a-radio" name="{{ radio.data.name }}" type="radio" id="{{ radio.id_for_label }}" value="{{ radio.data.value }}" {% if radio.data.selected %} checked{% endif %}>
                       <label class="a-label" for="{{ radio.id_for_label }}">
                           {{ radio.choice_label }}
diff --git a/cfgov/housing_counselor/jinja2/housing_counselor/index.html b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
index 4da4437faa8..08e22259ab8 100644
--- a/cfgov/housing_counselor/jinja2/housing_counselor/index.html
+++ b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
@@ -60,7 +60,7 @@ <h1>Find a housing counselor</h1>
                         and Urban Development (HUD) and they can
                         offer independent advice, often at little or
                         no cost to you. There is also a
-                        <a class="a-link a-link__icon"
+                        <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>.
                     </p>
@@ -105,20 +105,20 @@ <h2 class="m-slug-header__heading">
             <section id="hud_search_container"
                         class="no-js
                             hud-search-container">
-                <div class="hud-search-container_text">
+                <div class="hud-search-container__text">
                     <form class="o-form" action="#hud_search_container">
                         <div class="m-form-field-with-button">
 
                             <div class="m-form-field">
-                                <label class="a-label a-label__heading" for="hud_hca_api_query">
+                                <label class="a-label a-label--heading" for="hud-hca-api-query">
                                     Search by ZIP code:
                                 </label>
 
                                 {% if zipcode and error_message %}
                                 <div class="u-mb15">
                                     <div class="m-notification
-                                                m-notification__error
-                                                m-notification__visible">
+                                                m-notification--error
+                                                m-notification--visible">
                                         {{ svg_icon('warning-round') }}
                                         <div class="m-notification__content" role="alert">
                                             <div class="m-notification__message">
@@ -132,15 +132,15 @@ <h2 class="m-slug-header__heading">
                                 </div>
                                 {% endif %}
 
-                                <input id="hud_hca_api_query"
+                                <input id="hud-hca-api-query"
                                         type="text"
                                         name="zipcode"
-                                        class="a-text-input a-text-input__full"
+                                        class="a-text-input a-text-input--full"
                                         value="{% if zipcode %}{{ zipcode }}{% endif %}"
                                         placeholder="Please enter a five-digit ZIP code">
                             </div>
 
-                            <button class="a-btn a-btn__full-on-xs"
+                            <button class="a-btn a-btn--full-on-xs"
                                     type="submit"
                                     data-cy="btn-fahc-submit">
                                 Find a counselor
@@ -148,7 +148,7 @@ <h2 class="m-slug-header__heading">
                             <div class="m-form-field-with-button__info">
                                 <p>
                                     This tool is powered by
-                                    <a class="a-link a-link__icon"
+                                    <a class="a-link a-link--icon"
                                         href="https://data.hud.gov/housing_counseling.html">
                                         <span class="a-link__text">HUD's</span>
                                         {{ svg_icon('external-link') }}</a>
@@ -174,12 +174,12 @@ <h2 class="m-slug-header__heading">
 
                 </div>
                 {% if zipcode and zipcode_valid %}
-                    <div class="hud-search-container_map">
+                    <div class="hud-search-container__map">
                         <!-- Mapbox map is ignored during voiceover navigation
                             as set by aria-hidden. -->
-                        <div id="hud_hca_api_map_container"
+                        <div id="hud-hca-api-map-container"
                             aria-hidden="true">
-                            <div id="hud_hca_api_map_canvas"></div>
+                            <div id="hud-hca-api-map-canvas"></div>
                         </div><!-- end .hud_hca_api_map -->
                     </div>
                 {% endif %}
@@ -190,11 +190,11 @@ <h2 class="m-slug-header__heading">
         <div class="block" id="hud_results-list_container">
             <div class="results-header">
                 <ul class="m-list
-                            m-list--horizontal
-                            hud_hca_api_results_actions">
+                           m-list--horizontal
+                           hud-hca-api-results-actions">
                     <li class="m-list__item">
                         <a class="a-link
-                                    a-link__icon"
+                                    a-link--icon"
                             id="hud_print-page-link"
                             href="#">
                             <span class="a-link__text">Print list</span>
@@ -202,7 +202,7 @@ <h2 class="m-slug-header__heading">
                         </a>
                     </li>
                     <li class="m-list__item">
-                        <a class="a-link a-link__icon"
+                        <a class="a-link a-link--icon"
                             id="generate-pdf-link"
                             href="{{ pdf_url }}"
                             target="_blank"
@@ -222,7 +222,7 @@ <h2 class="h4">
             </div>
 
             <table class="o-table
-                            o-table__stack-on-small
+                            o-table--stack-on-small
                             u-w100pct">
                 <thead>
                     <tr>
@@ -242,7 +242,7 @@ <h2 class="h4">
                                             itemtype="https://schema.org/PostalAddress">
 
                                         {% if counselor.weburl %}
-                                        <a class="a-link a-link__icon"
+                                        <a class="a-link a-link--icon"
                                             href="{{ counselor.weburl }}">
                                             <span class="a-link__text"><b itemprop="name">{{ counselor.nme }}</b></span>
                                             {{ svg_icon('external-link') }}
@@ -269,7 +269,7 @@ <h2 class="h4">
                                         {% if counselor.weburl %}
                                         <dt>Website:</dt>
                                         <dd>
-                                        <a class="a-link a-link__icon"
+                                        <a class="a-link a-link--icon"
                                             href="{{ counselor.weburl }}"
                                             itemprop="url">
                                             <span class="a-link__text">{{ counselor.weburl }}</span>
diff --git a/cfgov/housing_counselor/templates/housing_counselor/pdf_selfcontained.html b/cfgov/housing_counselor/templates/housing_counselor/pdf_selfcontained.html
index c23da1e2c96..fe44c42d508 100644
--- a/cfgov/housing_counselor/templates/housing_counselor/pdf_selfcontained.html
+++ b/cfgov/housing_counselor/templates/housing_counselor/pdf_selfcontained.html
@@ -231,7 +231,7 @@
                             <div class="hud_hca_api_results_total col">
                                 <p>10 closest results to ZIP code <span class="hud_hca_api_search_zip">{{ zipcode }}</span></p>
                             </div><!-- end .hud_hca_api_results_total -->
-                            <div class="hud_hca_api_results_actions col">
+                            <div class="hud-hca-api-results-actions col">
                                 <p>
                                     <span class="hud_hca_api_results_print"><span class="hud_hca_api_no_js_print_text">Print with Browser</span></span>
                                     <span class="hud_hca_api_results_save">
@@ -242,7 +242,7 @@
                                        </a>
                                    </span>
                                 </p>
-                            </div><!-- end .hud_hca_api_results_actions -->
+                            </div><!-- end .hud-hca-api-results-actions -->
                             <div class="hud_hca_api_grid_three hud_hca_api_titles">
                                 <div class="col">
                                     <h2>Agency</h2>
@@ -283,7 +283,7 @@ <h2 class="cfpb_visually_hide">Agency</h2>
                                             </span></span>
                                             <div class="show-hide-mod default-hidden">
                                                 <span class="show-hide-icon hud_hca_api_print_hide"></span>
-                                                <button class="a-btn a-btn__link show-hide-link hud_hca_api_print_hide" data-texthide="Hide" data-textshow="View">
+                                                <button class="a-btn a-btn--link show-hide-link hud_hca_api_print_hide" data-texthide="Hide" data-textshow="View">
                                                     <span class="show-hide-name">View</span>
                                                     languages offered at this location
                                                 </button>
diff --git a/cfgov/jinja2/ccdb-complaint/ccdb-search.html b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
index 3e0cbb5037c..f04c3f1f834 100644
--- a/cfgov/jinja2/ccdb-complaint/ccdb-search.html
+++ b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_modifiers -%}
-  {{ super() }} u-layout-grid__full-width
+  {{ super() }} u-layout-grid--full-width
 {%- endblock %}
 
 {% block content_main_modifiers -%}
diff --git a/cfgov/jinja2/know-before-you-owe/compare/index.html b/cfgov/jinja2/know-before-you-owe/compare/index.html
index b9e3fc729cf..5675ec4fcd1 100644
--- a/cfgov/jinja2/know-before-you-owe/compare/index.html
+++ b/cfgov/jinja2/know-before-you-owe/compare/index.html
@@ -37,7 +37,7 @@ <h1>How we improved the disclosures</h1>
         <ul class="m-list m-list--links">
             <li class="m-list__item">
                 <a class="a-link
-                          a-link__icon
+                          a-link--icon
                           m-list__link"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-testing.pdf">
                     <span class="a-link__text">
@@ -48,7 +48,7 @@ <h1>How we improved the disclosures</h1>
             </li>
             <li class="m-list__item">
                 <a class="a-link
-                          a-link__icon
+                          a-link--icon
                           m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_report_tila-respa_testing-spanish-refinancing.pdf">
                     <span class="a-link__text">
@@ -59,7 +59,7 @@ <h1>How we improved the disclosures</h1>
             </li>
             <li class="m-list__item">
                 <a class="a-link
-                          a-link__icon
+                          a-link--icon
                           m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_study_tila-respa_disclosure-comparison.pdf">
                     <span class="a-link__text">
@@ -163,7 +163,7 @@ <h3>Closing Disclosure</h3>
     </div>
 </article>
 <section class="u-layout-grid__breakout kbyo-footer">
-    <div class="wrapper wrapper__match-content">
+    <div class="wrapper wrapper--match-content">
         <div class="content-l">
           <div class="content-l__col
                       content-l__col-1-2">
diff --git a/cfgov/jinja2/know-before-you-owe/index.html b/cfgov/jinja2/know-before-you-owe/index.html
index d2f95b0ccfb..a7797b7d8ac 100644
--- a/cfgov/jinja2/know-before-you-owe/index.html
+++ b/cfgov/jinja2/know-before-you-owe/index.html
@@ -112,7 +112,7 @@ <h2>Tools and resources</h2>
                     <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"
+                                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">
@@ -136,7 +136,7 @@ <h3>Sample Loan Estimate</h3>
                     <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"
+                                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">
@@ -162,7 +162,7 @@ <h3>Sample Closing Disclosure</h3>
                     <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"
+                                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">
@@ -186,7 +186,7 @@ <h3>Buying a House</h3>
                     <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"
+                                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">
@@ -195,7 +195,7 @@ <h3>Your Home Loan Toolkit</h3>
                                 <ul class="m-list m-list--links">
                                     <li class="m-list__item">
                                         <a class="a-link
-                                                  a-link__icon
+                                                  a-link--icon
                                                   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>
@@ -211,7 +211,7 @@ <h3>Your Home Loan Toolkit</h3>
         </div>
     </div>
     <div class="u-layout-grid__breakout kbyo-professional-resources">
-        <div class="wrapper wrapper__match-content">
+        <div class="wrapper wrapper--match-content">
             <div class="o-info-unit-group">
                 <div class="content-l">
                     <div class="content-l__col
@@ -372,7 +372,7 @@ <h2>Timeline</h2>
         </div>
     </div>
     <section class="u-layout-grid__breakout kbyo-footer">
-        <div class="wrapper wrapper__match-content">
+        <div class="wrapper wrapper--match-content">
             <div class="content-l">
             <div class="content-l__col
                         content-l__col-1-2">
@@ -394,7 +394,7 @@ <h2 class="m-slug-header__heading">
                 </li>
                 <li class="m-list__item">
                     <a class="a-link
-                            a-link__icon
+                            a-link--icon
                             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>
@@ -419,7 +419,7 @@ <h2 class="m-slug-header__heading">
                 <ul class="m-list m-list--links">
                 <li class="m-list__item">
                     <a class="a-link
-                            a-link__icon
+                            a-link--icon
                             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>
@@ -428,7 +428,7 @@ <h2 class="m-slug-header__heading">
                 </li>
                 <li class="m-list__item">
                     <a class="a-link
-                            a-link__icon
+                            a-link--icon
                             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>
diff --git a/cfgov/jinja2/know-before-you-owe/timeline/index.html b/cfgov/jinja2/know-before-you-owe/timeline/index.html
index 8430ad90b6f..c0272373b86 100644
--- a/cfgov/jinja2/know-before-you-owe/timeline/index.html
+++ b/cfgov/jinja2/know-before-you-owe/timeline/index.html
@@ -38,7 +38,7 @@ <h1>Timeline</h1>
             <h2>The Dodd-Frank Wall Street Reform and Consumer Protection Act is signed into law.</h2>
             <p> The
                  <a class="a-link
-                           a-link__icon"
+                           a-link--icon"
                     href="https://www.gpo.gov/fdsys/pkg/BILLS-111hr4173enr/pdf/BILLS-111hr4173enr.pdf">
                     <span class="a-link__text">new law</span>
                     {{ svg_icon('download') }}
@@ -76,14 +76,14 @@ <h2>Qualitative testing begins in Baltimore.</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                  <a class="a-link
-                           a-link__icon"
+                           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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -99,14 +99,14 @@ <h2>Los Angeles, CA</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -122,14 +122,14 @@ <h2>Chicago, IL</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -145,14 +145,14 @@ <h2>Springfield, MA</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -168,14 +168,14 @@ <h2>Albuquerque, NM</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -191,14 +191,14 @@ <h2>Des Moines, IA</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -214,14 +214,14 @@ <h2>Birmingham, AL</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -237,21 +237,21 @@ <h2>Philadelphia, PA</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -267,14 +267,14 @@ <h2>Austin, TX</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -295,7 +295,7 @@ <h2>We convene a small business review panel.</h2>
             <h2>We meet with small businesses.</h2>
             <p> The panel met with small businesses and asked for their feedback on the impacts of various proposals the CFPB is considering.
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -313,21 +313,21 @@ <h2>Back to Baltimore!</h2>
             <h3 class="h5">Disclosures tested:</h3>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -341,7 +341,7 @@ <h3 class="h5">Disclosures tested:</h3>
             <h2>Proposal of the new rule.</h2>
             <p>
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -371,7 +371,7 @@ <h2>We test Spanish language versions of the disclosures across the country.</h2
             <h2>Validating our testing</h2>
             <p> With the help of Kleimann Communication Group, the contractor who helped us throughout the testing process, we conducted
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -385,7 +385,7 @@ <h2>Validating our testing</h2>
             <h2>Additional testing with modified disclosures</h2>
             <p> In response to comments, we developed and tested different versions of the disclosures for refinance loans, which we tested for three rounds. (In our last round, we tested a modification for both purchases and refinances.) We also did one more round of Spanish language testing for the refinance versions.
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -417,7 +417,7 @@ <h2>Resources for mortgage professionals are created.</h2>
             <h2>A guide to forms is published for mortgage professionals.</h2>
             <p>We published a
                 <a class="a-link
-                          a-link__icon"
+                          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>
                     {{ svg_icon('download') }}
@@ -440,7 +440,7 @@ <h2>A readiness guide is published for mortgage professionals.</h2>
             <h2>Owning a Home debuts.</h2>
             <p>Owning a Home, an online suite of tools and resources that helps consumers learn about mortgages, debuts with the
                 <a class="a-link
-                          a-link__icon"
+                          a-link--icon"
                     href="https://www.consumerfinance.gov/owning-a-home/resources/checklist_mortgage_closing.pdf">
                     <span class="a-link__text">closing checklist</span>
                     {{ svg_icon('download') }}
@@ -471,7 +471,7 @@ <h2>Amendments to the rule are issued.</h2>
                 <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"
+            <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>
         </div>
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
index bb89778ddff..89ecef331fd 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
@@ -85,7 +85,7 @@ <h3 class="brand-footer_heading">
 {% endif %}
 
 <a class="a-link
-          a-link__jump"
+          a-link--jump"
    href="{{ link.url }}"
    aria-label="{{ link.label }}">
     {{ link.text | safe }}
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-header.html b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
index a23021b86fd..dd79f312188 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-header.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
@@ -8,7 +8,7 @@
       </div>
     </div>
     <div class="brand-header__1-2-container">
-      <div class="brand-header_text">
+      <div class="brand-header__text">
         We are the Consumer Financial Protection Bureau (CFPB), a U.S. government agency
         that makes sure banks, lenders, and other financial companies treat you fairly.
         <a href="https://www.consumerfinance.gov/about-us/the-bureau/">Learn how the CFPB can help you.</a>
diff --git a/cfgov/jinja2/owning-a-home/_templates/no_js.html b/cfgov/jinja2/owning-a-home/_templates/no_js.html
index 242242224c2..fb4f425f15a 100644
--- a/cfgov/jinja2/owning-a-home/_templates/no_js.html
+++ b/cfgov/jinja2/owning-a-home/_templates/no_js.html
@@ -1,5 +1,5 @@
 <div class="m-notification
-            m-notification__error
+            m-notification--error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
     <div class="m-notification__content">
diff --git a/cfgov/jinja2/owning-a-home/explore-rates/index.html b/cfgov/jinja2/owning-a-home/explore-rates/index.html
index 982cf3b25d9..4ad44f8e23d 100644
--- a/cfgov/jinja2/owning-a-home/explore-rates/index.html
+++ b/cfgov/jinja2/owning-a-home/explore-rates/index.html
@@ -70,18 +70,18 @@ <h4>Explore rate options</h4>
                 <section id="credit-score-container">
                     <div class="a-range recalc" id="credit-score-range">
                         <label for="credit-score">Credit score range</label>
-                        <div class="a-range_labels">
-                            <span class="a-range_labels-min">600</span>
-                            <span class="a-range_labels-max">850</span>
+                        <div class="a-range__labels">
+                            <span class="a-range__labels-min">600</span>
+                            <span class="a-range__labels-max">850</span>
                         </div>
                         <input id="credit-score"
-                                class="a-range_input"
+                                class="a-range__input"
                                 type="range"
                                 min="600"
                                 max="840"
                                 step="20"
                                 value="700">
-                        <div id="slider-range" class="a-range_text"></div>
+                        <div id="slider-range" class="a-range__text"></div>
 
                         {#
                             Credit alert for when low credit score is chosen.
@@ -92,7 +92,7 @@ <h4>Explore rate options</h4>
                                     u-hidden"
                                 id="credit-score-alert"
                                 role="alert">
-                            <div class="a-form-alert a-form-alert__error">
+                            <div class="a-form-alert a-form-alert--error">
                                 {{ svg_icon('warning-round') }}
                                 <span class="a-form-alert__text">
                                     Many lenders do not accept
@@ -225,7 +225,7 @@ <h4>Explore rate options</h4>
                                 u-hidden"
                             id="dp-alert"
                             role="alert">
-                        <div class="a-form-alert a-form-alert__warning">
+                        <div class="a-form-alert a-form-alert--warning">
                             {{ svg_icon('warning-round') }}
                             <span class="a-form-alert__text">
                                 Your down payment cannot be more than your
@@ -236,7 +236,7 @@ <h4>Explore rate options</h4>
                 </section>
                 <section class="form-sub warning u-hidden"
                             id="county-warning">
-                    <div class="a-form-alert a-form-alert__warning">
+                    <div class="a-form-alert a-form-alert--warning">
                         {{ svg_icon('warning-round') }}
                         <span class="a-form-alert__text"></span>
                     </div>
@@ -291,7 +291,7 @@ <h4>Explore rate options</h4>
                     </div>
                 </section>
                 <section class="form-sub warning u-hidden" id="arm-warning">
-                    <div class="a-form-alert a-form-alert__warning">
+                    <div class="a-form-alert a-form-alert--warning">
                         {{ svg_icon('warning-round') }}
                         <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.
@@ -299,7 +299,7 @@ <h4>Explore rate options</h4>
                     </div>
                 </section>
                 <section class="form-sub warning u-hidden" id="hb-warning">
-                    <div class="a-form-alert a-form-alert__warning">
+                    <div class="a-form-alert a-form-alert--warning">
                         {{ svg_icon('warning-round') }}
                         <span class="a-form-alert__text"></span>
                     </div>
@@ -328,11 +328,11 @@ <h3>Data table</h3>
                 </div>
                 <section id="chart-section" class="chart">
                     <div class="chart-menu">
-                        <button class="chart-menu_btn">
+                        <button class="chart-menu__btn">
                             Download chart
                             {{ svg_icon('download') }}
                         </button>
-                        <ul class="chart-menu_options">
+                        <ul class="chart-menu__options">
                             <li>PNG</li>
                             <li>SVG</li>
                             <li>JPEG</li>
@@ -356,7 +356,7 @@ <h3>Data table</h3>
                     <div id="chart-result-alert"
                             class="result-alert
                                 m-notification
-                                m-notification__error"
+                                m-notification--error"
                             role="alert">
                         {{ svg_icon('error-round') }}
                         <div class="m-notification__content">
@@ -375,7 +375,7 @@ <h3>Data table</h3>
                     <div id="chart-fail-alert"
                             class="result-alert
                                 m-notification
-                                m-notification__error"
+                                m-notification--error"
                             role="alert">
                         {{ svg_icon('error-round') }}
                         <div class="m-notification__content">
@@ -505,7 +505,7 @@ <h4 class="next-steps-heading">Watch your spending.</h4>
                             <p>
                                 <a id="go-ask-credit-score"
                                     class="a-link
-                                            a-link__jump"
+                                            a-link--jump"
                                     href="/ask-cfpb/what-is-a-credit-score-en-315/"
                                     target="_blank"
                                     rel="noopener noreferrer">
@@ -520,7 +520,7 @@ <h4 class="next-steps-heading">Improve your credit scores.</h4>
                             <p>
                                 <a id="go-ask-good-credit"
                                     class="a-link
-                                            a-link__jump"
+                                            a-link--jump"
                                     href="/ask-cfpb/how-do-i-get-and-keep-a-good-credit-score-en-318/"
                                     target="_blank"
                                     rel="noopener noreferrer">
@@ -535,7 +535,7 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                             <p>
                                 <a id="go-ask-down-payment-affect"
                                     class="a-link
-                                            a-link__jump"
+                                            a-link--jump"
                                     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">
@@ -556,8 +556,8 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                 {# TODO: Look into using the default notification macro #}
                 <div class="m-notification__borderless
                             m-notification
-                            m-notification__warning
-                            m-notification__visible"
+                            m-notification--warning
+                            m-notification--visible"
                         role="alert">
                     {{ svg_icon('warning-round') }}
                     <div class="m-notification__content">
diff --git a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
index 242242224c2..fb4f425f15a 100644
--- a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
+++ b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
@@ -1,5 +1,5 @@
 <div class="m-notification
-            m-notification__error
+            m-notification--error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
     <div class="m-notification__content">
diff --git a/cfgov/jinja2/rural-or-underserved/index.html b/cfgov/jinja2/rural-or-underserved/index.html
index 7829716b126..6c2dea019ea 100644
--- a/cfgov/jinja2/rural-or-underserved/index.html
+++ b/cfgov/jinja2/rural-or-underserved/index.html
@@ -53,8 +53,8 @@ <h1>Rural and underserved areas tool</h1>
                                 block--padded-bottom
                                 u-hidden">
                         <div class="m-notification
-                                    m-notification__visible
-                                    m-notification__error">
+                                    m-notification--visible
+                                    m-notification--error">
                             {{ svg_icon('error-round') }}
                             <div class="m-notification__content">
                                 <div class="m-notification__message">
@@ -74,8 +74,8 @@ <h1>Rural and underserved areas tool</h1>
                                 block--padded-bottom
                                 u-hidden">
                         <div class="m-notification
-                                    m-notification__visible
-                                    m-notification__error">
+                                    m-notification--visible
+                                    m-notification--error">
                             {{ svg_icon('error-round') }}
                             <div class="m-notification__content">
                                 <div class="m-notification__message">
@@ -136,7 +136,7 @@ <h4>Enter addresses manually</h4>
                                     </label>
                                     <input
                                         class="a-text-input
-                                               a-text-input__full
+                                               a-text-input--full
                                                input-address"
                                         id="address1-input"
                                         name="address1"
@@ -173,7 +173,7 @@ <h4>Upload a CSV file</h4>
                                     </label>
                                     <!-- Styled faux overlay component. -->
                                     <button class="a-btn
-                                                   a-btn__secondary
+                                                   a-btn--secondary
                                                    a-btn__flush-right">
                                         Select file
                                     </button>
@@ -219,7 +219,7 @@ <h2 id="countMessage">
                     </h2>
                 </div>
                 <p class="hide-print content-l__col content-l__col-1-4">
-                    <a class="a-btn a-btn__secondary" href="/rural-or-underserved-tool/">
+                    <a class="a-btn a-btn--secondary" href="/rural-or-underserved-tool/">
                         Start a new search
                     </a>
                 </p>
@@ -228,7 +228,7 @@ <h2 id="countMessage">
                     <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
-                                <a class="ruralCnt no-decoration counter no-decoration" href="#rural">
+                                <a class="rural-cnt no-decoration counter no-decoration" href="#rural">
                                     0
                                 </a>
                             </strong>
@@ -240,7 +240,7 @@ <h4>
                     <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
-                                <a class="notRuralCnt no-decoration counter no-decoration" href="#notRural">
+                                <a class="not-rural-cnt no-decoration counter no-decoration" href="#notRural">
                                     0
                                 </a>
                             </strong>
@@ -252,7 +252,7 @@ <h4>
                     <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
-                                <a class="notFoundCnt no-decoration counter no-decoration" href="#notFound">
+                                <a class="not-found-cnt no-decoration counter no-decoration" href="#notFound">
                                     0
                                 </a>
                             </strong>
@@ -264,7 +264,7 @@ <h4>
                     <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
-                                <a class="duplicateCnt no-decoration counter no-decoration" href="#duplicate">
+                                <a class="duplicate-cnt no-decoration counter no-decoration" href="#duplicate">
                                     0
                                 </a>
                             </strong>
@@ -289,14 +289,14 @@ <h4>
                 <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><span class="rural-cnt counter">0</span></strong> <span class="ruralCase case">addresses are</span> designated as rural or underserved for
                             <strong class="chosenYear"></strong>
                         </h2>
                         <p>
                             First-lien covered transactions extended in <span class="chosenYear">2015</span> that are secured by these properties can be counted as rural or underserved in your determination of your first-lien covered transactions in <span class="chosenYear">2015</span> that are secured by properties located in rural or underserved areas.
                         </p>
 
-                        <div class="o-table o-table-wrapper__scrolling">
+                        <div class="o-table o-table-wrapper--scrolling">
                             <table class="rout-results-table">
                                 <thead>
                                     <tr>
@@ -316,20 +316,20 @@ <h2 class="js-table-title">
                                   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>
+                            <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">
                         <h2 class="js-table-title">
-                        <strong><span class="notRuralCnt counter">0</span></strong> <span class="notRuralCase case">addresses are</span>
+                        <strong><span class="not-rural-cnt counter">0</span></strong> <span class="notRuralCase case">addresses are</span>
                         <strong>not</strong> designated as rural or underserved for
                         <strong class="chosenYear"></strong>
                         </h2>
                         <p class="col-8">These properties <strong>cannot</strong> be counted as rural or underserved.</p>
 
-                        <div class="o-table o-table-wrapper__scrolling">
+                        <div class="o-table o-table-wrapper--scrolling">
                             <table class="rout-results-table">
                                 <thead>
                                     <tr>
@@ -349,14 +349,14 @@ <h2 class="js-table-title">
                                   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>
+                            <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">
                         <h2 class="js-table-title">
-                            <strong><span class="notFoundCnt counter">0</span></strong> <span class="notFoundCase case">addresses are</span> not identified
+                            <strong><span class="not-found-cnt counter">0</span></strong> <span class="notFoundCase case">addresses are</span> not identified
                         </h2>
                         <p class="col-8">
                             The locations of these addresses could not be identified because the information provided was not sufficient, the information could not be matched with an address or the information matches with multiple addresses.
@@ -365,7 +365,7 @@ <h2 class="js-table-title">
                             To run your search again once you have updated the information for these addresses, return to the previous page and start a new search.
                         </p>
 
-                        <div class="o-table o-table-wrapper__scrolling">
+                        <div class="o-table o-table-wrapper--scrolling">
                             <table class="rout-results-table">
                                 <thead>
                                     <tr>
@@ -385,14 +385,14 @@ <h2 class="js-table-title">
                                   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>
+                            <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">
                         <h2 class="js-table-title">
-                            <strong><span class="duplicateCnt counter">0</span></strong> <span class="duplicateCase case">addresses are</span> identified as duplicate
+                            <strong><span class="duplicate-cnt counter">0</span></strong> <span class="duplicateCase case">addresses are</span> identified as duplicate
                         </h2>
                         <p class="col-8">
                             These addresses have been identified as duplicate entries, and only the first instance of each address has been counted in the other three categories of results.
@@ -401,7 +401,7 @@ <h2 class="js-table-title">
                             To update or remove the information for these addresses, start a new search.
                         </p>
 
-                        <div class="o-table o-table-wrapper__scrolling">
+                        <div class="o-table o-table-wrapper--scrolling">
                             <table class="rout-results-table">
                                 <thead>
                                     <tr>
@@ -421,8 +421,8 @@ <h2 class="js-table-title">
                                   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>
+                            <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>
                         </p>
                     </div>
                 </div>
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
index 3712d4e6176..871d6160b93 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
@@ -23,7 +23,7 @@
 <div class="m-jobs-list">
     {% if value.jobs %}
     <h3>Current openings</h3>
-    <ul class="m-list m-list__unstyled m-list--links">
+    <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"
@@ -38,7 +38,7 @@ <h3>Current openings</h3>
         </li>
         {% endfor %}
     </ul>
-    <a class="a-btn a-btn__full-on-xs"
+    <a class="a-btn a-btn--full-on-xs"
        href="{{ value.more_jobs_url }}">
        View all job openings
     </a>
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
index 3e7816131f4..45c4ffe688f 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
@@ -28,24 +28,24 @@
     {% endwith %}
 
     <section class="block
-                    block__padded-top
-                    block__border-top
+                    block--padded-top
+                    block--border-top
                     vacancy-announcement_description">
 
-        <div class="o-summary o-summary__mobile">
+        <div class="o-summary o-summary--mobile">
             <div id="job-description-expandable"
                  class="o-summary__content">
                 <h4>Summary</h4>
                 {{ page.description | safe }}
                 {% if page.responsibilities %}
-                    <div class="block block__sub">
+                    <div class="block block--sub">
                         <h4>Responsibilities</h4>
                         {{ page.responsibilities | safe }}
                     </div>
                 {% endif %}
 
                 {% if page.travel_required %}
-                    <div class="block block__sub">
+                    <div class="block block--sub">
                         <h4>Travel required</h4>
                         {% if page.travel_details %}
                         {{ page.travel_details | safe }}
@@ -56,14 +56,14 @@ <h4>Travel required</h4>
                 {% endif %}
 
                 {% if page.additional_section_title and page.additional_section_content %}
-                    <div class="block block__sub">
+                    <div class="block block--sub">
                         <h4>{{ page.additional_section_title }}</h4>
                         {{ page.additional_section_content | safe }}
                     </div>
                 {% endif %}
 
                 {% if page.service_type and page.job_length %}
-                    <div class="block block__sub">
+                    <div class="block block--sub">
                         <h4>Position type</h4>
                         {{- page.service_type }}, {{ page.job_length | lower -}}
                     </div>
@@ -79,11 +79,11 @@ <h4>Position type</h4>
     </section>
 
     <section class="block
-                    block__padded-top
-                    block__border-top
+                    block--padded-top
+                    block--border-top
                     vacancy-announcement_apply">
         <h2 id="interested">What to know if you apply</h2>
-        <div class="block block__sub">
+        <div class="block block--sub">
             <div class="content-l">
                 <div class="content-l__col content-l__col-1-2">
                     <div class="u-flexible-container">
@@ -97,7 +97,7 @@ <h2 id="interested">What to know if you apply</h2>
                 <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"
+                              a-link--jump"
                         href="/about-us/careers/application-process/">
                         <span class="a-link__text">Learn about the job application process</span>
                     </a>
@@ -107,10 +107,10 @@ <h2 id="interested">What to know if you apply</h2>
     </section>
 
     <section class="block
-                    block__padded-top
-                    block__border-top">
+                    block--padded-top
+                    block--border-top">
         <h2 id="interested">Apply for this position</h2>
-        <div class="block block__sub">
+        <div class="block block--sub">
             <div class="content-l">
                 {% for usajobs_link in usajobs_links %}
                     <div class="content-l__col
@@ -128,8 +128,8 @@ <h4>{{ applicant_type.display_title if applicant_type.display_title else applica
     {% set email_links = page.email_application_links.order_by('label') %}
     {% for email_link in email_links %}
     <div class="block
-                block__bg
-                block__border">
+                block--bg
+                block--border">
         <h4>{{ email_link.label }}</h4>
         {% if email_link.description %}<p>{{ email_link.description }}</p>{% endif %}
         <p><a class="a-btn" href="{{ email_link.mailto_link | safe }}">Email us</a></p>
@@ -141,7 +141,7 @@ <h4>{{ email_link.label }}</h4>
 {% block content_sidebar scoped %}
 
     {% if about_us %}
-        <div class="block block__flush-top">
+        <div class="block block--flush-top">
             {{ about_us.text | safe }}
         </div>
     {% endif %}
@@ -204,7 +204,7 @@ <h2 class="m-slug-header__heading">
             we do and new opportunities to be a part of it.
         </p>
         <a href="https://www.linkedin.com/company/consumer-financial-protection-bureau"
-           class="a-link a-link__jump a-link__external-link">
+           class="a-link a-link--jump a-link__external-link">
             Follow us on LinkedIn
         </a>
     </div>
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 242242224c2..fb4f425f15a 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
@@ -1,5 +1,5 @@
 <div class="m-notification
-            m-notification__error
+            m-notification--error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
     <div class="m-notification__content">
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 3145788f5db..429ff306829 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
@@ -4,7 +4,7 @@
             <div class="content__main">
                 {% include "_templates/no_js.html" %}
                 <div class="m-notification
-                            m-notification__visible
+                            m-notification--visible
                             u-js-only">
                     {{ svg_icon('updating') }}
                     <div class="m-notification__content">
@@ -29,7 +29,7 @@
                 {% for block in page.content -%}
                     {{ render_block.render(block, loop.index) }}
                 {%- endfor %}
-                <div class="college-costs_tool-section_buttons">
+                <div class="college-costs__tool-section-buttons">
                     <button class="a-btn college-costs_buttons__start btn__get-started">Get started</button>
                 </div>
             </div>
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 ca95bdf9c63..58c9aaeb90d 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
@@ -1,8 +1,8 @@
-<section class="college-costs_tool-section college-costs_tool-section__school-search" id="college-costs_school-search" data-tool-section="school-info">
+<section class="college-costs__tool-section college-costs__tool-section__school-search" id="college-costs_school-search" data-tool-section="school-info">
     <div class="school-search_start" id="school-search_what-school">
         <h2 tabindex="-1">School & living situation</h2>
         <p>Start with the school you’re considering, plus the program and other info about your situation. Refer to your financial aid offer if you're not sure.</p>
-        <label class="a-label a-label__heading u-mb15" for="search__school-input">
+        <label class="a-label a-label--heading u-mb15" for="search__school-input">
             Enter the name of the school. (You can also search by mascot.)
         </label>
         <p>
@@ -12,7 +12,7 @@ <h2 tabindex="-1">School & living situation</h2>
                    class="a-text-input"
                    autocomplete="off">
         </p>
-        <div class="a-form-alert a-form-alert__error" data-state-based-visibility="school-required" role="alert">
+        <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">
               Please enter the school you are considering.
@@ -33,7 +33,7 @@ <h3 class="h4">Select your program type</h3>
                 '',
                 'If you are entering or continuing an accelerated degree program (a bachelor’s followed by a master’s in the same subject), choose the program type covered by this financial aid offer.'
             ) }}
-            <div class="a-form-alert a-form-alert__error" data-state-based-visibility="type-required" role="alert">
+            <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">
                   Please select your program type.
@@ -93,7 +93,7 @@ <h3 class="h4">Select your program</h3>
 
         <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">
+          <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">
                   Please select how much progress you have made towards this degree.
@@ -153,7 +153,7 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
                   'Though 4 years is considered the standard length of bachelor’s degrees, <a href="https://nces.ed.gov/fastfacts/display.asp?id=569" target="_blank" class="external-link" rel="noreferrer noopener">data</a> suggests that over half of students take longer.' | safe
               ) }}
             </div>
-            <div class="a-form-alert a-form-alert__error" data-state-based-visibility="length-required" role="alert">
+            <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">
                   Please select your program length.
@@ -211,7 +211,7 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
 
         <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">
+            <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">
                   Please select which tuition rate will apply to you.
@@ -238,7 +238,7 @@ <h3 class="h4">Which tuition rate will apply to you?</h3>
 
         <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">
+            <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">
                   Please select where you plan to live while in school.
@@ -273,7 +273,7 @@ <h3 class="h4">Where do you plan to live while in school?</h3>
         <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">
+            <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">
                   Please select whether you are considered a dependent or independent student.
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 dfca4dfcb2e..c494d234728 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__costs" data-tool-section="costs">
+<section class="college-costs__tool-section college-costs__tool-section__costs" data-tool-section="costs">
     <h2 tabindex="-1">This year's costs</h2>
     <div data-state-based-visibility="costs-question-hide">
         <p>Does your financial aid offer have information about costs?</p>
@@ -9,7 +9,7 @@ <h2 tabindex="-1">This year's costs</h2>
                   'label': 'Yes. I will enter the costs listed in my offer.',
                   'value': 'y',
                   'id': 'costs-offer-radio_yes',
-                  'class': 'm-form-field__lg-target'
+                  'class': 'm-form-field--lg-target'
                 })
             }}
 
@@ -19,7 +19,7 @@ <h2 tabindex="-1">This year's costs</h2>
                   'label': 'No. Please show me cost data from the U.S. Department of Education (which is at least one year old).',
                   'value': 'n',
                   'id': 'costs-offer-radio_no',
-                  'class': 'm-form-field__lg-target'
+                  'class': 'm-form-field--lg-target'
                 })
             }}
 
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 7954eeccf37..9fa850f3c34 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section" data-tool-section="grants-scholarships">
+<section class="college-costs__tool-section" data-tool-section="grants-scholarships">
     <h2 tabindex="-1">Grants and scholarships</h2>
     <p>You do not have to pay back grants and scholarships as long as you meet their requirements. Please enter the grants and scholarships from your financial aid offer as well as any others you have been awarded.</p>
     {{ notification.render(
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 7d63b9a51f3..e886f1f59f8 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section" data-tool-section="work-study">
+<section class="college-costs__tool-section" data-tool-section="work-study">
     <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>
 
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 cdff6443750..a25550b4152 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section" data-tool-section="federal-loans">
+<section class="college-costs__tool-section" data-tool-section="federal-loans">
     <h2 tabindex="-1">Federal loans</h2>
 
     <p> Any student loan must be repaid, with interest. Federal loans include some borrower protections and repayment options <span class="undergrad-content">(including, under some circumstances, loan forgiveness) </span>that are not typically offered by private and other non-federal loans.</p>
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 55188034816..6a83e6c0ea8 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__school-loans" data-tool-section="school-loans">
+<section class="college-costs__tool-section college-costs__tool-section--school-loans" data-tool-section="school-loans">
     <h2 tabindex="-1">Other loans (loans from your state, the school, and nonprofits)</h2>
 
     <p>Your state, this school, or a nonprofit may offer you loans directly or through a bank. Before taking on this debt, do your research to make sure they are the best option for you. If you think you may want to use this funding, enter it below.</p>
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 d61b87cf9c8..d2216995ae0 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section" data-tool-section="other-resources">
+<section class="college-costs__tool-section" data-tool-section="other-resources">
     <h2 tabindex="-1">Other sources</h2>
     <p>Thank you for entering everything from your financial aid offer. What other sources of funds are available to you?</p>
 
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/08-loan-counseling.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/08-loan-counseling.html
index 75d5e6b4adb..fd623791c7c 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/08-loan-counseling.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/08-loan-counseling.html
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section" data-tool-section="loan-counseling">
+<section class="college-costs__tool-section" data-tool-section="loan-counseling">
 
     <h2 tabindex="-1">Using student loans strategically</h2>
     <p> Next you will make a plan to cover remaining costs. Since you will probably use loans to pay for school—most students do—it’s important to understand how they work. This page will overview how student loans work and their potential benefits and risks.</p>
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 e8033cd7c32..c084fc720e9 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
@@ -1,6 +1,6 @@
 {% import "v1/includes/atoms/checkbox.html" as checkbox with context %}
 
-<section class="college-costs_tool-section college-costs_tool-section__make-a-plan" data-tool-section="make-a-plan">
+<section class="college-costs__tool-section college-costs__tool-section--make-a-plan" data-tool-section="make-a-plan">
     <h2 tabindex="-1">Make a plan to cover this year's costs</h2>
 
     <p>Thank you for entering all that info! This page will help you determine whether you have enough funding to cover the cost of attending this particular school. If you have a gap, it will help you come up with a plan.</p>
@@ -650,7 +650,7 @@ <h4>Private Loan</h4>
                             </div>
                         </div>
 
-                        <button data-state-based-visibility="none" class="a-btn a-btn__link u-mt30">{{ svg_icon('plus-round') }} Add another Private Loan</button>
+                        <button data-state-based-visibility="none" class="a-btn a-btn--link u-mt30">{{ svg_icon('plus-round') }} Add another Private Loan</button>
                     {% endcall %}
                 </div>
             </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/10-max-debt-guideline.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/10-max-debt-guideline.html
index 61be89157da..459809dc541 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/10-max-debt-guideline.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/10-max-debt-guideline.html
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__debt-guideline" data-tool-section="max-debt-guideline">
+<section class="college-costs__tool-section college-costs__tool-section--debt-guideline" data-tool-section="max-debt-guideline">
     <h1>Could this be too much debt?</h1>
     <p class="lead-paragraph"><strong>A common guideline:</strong> Keep your student loan total below your first-year salary out of school. If your debt will be higher than your salary, consider whether it might be more debt than you can afford.</p>
 
@@ -52,7 +52,7 @@ <h2 tabindex="-1">1. Estimate your total debt at graduation.</h2>
 
     <h2 class="step-2">2. Check if your estimated total debt is less than the median salary of <span data-school-item="school"></span></h2>
 
-    <div class="college-costs_chart" id="max-debt-guideline_chart"></div>
+    <div class="college-costs__chart" id="max-debt-guideline_chart"></div>
 
     <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>
 
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 8296f7beef0..2c7ec030383 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
@@ -1,10 +1,10 @@
-<section class="college-costs_tool-section college-costs_tool-section__cost-of-borrowing" data-tool-section="cost-of-borrowing">
+<section class="college-costs__tool-section college-costs__tool-section--cost-of-borrowing" data-tool-section="cost-of-borrowing">
     <h1 tabindex="-1">What will interest cost me?</h1>
     <p class="lead-paragraph"> This page shows the total cost of borrowing if you repay your debt over 10 years on the standard repayment plan. Other plans may be available with lower monthly payments, but the total cost of borrowing will be higher.</p>
 
     <h2 tabindex="-1">Estimated total cost of these loans with a standard 10-year repayment plan: <strong><span data-financial-item="debt_tenYearTotal"></span></strong></h2>
 
-    <div class="college-costs_chart" id="cost-of-borrowing_chart"></div>
+    <div class="college-costs__chart" id="cost-of-borrowing_chart"></div>
 
     <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>
 
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 3bc76f750bc..a97cee7519a 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__affording" data-tool-section="affording-your-loans">
+<section class="college-costs__tool-section college-costs__tool-section--affording" data-tool-section="affording-your-loans">
     <h1 tabindex="-1">Can I afford my payment?</h1>
 
     <p class="lead-paragraph">Making loan payments on time can help you avoid financial and legal problems. Default—missing too many payments—can result in low credit scores, additional fees, wage garnishment, and ineligibility for further federal student aid.</p>
@@ -14,7 +14,7 @@ <h2>1. Check out two ways to help you decide if you can afford this payment</h2>
               'label': 'How many work hours?',
               'value': 'hourly',
               'id': 'affording-loans-choices_hourly',
-              'class': 'm-form-field__lg-target'
+              'class': 'm-form-field--lg-target'
             })
         }}
         {{
@@ -23,7 +23,7 @@ <h2>1. Check out two ways to help you decide if you can afford this payment</h2>
               'label': 'Does it fit in a typical budget?',
               'value': 'monthly',
               'id': 'affording-loans-choices_monthly',
-              'class': 'm-form-field__lg-target'
+              'class': 'm-form-field--lg-target'
             })
         }}
     </div>
@@ -63,7 +63,7 @@ <h2>2. See how much of your time at work each month would go towards covering yo
             }}
         </div>
 
-        <h2 class="affording-loans-choices_about">About your estimated payment</h2>
+        <h2 class="affording-loans-choices__about">About your estimated payment</h2>
 
         <p>Your actual payment will depend on how much you actually borrow and which repayment plan you choose for federal loans. This estimate assumes a standard repayment plan, where you pay the same amount every month for 10 years. Other plans with lower monthly payments are available, but the total costs of borrowing will be higher.</p>
 
@@ -72,7 +72,7 @@ <h2 class="affording-loans-choices_about">About your estimated payment</h2>
          <h2>2. See if the monthly payment fits in an average monthly budget for this <span data-state-based-visibility="no-program-selected">school</span><span data-state-based-visibility="program-is-selected">program</span>'s salary and region</h2>
 
         <div class="m-form-field m-form-field__select">
-            <label class="a-label a-label__heading" for="expenses__region">
+            <label class="a-label a-label--heading" for="expenses__region">
                 What part of the US do you plan to live in after graduation?
             </label>
             <div class="a-select">
@@ -85,7 +85,7 @@ <h2>2. See if the monthly payment fits in an average monthly budget for this <sp
             </div>
         </div>
 
-        <div class="college-costs_chart" id="affording-your-loans_chart"></div>
+        <div class="college-costs__chart" id="affording-your-loans_chart"></div>
 
         <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>
 
@@ -256,7 +256,7 @@ <h2>3. Does this budget work for you? Adjust specific expenses, like rent and gr
         {{ number_callout.render({
                 'header': 'Total money left',
                 'data_attribute': 'data-expenses-item="total_remainder"',
-                'additional_classes': 'number-callout__large number-callout__border-top',
+                'additional_classes': 'number-callout--large number-callout--border-top',
                 'value': '$373'
             })
         }}
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 21b7f09c7fe..6ac0498a413 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
@@ -1,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__school-results" data-tool-section="school-results">
+<section class="college-costs__tool-section college-costs__tool-section--school-results" data-tool-section="school-results">
     <h2 tabindex="-1">Compare this school to others like it</h2>
 
     <div class="graduate-content">
@@ -74,7 +74,7 @@ <h4>Graduation rate</h4>
                           'label': 'in the U.S.',
                           'value': 'cohortRankByHighestDegree',
                           'id': 'graduation-rate_us',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                     {{
@@ -83,7 +83,7 @@ <h4>Graduation rate</h4>
                           'label': '<span>in <span data-school-item="stateName"></span></span>' | safe,
                           'value': 'cohortRankByState',
                           'id': 'graduation-rate_state',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                     {{
@@ -92,12 +92,12 @@ <h4>Graduation rate</h4>
                           'label': '<span data-school-item="control"></span>',
                           'value': 'cohortRankByControl',
                           'id': 'graduation-rate_school-type',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                 </fieldset>
 
-                <div id="school-results_grad-meter" class="college-costs_meter-graph"></div>
+                <div id="school-results_grad-meter" class="college-costs__meter-graph"></div>
                 <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>
 
@@ -117,7 +117,7 @@ <h4>Transfer to graduation rate</h4>
                           'label': 'in the U.S.',
                           'value': 'cohortRankByHighestDegree',
                           'id': 'transfer-to-graduation-rate_us',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                     {{
@@ -126,11 +126,11 @@ <h4>Transfer to graduation rate</h4>
                           'label': '<span>in <span data-school-item="stateName"></span></span>' | safe,
                           'value': 'cohortRankByState',
                           'id': 'transfer-to-graduation-rate_state',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                 </fieldset>
-                <div id="school-results_transfer-to-grad-meter" class="college-costs_meter-graph"></div>
+                <div id="school-results_transfer-to-grad-meter" class="college-costs__meter-graph"></div>
                 <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>
 
@@ -160,7 +160,7 @@ <h4>Loan repayment rate</h4>
                           'label': 'in the U.S.',
                           'value': 'cohortRankByHighestDegree',
                           'id': 'repayment-rate_us',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                     {{
@@ -169,7 +169,7 @@ <h4>Loan repayment rate</h4>
                           'label': '<span>in <span data-school-item="stateName"></span></span>' | safe,
                           'value': 'cohortRankByState',
                           'id': 'repayment-rate_state',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                     {{
@@ -178,11 +178,11 @@ <h4>Loan repayment rate</h4>
                           'label': '<span data-school-item="control"></span>',
                           'value': 'cohortRankByControl',
                           'id': 'repayment-rate_school-type',
-                          'class': 'm-form-field__lg-target btn__cohort'
+                          'class': 'm-form-field--lg-target btn__cohort'
                         })
                     }}
                 </fieldset>
-                <div id="school-results_repayment-meter" class="college-costs_meter-graph"></div>
+                <div id="school-results_repayment-meter" class="college-costs__meter-graph"></div>
                 <p><span data-school-item="school"></span>'s repayment rate falls in the <strong><span data-state-item="repayMeterThird"></span></strong> of all <span data-state-item="repayMeterCohortName"></span> schools granting <span class="community-college">2</span><span class="four-year-college">4</span>-year degrees.</p>
             </div>
         </div>
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 ed0c520ea01..874372da537 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,4 +1,4 @@
-<section class="college-costs_tool-section college-costs_tool-section__summary" data-tool-section="summary">
+<section class="college-costs__tool-section college-costs__tool-section--summary" data-tool-section="summary">
     <div class="block block--flush-top">
         <h2 tabindex="-1">Review your plan and projected outcomes</h2>
 
@@ -6,7 +6,7 @@ <h2 tabindex="-1">Review your plan and projected outcomes</h2>
 
         <p class="u-right">
             <a class="a-link
-                      a-link__icon"
+                      a-link--icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
                 <span class="a-link__text">Print</span>
@@ -14,7 +14,7 @@ <h2 tabindex="-1">Review your plan and projected outcomes</h2>
         </p>
         <div data-state-based-visibility="none">
             <button class="a-btn">Print summary</button>
-            <button class="a-btn a-btn__secondary">Save as a link</button>
+            <button class="a-btn a-btn--secondary">Save as a link</button>
             <p class="u-mt15"><small>You will also have a chance to print all documents at the end.</small></p>
         </div>
     </div>
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 5dfc9e17188..c6f60959a98 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
@@ -1,18 +1,18 @@
-<section class="college-costs_tool-section" data-tool-section="action-plan">
+<section class="college-costs__tool-section" data-tool-section="action-plan">
     <h2 tabindex="-1">What to do next</h2>
 
     <p>Your next steps depend on whether you want to use this plan to pay for attending this school.</p>
 
     <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",
               'label': 'How to put this plan into action',
               'value': 'action',
               'id': 'action-plan_put-into-action',
-              'class': 'm-form-field__lg-target'
+              'class': 'm-form-field--lg-target'
             })
         }}
          {{
@@ -21,16 +21,16 @@ <h2 tabindex="-1">What to do next</h2>
               'label': 'Consider other options',
               'value': 'consider',
               'id': 'action-plan_consider',
-              'class': 'm-form-field__lg-target'
+              'class': 'm-form-field--lg-target'
             })
         }}
     </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>
-            <button class="a-btn a-btn__secondary">Save as a link</button>
+            <button class="a-btn a-btn--secondary">Save as a link</button>
             <p class="u-mt15"><small>You will also have a chace to print all documents at the end.</small></p>
         </div>
 
@@ -106,7 +106,7 @@ <h4>Apply for additional loans, including Grad PLUS and private options.</h4>
 
     </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">
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 d2857c7a7cf..51d548f83cb 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,7 +1,7 @@
-<section class="college-costs_tool-section college-costs_tool-section__finish" data-tool-section="save-and-finish">
+<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">
             <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>
@@ -21,7 +21,7 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
                       'label': 'No',
                       'value': 'n',
                       'id': 'save_did-it-help_no',
-                      'class': 'm-form-field__lg-target'
+                      'class': 'm-form-field--lg-target'
                     })
                 }}
                 {{
@@ -30,7 +30,7 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
                       'label': 'Somewhat',
                       'value': 's',
                       'id': 'save_did-it-help_somewhat',
-                      'class': 'm-form-field__lg-target'
+                      'class': 'm-form-field--lg-target'
                     })
                 }}
                 {{
@@ -39,7 +39,7 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
                       'label': 'Yes',
                       'value': 'y',
                       'id': 'save_did-it-help_yes',
-                      'class': 'm-form-field__lg-target'
+                      'class': 'm-form-field--lg-target'
                     })
                 }}
             </fieldset>
@@ -57,7 +57,7 @@ <h3>Did this tool help you understand the potential impact of student loans?</h3
                           'label': 'No',
                           'value': 'n',
                           'id': 'save_understand-loans_no',
-                          'class': 'm-form-field__lg-target'
+                          'class': 'm-form-field--lg-target'
                         })
                     }}
                     {{
@@ -66,7 +66,7 @@ <h3>Did this tool help you understand the potential impact of student loans?</h3
                           'label': 'Somewhat',
                           'value': 's',
                           'id': 'save_understand-loans_somewhat',
-                          'class': 'm-form-field__lg-target'
+                          'class': 'm-form-field--lg-target'
                         })
                     }}
                     {{
@@ -75,7 +75,7 @@ <h3>Did this tool help you understand the potential impact of student loans?</h3
                           'label': 'Yes',
                           'value': 'y',
                           'id': 'save_understand-loansp_yes',
-                          'class': 'm-form-field__lg-target'
+                          'class': 'm-form-field--lg-target'
                         })
                     }}
                 </fieldset>
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 4399c0ae753..9d68565ebb1 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,6 +1,6 @@
 <div class="o-form__group">
     <div class="m-form-field">
-        <label class="a-label a-label__heading" for="finish_link">
+        <label class="a-label a-label--heading" for="finish_link">
             Your link
         </label>
         <pre id="finish_link" name="finish_link" data-app-save-link="save-and-finish"></pre>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-input.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-input.html
index ea0d2ebeadc..1ffd8c48e28 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-input.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-input.html
@@ -23,15 +23,15 @@
 {% macro render( value ) -%}
 {% set ht_id = 'ht_' ~ value.id %}
 <div class="financial-item">
-    <div class="financial-item_label">
-        <label class="a-label a-label__heading" for="{{ value.id }}">
+    <div class="financial-item__label">
+        <label class="a-label a-label--heading" for="{{ value.id }}">
             {{ value.label }}
         </label>
         {%- if value.helper_text -%}
             <p id="{{ ht_id }}"><small>{{ value.helper_text | safe }}</small></p>
         {%- endif -%}
     </div>
-    <div class="financial-item_value">
+    <div class="financial-item__value">
         <input class="a-text-input"
                type="text"
                autocomplete="off"
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-text.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-text.html
index fd2b4bf4d32..d2180994e18 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-text.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/financial-item-text.html
@@ -27,18 +27,18 @@
 
 {% macro render( value ) -%}
 <div class="financial-item
-            {{ 'financial-item__' + ( value.type if value.type else 'text' ) }}
-            {% if value.status %} {{ 'financial-item__' + value.status }} {% endif %}">
-    <div class="financial-item_label">
+            {{ 'financial-item--' + ( value.type if value.type else 'text' ) }}
+            {% if value.status %} {{ 'financial-item--' + value.status }} {% endif %}">
+    <div class="financial-item__label">
         <div>{{ value.label | safe }}</div>
         {%- if value.helper_text -%}
             <p><small>{{ value.helper_text | safe }}</small></p>
         {%- endif -%}
     </div>
-    <div class="financial-item_value"> 
+    <div class="financial-item__value">
         <span {% if value.data_attribute %}{{ value.data_attribute | safe }}{% endif %}>
             {{ value.value | safe }}
-        </span> 
+        </span>
     </div>
 </div>
 {%- endmacro %}
\ No newline at end of file
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/number-callout.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/number-callout.html
index 2fde6a0ea43..5ae8e293f78 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/number-callout.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/number-callout.html
@@ -23,8 +23,8 @@
 
 {% macro render( value ) -%}
 <div class="number-callout {{ value.additional_classes if value.additional_classes else '' }}">
-    <div class="number-callout_header">{{ value.header }}</div>
-    <div class="number-callout_value">
+    <div class="number-callout__header">{{ value.header }}</div>
+    <div class="number-callout__value">
       <span {{ value.data_attribute | safe if value.data_attribute else '' }}>
           {{ value.value if value.value else '' }}
       </span>
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 164d50ce582..c1a96ddfe7f 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
@@ -34,12 +34,12 @@
                    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"
+                          o-secondary-nav__link--parent"
                     href="#"
                     data-gtm_ignore="true"
                     data-nav_section="{{ item.data }}">
@@ -47,7 +47,7 @@
                 </a>
             {%- if item.children -%}
                 <ul class="o-secondary-nav__list
-                           o-secondary-nav__list__children"
+                           o-secondary-nav__list--children"
                     role="tablist">
                 {%- for child in item.children -%}
                     <li role="tab">
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 47040e13229..a0928330f5e 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,7 +17,7 @@
     <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="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
@@ -42,9 +42,9 @@
                             {%- 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>
+                                <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">
                                 <p>Copy and save this link so that you can come back and review your plan.</p>
@@ -55,7 +55,7 @@
                             {{ number_callout.render({
                                     'header': 'Costs not covered yet',
                                     'data_attribute': 'data-financial-item="total_gap"' | safe,
-                                    'additional_classes': 'number-callout__warning number-callout__right'
+                                    'additional_classes': 'number-callout--warning number-callout--right'
                                 })
                             }}
                         </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 8c6d5679c03..0a47d98ffc8 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
@@ -10,115 +10,115 @@
 {% endblock %}
 
 {% block content %}
-{% set school_primary_alias = school.primary_alias if school else '' %}
-<main id="main" data-context="{{url_root}}">
+{% set school__primary__alias = school.primary__alias if school else '' %}
+<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"
+                <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">
+                    {{ svg__icon('error-round') }}
+                    <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>
                 </div>
 
-                <div class="m-notification m-notification__error verify_content"
+                <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">
+                   {{ svg__icon('error-round') }}
+                   <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"
+                <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>
+                    {{ svg__icon('error-round') }}
+                    <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>
                 </div>
-                <div class="verify_wrapper">
-                    <div class="verify_content" data-warning="{{warning}}">
-                        <h2 class="verify_prompt">
+                <div class="verify__wrapper">
+                    <div class="verify__content" data-warning="{{warning}}">
+                        <h2 class="verify__prompt">
                             Make sure that the information below is correct
                             before reviewing your offer.
                         </h2>
-                        <form class="verify_form">
-                            <div class="verify_school">
-                              {{school_primary_alias}}
+                        <form class="verify__form">
+                            <div class="verify__school">
+                              {{school__primary__alias}}
                             </div>
-                            <div class="verify_location">
+                            <div class="verify__location">
                                 {% if school %}{{school.city}}, {{school.state}}{% endif %}
                             </div>
-                            <div class="verify_type">
+                            <div class="verify__type">
                                 {% if school %}{{school.control}} school{% endif %}
                             </div>
-                            <dl class="verify_list">
-                                <dt class="verify_heading">
+                            <dl class="verify__list">
+                                <dt class="verify__heading">
                                     Program
                                 </dt>
-                                <dd class="verify_value">
-                                    {{program.program_name}}
+                                <dd class="verify__value">
+                                    {{program.program__name}}
                                 </dd>
-                                <dt class="verify_heading">
+                                <dt class="verify__heading">
                                     Program type
                                 </dt>
-                                <dd class="verify_value">
-                                    {{program.get_level() if program}}
+                                <dd class="verify__value">
+                                    {{program.get__level() if program}}
                                 </dd>
-                                <dt class="verify_heading verify_direct-cost">
+                                <dt class="verify__heading verify__direct-cost">
                                     Estimated total cost of program
                                 </dt>
-                                <dd class="verify_value verify_direct-cost">
-                                    <span id="verify_totalDirectCost"
+                                <dd class="verify__value verify__direct-cost">
+                                    <span id="verify__totalDirectCost"
                                     data-financial="totalCost">$[XX]</span> (tuition, fees, books, and supplies)
                                 </dd>
-                                <dt class="verify_heading verify_label
-                                verify_estimate"
+                                <dt class="verify__heading verify__label
+                                verify__estimate"
                                 for="estimated-years-attending">
                                     Estimated years to complete your program
                                 </dt>
-                                <dd class="verify_value verify_estimate">
-                                    <p class="verify_label-explanation">
+                                <dd class="verify__value verify__estimate">
+                                    <p class="verify__label-explanation">
                                         Select how long you expect it to take to
                                         complete your program. This may be
                                         shorter than the program length below if
@@ -171,41 +171,41 @@ <h2 class="verify_prompt">
                                         </select>
                                     </div>
                                 </dd>
-                                <dt class="verify_heading">
+                                <dt class="verify__heading">
                                     Offer ID
                                 </dt>
-                                <dd class="verify_value">
+                                <dd class="verify__value">
                                     {{ oid[:7] }}
                                 </dd>
                             </dl>
-                            <div class="verify_controls">
+                            <div class="verify__controls">
                                 <a href="#info-right"
-                                class="a-btn a-btn__full-on-xs"
+                                class="a-btn a-btn--full-on-xs"
                                 title="Yes, this information is correct"
-                                data-gtm_ignore="true">
+                                data-gtm__ignore="true">
                                     Yes, this is correct
                                 </a>
                                 <a href="#info-wrong"
-                                class="a-btn a-btn__full-on-xs a-btn__link
-                                verify_wrong-info-btn"
+                                class="a-btn a-btn--full-on-xs a-btn--link
+                                verify__wrong-info-btn"
                                 title="No, this is not my information"
-                                data-gtm_ignore="true">
+                                data-gtm__ignore="true">
                                     No, this is not my information
                                 </a>
                             </div>
                         </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">
-                    <div class="instructions_wrapper">
-                        <div class="instructions_content
-                        instructions_content__right">
-                            <h2 class="step_heading">
+            <section class="instructions step content--wrapper">
+                <div class="content--main">
+                    <div class="instructions__wrapper">
+                        <div class="instructions__content
+                        instructions__content--right">
+                            <h2 class="step__heading">
                                 As you go through the three sections of this
                                 tool, you’ll:
                             </h2>
@@ -221,16 +221,16 @@ <h2 class="step_heading">
                                 <li>Learn about your options
                                 to reduce student debt.</li>
                             </ol>
-                            <p class="instructions_subheading">
+                            <p class="instructions__subheading">
                                 You must complete steps 1 and 2 of this tool
                                 before you can enroll.
                             </p>
                         </div>
-                        <div class="instructions_about-wrapper">
-                            <h2 class="instructions_about-heading">
+                        <div class="instructions__about-wrapper">
+                            <h2 class="instructions__about-heading">
                                 About this tool
                             </h2>
-                            <div class="instructions_about">
+                            <div class="instructions__about">
                                 <p>This tool uses data, financial terms and
                                     estimations that may need additional
                                     explanation. Learn more about the financial
@@ -239,27 +239,27 @@ <h2 class="instructions_about-heading">
                                 </p>
                                 <p>
                                     <a
-                                    href="/{{url_root}}/understanding-your-financial-aid-offer/about-this-tool/"
-                                    target="_blank" rel="noopener noreferrer">Get details
+                                    href="/{{url__root}}/understanding-your-financial-aid-offer/about-this-tool/"
+                                    target="__blank" rel="noopener noreferrer">Get details
                                     about how this tool works</a>
                                 </p>
                             </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">
-                    <div class="review_wrapper">
-                        <div class="review_intro">
-                            <h2 class="step_heading">
+            <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">
                                 Step 1: Review your first year offer
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 Here is your financial aid offer from
                                 <span
-                                    id="intro__school-name">{{school_primary_alias}}</span>. Please review the amounts provided by
+                                    id="intro--school-name">{{school__primary__alias}}</span>. Please review the amounts provided by
                                 your school below and make any necessary changes
                                 or add any missing information.  Please note any
                                 changes you make here will not change your
@@ -274,25 +274,25 @@ <h2 class="step_heading">
                         <span>Updating...</span>
                     </div>
                     <div class="offer-part cost-to-attend
-                    column-well_wrapper__overflow-small">
-                        <div class="offer-part_intro">
-                            <div class="offer-part_intro-wrapper">
-                                <div class="offer-part_intro-content">
-                                    <h3 class="offer-part_heading">
+                    column-well__wrapper--overflow-small">
+                        <div class="offer-part__intro">
+                            <div class="offer-part__intro-wrapper">
+                                <div class="offer-part__intro-content">
+                                    <h3 class="offer-part__heading">
                                         How much does it cost to attend this
                                         school?
                                     </h3>
                                 </div>
                             </div>
                         </div>
-                        <div class="offer-part_form-wrapper">
+                        <div class="offer-part__form-wrapper">
                             <form class="aid-form" action="#">
                                 <div class="form-group cost-of-attendance">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Cost of attendance
                                         </label>
-                                        <p class="aid-form_definition">
+                                        <p class="aid-form__definition">
                                             Includes the annual cost of the program
                                             (tuition, fees, books, and supplies)
                                             as well as ordinary living expenses
@@ -302,106 +302,106 @@ <h3 class="offer-part_heading">
                                             expenses)
                                         </p>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="costs__tuition">
+                                            for="costs--tuition">
                                                 Tuition and fees
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="costs__tuition"
-                                            name="costs__tuition"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="costs--tuition"
+                                            name="costs--tuition"
                                             data-financial="tuitionFees"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="costs__room-and-board">
+                                            for="costs--room-and-board">
                                                 Housing and meals
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="costs__room-and-board"
-                                            name="costs__room-and-board"
+                                            id="costs--room-and-board"
+                                            name="costs--room-and-board"
                                             data-financial="roomBoard"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="costs__books">
+                                            for="costs--books">
                                                 Books and supplies
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="costs__books"
-                                            name="costs__books"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="costs--books"
+                                            name="costs--books"
                                             data-financial="books"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="costs__transportation">
+                                            for="costs--transportation">
                                                 Transportation
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="costs__transportation"
-                                            name="costs__transportation"
+                                            id="costs--transportation"
+                                            name="costs--transportation"
                                             data-financial="transportation"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="costs__other">
+                                            for="costs--other">
                                                 Other education costs
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Personal expenses like
                                                 computers, daycare,
                                                 entertainment, laundry, etc.
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="costs__other"
-                                            name="costs__other"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="costs--other"
+                                            name="costs--other"
                                             data-financial="otherExpenses"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="aid-form_inline-subtotal">
-                                        <div class="content__line
-                                        aid-form_equals-line"></div>
+                                    <div class="aid-form__inline-subtotal">
+                                        <div class="content--line
+                                        aid-form__equals-line"></div>
                                         <div class="line-item">
-                                            <div class="line-item_title">
+                                            <div class="line-item__title">
                                                 Total cost of attendance
                                             </div>
-                                            <div class="line-item_value">
+                                            <div class="line-item__value">
                                                 <span
-                                                class="line-item_currency">
+                                                class="line-item__currency">
                                                     $
                                                 </span>
-                                                <span class="line-item_amount" data-line-item="true"
+                                                <span class="line-item__amount" data-line-item="true"
                                                 data-financial="costOfAttendance"></span>
                                             </div>
                                         </div>
@@ -409,173 +409,173 @@ <h3 class="offer-part_heading">
                                 </div>
                                 <div class="form-group
                                 grants-and-scholarships">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Grants and scholarships
                                         </label>
-                                        <p class="aid-form_definition">
+                                        <p class="aid-form__definition">
                                             Money you don’t have to pay back
                                         </p>
                                     </div>
-                                    <div class="form-group_item"
+                                    <div class="form-group__item"
                                     data-section="pellgrant">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__pell">
+                                            for="grants--pell">
                                                 Federal Pell Grant
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Based on financial need,
                                                 <a href="https://studentaid.gov/understand-aid/types/grants/pell"
-                                                   target="_blank" rel="noopener noreferrer">see how you qualify</a>
+                                                   target="__blank" rel="noopener noreferrer">see how you qualify</a>
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="grants__pell"
-                                            name="grants__pell"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="grants--pell"
+                                            name="grants--pell"
                                             data-financial="pell"
                                             autocorrect="off" value="0">
-                                            <div class="aid-form_calc-error" data-calc-error="pell">
-                                                {{ svg_icon('error-round') }}
+                                            <div class="aid-form__calc-error" data-calc-error="pell">
+                                                {{ svg__icon('error-round') }}
                                                 The maximum that can be awarded per year is <span data-cap="pell">$0</span>
                                             </div>
-                                            <div class="aid-form_calc-error" data-calc-error="overBorrowing">
-                                                {{ svg_icon('error-round') }}
+                                            <div class="aid-form__calc-error" data-calc-error="overBorrowing">
+                                                {{ svg__icon('error-round') }}
                                                 The total of your federal aid can't be more than the total cost of attendance
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__school">
+                                            for="grants--school">
                                                 Grants and scholarships from
                                                 your school
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Total amount awarded from your
                                                 school
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="grants__school"
-                                            name="grants__school"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="grants--school"
+                                            name="grants--school"
                                             data-financial="schoolGrants"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__state">
+                                            for="grants--state">
                                                 Grants from your state
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Total amount awarded from your
                                                 state
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="grants__state"
-                                            name="grants__state"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="grants--state"
+                                            name="grants--state"
                                             data-financial="stateGrants"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__scholarships">
+                                            for="grants--scholarships">
                                                 Other grants and scholarships
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Such as academic scholarships
                                                 or grants from a foundation
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="grants__scholarships"
-                                            name="grants__scholarships"
+                                            id="grants--scholarships"
+                                            name="grants--scholarships"
                                             data-financial="otherScholarships"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item"
+                                    <div class="form-group__item"
                                     data-section="military">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__military">
+                                            for="grants--military">
                                                 Military tuition assistance
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Money for active or reserve
                                                 servicemembers that you don’t
                                                 have to pay back
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="grants__military"
-                                            name="grants__military"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="grants--military"
+                                            name="grants--military"
                                             data-financial="militaryTuitionAssistance"
                                             autocorrect="off" value="0">
-                                            <div class="aid-form_calc-error"
+                                            <div class="aid-form__calc-error"
                                             data-calc-error="militaryTuitionAssistance">
-                                                {{ svg_icon('error-round') }}
+                                                {{ svg__icon('error-round') }}
                                                 The maximum that can be awarded per
                                                 year is <span
                                                 data-cap="militaryTuitionAssistance">$0</span>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="form-group_item"
+                                    <div class="form-group__item"
                                     data-section="gibill">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="grants__gi">
+                                            for="grants--gi">
                                                 GI Bill
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Money for service members or
                                                 veterans that you don’t have
                                                 to pay back; <a href="https://www.vets.gov/gi-bill-comparison-tool"
-                                                target="_blank" rel="noopener noreferrer">see how much the
+                                                target="__blank" rel="noopener noreferrer">see how much the
                                                 GI Bill pays</a>
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="grants__gi"
-                                            name="grants__gi"
+                                            id="grants--gi"
+                                            name="grants--gi"
                                             data-financial="GIBill"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="aid-form_inline-subtotal">
-                                        <div class="content__line
-                                        aid-form_equals-line"></div>
+                                    <div class="aid-form__inline-subtotal">
+                                        <div class="content--line
+                                        aid-form__equals-line"></div>
                                         <div class="line-item">
-                                            <div class="line-item_title">
+                                            <div class="line-item__title">
                                                 Total grants and scholarships
                                             </div>
-                                            <div class="line-item_value">
+                                            <div class="line-item__value">
                                                 <span
-                                                class="line-item_currency">
+                                                class="line-item__currency">
                                                     $
                                                 </span>
-                                                <span class="line-item_amount" data-line-item="true"
+                                                <span class="line-item__amount" data-line-item="true"
                                                 data-financial="grantsTotal">
                                             </span>
                                             </div>
@@ -584,66 +584,66 @@ <h3 class="offer-part_heading">
                                 </div>
                             </form>
                         </div>
-                        <div class="offer-part_summary-wrapper column-well
-                        column-well__bleed column-well__not-stacked">
-                            <div class="aid-form_summary column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                        <div class="offer-part__summary-wrapper column-well
+                        column-well--bleed column-well--not-stacked">
+                            <div class="aid-form__summary column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Cost summary
                                 </h4>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Cost of attendance
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="costOfAttendance"
-                                        id="summary_cost-of-attendance"></span>
+                                        id="summary__cost-of-attendance"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Grants and scholarships
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="grantsTotal"
-                                        id="summary_total-grants-scholarships">
+                                        id="summary__total-grants-scholarships">
                                         </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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Your out-of-pocket cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="firstYearNetCost"
-                                        id="summary_total-cost"></span>
+                                        id="summary__total-cost"></span>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="offer-part contributions
-                    column-well_wrapper__overflow-small">
-                        <div class="offer-part_intro">
-                            <div class="offer-part_intro-wrapper">
-                                <div class="offer-part_intro-content">
-                                    <h3 class="offer-part_heading">
+                    column-well__wrapper--overflow-small">
+                        <div class="offer-part__intro">
+                            <div class="offer-part__intro-wrapper">
+                                <div class="offer-part__intro-content">
+                                    <h3 class="offer-part__heading">
                                         How much can you contribute without
                                         going into debt?
                                     </h3>
@@ -656,97 +656,97 @@ <h3 class="offer-part_heading">
                                 </div>
                             </div>
                         </div>
-                        <div class="offer-part_form-wrapper">
+                        <div class="offer-part__form-wrapper">
                             <form class="aid-form" action="#">
                                 <div class="form-group
                                 personal-family-contributions">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Personal and family/others contributions
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__savings">
+                                            for="contrib--savings">
                                                 Cash you will pay
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Includes money that you can
                                                 pay now or will earn during
                                                 the school year
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="contrib__savings"
-                                            name="contrib__savings"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="contrib--savings"
+                                            name="contrib--savings"
                                             data-financial="savings"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__family">
+                                            for="contrib--family">
                                                 Money your family or others will pay
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Includes money given to you from
                                                 family or others, private loans
                                                 your parents take out, etc.
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="contrib__family"
-                                            name="contrib__family"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="contrib--family"
+                                            name="contrib--family"
                                             data-financial="family"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__parent-plus">
+                                            for="contrib--parent-plus">
                                                 Parent PLUS loan
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Federal loans your parents take out and repay;
                                                 does not count toward your total student loan debt
                                                 shown in this tool
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="contrib__parent-plus"
-                                            name="contrib__parent-plus"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="contrib--parent-plus"
+                                            name="contrib--parent-plus"
                                             data-financial="parentPlus"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item"
+                                    <div class="form-group__item"
                                     data-section="workstudy">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__workstudy">
+                                            for="contrib--workstudy">
                                                 Federal Work-Study
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Money you earn per year from
                                                 an eligible Federal Work-Study
                                                 job while in school; awarded
                                                 based on financial need
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="contrib__workstudy"
-                                            name="contrib__workstudy"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="contrib--workstudy"
+                                            name="contrib--workstudy"
                                             data-financial="workstudy"
                                             autocorrect="off" value="0">
                                         </div>
@@ -754,165 +754,165 @@ <h3 class="offer-part_heading">
                                 </div>
                             </form>
                         </div>
-                        <div class="offer-part_summary-wrapper column-well
-                        column-well__bleed column-well__not-stacked">
-                            <div class="aid-form_summary column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                        <div class="offer-part__summary-wrapper column-well
+                        column-well--bleed column-well--not-stacked">
+                            <div class="aid-form__summary column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Contributions summary
                                 </h4>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Cash you will pay
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="savings"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Money your family/others will pay
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( + )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="family"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Parent PLUS loans
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( + )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="parentPlus"></span>
                                     </div>
                                 </div>
                                 <div class="line-item"
                                 data-section="workstudy">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Federal Work-Study
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( + )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Your personal and family/others
                                         contributions
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="savingsTotal"
-                                        id="summary_total-contributions">
+                                        id="summary__total-contributions">
                                     </span>
                                     </div>
                                 </div>
                             </div>
-                            <div class="aid-form_summary big-picture
-                            column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                            <div class="aid-form__summary big-picture
+                            column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Big picture
                                 </h4>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your out-of-pocket cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="firstYearNetCost"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your contributions
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
+                                        <span class="line-item__amount" data-line-item="true"
                                         data-financial="savingsTotal">
                                         </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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Remaining cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount" data-line-item="true"
-                                        id="summary_remaining-cost-after-contrib"
+                                        <span class="line-item__amount" data-line-item="true"
+                                        id="summary__remaining-cost-after-contrib"
                                         data-financial="remainingCost"></span>
                                     </div>
                                 </div>
                                 <p>
                                     This is an estimate of the remaining costs
                                     of studying your program at
-                                    {{school_primary_alias}} for one year.
+                                    {{school__primary__alias}} for one year.
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="offer-part loans
-                    column-well_wrapper__overflow-small">
-                        <div class="offer-part_intro">
-                            <div class="offer-part_intro-wrapper">
-                                <div class="offer-part_intro-content">
-                                    <h3 class="offer-part_heading">
+                    column-well__wrapper--overflow-small">
+                        <div class="offer-part__intro">
+                            <div class="offer-part__intro-wrapper">
+                                <div class="offer-part__intro-content">
+                                    <h3 class="offer-part__heading">
                                         How much would you have to borrow to
                                         cover the remaining cost?
                                     </h3>
                                 </div>
                             </div>
                         </div>
-                        <div class="offer-part_form-wrapper">
+                        <div class="offer-part__form-wrapper">
                             <form class="aid-form" action="#">
                                 <div class="form-group federal-loans"
                                 data-section="federalLoans">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Federal loans
                                         </label>
-                                        <p class="aid-form_definition">
+                                        <p class="aid-form__definition">
                                             Money you borrow from the federal
                                             government this year and have to
                                             pay back over time. Interest rates
@@ -921,85 +921,85 @@ <h3 class="offer-part_heading">
                                             year to year.
                                         </p>
                                     </div>
-                                    <div class="form-group_item" data-section="perkins">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item" data-section="perkins">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__perkins">
+                                            for="contrib--perkins">
                                                 Perkins loans
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
-                                            type="text" id="contrib__perkins"
-                                            name="contrib__perkins"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
+                                            type="text" id="contrib--perkins"
+                                            name="contrib--perkins"
                                             data-financial="perkins"
                                             autocorrect="off" value="0">
-                                            <div class="aid-form_calc-error" data-calc-error="perkins">
-                                                {{ svg_icon('error-round') }}
+                                            <div class="aid-form__calc-error" data-calc-error="perkins">
+                                                {{ svg__icon('error-round') }}
                                                 The maximum that can be borrowed per year is
                                                 <span data-cap="perkins">$0</span>
                                             </div>
                                         </div>
-                                        <div class="offer-part_terms">
-                                            <p class="offer-part_term">
+                                        <div class="offer-part__terms">
+                                            <p class="offer-part__term">
                                                 <span
                                                 data-financial="perkinsRate"
-                                                data-percentage_value="true">
+                                                data-percentage__value="true">
                                                 [XX]</span>% interest
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Reserved for students most in
                                                 need; interest starts
                                                 accumulating 9 months after you
                                                 leave school; <a
                                                 href="https://studentaid.ed.gov/sa/types/loans/perkins"
-                                                target="_blank" rel="noopener noreferrer">
+                                                target="__blank" rel="noopener noreferrer">
                                                 see how you qualify</a>
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content__line loans_line" data-section="perkins"></div>
-                                    <div class="form-group_item"
+                                    <div class="content--line loans__line" data-section="perkins"></div>
+                                    <div class="form-group__item"
                                     data-section="subsidized">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__subsidized">
+                                            for="contrib--subsidized">
                                                 Subsidized loans
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="contrib__subsidized"
-                                            name="contrib__subsidized"
+                                            id="contrib--subsidized"
+                                            name="contrib--subsidized"
                                             data-financial="directSubsidized"
                                             autocorrect="off" value="0">
-                                            <div class="aid-form_calc-error" data-calc-error="directSubsidized">
-                                                {{ svg_icon('error-round') }}
+                                            <div class="aid-form__calc-error" data-calc-error="directSubsidized">
+                                                {{ svg__icon('error-round') }}
                                                 The maximum that can be borrowed per year is
                                                 <span data-cap="directSubsidized">$0</span>
                                             </div>
                                         </div>
-                                        <div class="offer-part_terms">
-                                            <p class="offer-part_term">
+                                        <div class="offer-part__terms">
+                                            <p class="offer-part__term">
                                                 <span
                                                 data-financial="subsidizedRate"
-                                                data-percentage_value="true">
+                                                data-percentage__value="true">
                                                 [XX]</span>% interest
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Interest starts accumulating 6
                                                 months after you leave school
                                             </p>
-                                            <p class="offer-part_term">
+                                            <p class="offer-part__term">
                                                 <span
                                                 data-financial="DLOriginationFee"
                                                 data-fee="origination"
-                                                data-percentage_value="true">[XX]</span>% loan fee
+                                                data-percentage__value="true">[XX]</span>% loan fee
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Fee is deducted immediately from
                                                 your loan amount, lowering the
                                                 total you receive (for example,
@@ -1011,48 +1011,48 @@ <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"
+                                    <div class="form-group__item"
                                     data-section="unsubsidized">
-                                        <div class="aid-form_label-wrapper">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__unsubsidized">
+                                            for="contrib--unsubsidized">
                                                 Unsubsidized loans
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="contrib__unsubsidized"
-                                            name="contrib__unsubsidized"
+                                            id="contrib--unsubsidized"
+                                            name="contrib--unsubsidized"
                                             data-financial="directUnsubsidized"
                                             autocorrect="off" value="0">
-                                            <div class="aid-form_calc-error" data-calc-error="directUnsubsidized">
-                                                {{ svg_icon('error-round') }}
-                                                <span data-calc-error_content="directUnsubsidized">The maximum subsidized and unsubsidized loans that can be borrowed per year is</span>
+                                            <div class="aid-form__calc-error" data-calc-error="directUnsubsidized">
+                                                {{ svg__icon('error-round') }}
+                                                <span data-calc-error__content="directUnsubsidized">The maximum subsidized and unsubsidized loans that can be borrowed per year is</span>
                                                 <span data-cap="directUnsubsidized">$0</span>
                                             </div>
                                         </div>
-                                        <div class="offer-part_terms">
-                                            <p class="offer-part_term">
+                                        <div class="offer-part__terms">
+                                            <p class="offer-part__term">
                                                 <span data-financial="unsubsidizedRate"
-                                                data-percentage_value="true">
+                                                data-percentage__value="true">
                                                 [XX]</span>% interest
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Interest starts accumulating
                                                 when the money is sent to your
                                                 school
                                             </p>
-                                            <p class="offer-part_term">
+                                            <p class="offer-part__term">
                                                 <span
                                                 data-financial="DLOriginationFee"
                                                 data-fee="origination"
-                                                data-percentage_value="true">[XX]</span>% loan fee
+                                                data-percentage__value="true">[XX]</span>% loan fee
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Fee is deducted immediately from
                                                 your loan amount, lowering the
                                                 total you receive (for example,
@@ -1065,41 +1065,41 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div data-section="gradPlus">
-                                      <div class="content__line loans_line"></div>
-                                      <div class="form-group_item">
-                                          <div class="aid-form_label-wrapper">
+                                      <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">
+                                              for="contrib--direct-plus">
                                                   Grad PLUS loan
                                               </label>
                                           </div>
-                                          <div class="aid-form_input-wrapper">
-                                              <input class="aid-form_input
-                                              aid-form_input__currency"
+                                          <div class="aid-form__input-wrapper">
+                                              <input class="aid-form__input
+                                              aid-form__input--currency"
                                               type="text"
-                                              id="contrib__direct-plus"
-                                              name="contrib__direct-plus"
+                                              id="contrib--direct-plus"
+                                              name="contrib--direct-plus"
                                               data-financial="gradPlus"
                                               autocorrect="off" value="0">
                                           </div>
-                                          <div class="offer-part_terms">
-                                              <p class="offer-part_term">
+                                          <div class="offer-part__terms">
+                                              <p class="offer-part__term">
                                                   <span
                                                   data-financial="gradPlusRate"
-                                                  data-percentage_value="true">
+                                                  data-percentage__value="true">
                                                   [XX]</span>% interest
                                               </p>
-                                              <p class="aid-form_definition">
+                                              <p class="aid-form__definition">
                                                   Interest starts accumulating
                                                   when the money is sent to your
                                                   school
                                               </p>
-                                              <p class="offer-part_term">
+                                              <p class="offer-part__term">
                                                   <span data-financial="plusOriginationFee"
                                                   data-fee="origination"
-                                                  data-percentage_value="true">[XX]</span>% loan fee
+                                                  data-percentage__value="true">[XX]</span>% loan fee
                                               </p>
-                                              <p class="aid-form_definition">
+                                              <p class="aid-form__definition">
                                                 Fee is deducted immediately from
                                                 your loan amount, lowering the
                                                 total you receive (for example,
@@ -1112,20 +1112,20 @@ <h3 class="offer-part_heading">
                                           </div>
                                       </div>
                                     </div>
-                                    <div class="aid-form_inline-subtotal"
+                                    <div class="aid-form__inline-subtotal"
                                     data-section="federalLoans">
-                                        <div class="content__line
-                                        aid-form_equals-line"></div>
+                                        <div class="content--line
+                                        aid-form__equals-line"></div>
                                         <div class="line-item">
-                                            <div class="line-item_title">
+                                            <div class="line-item__title">
                                                 Total federal loans
                                             </div>
-                                            <div class="line-item_value">
+                                            <div class="line-item__value">
                                                 <span
-                                                class="line-item_currency">
+                                                class="line-item__currency">
                                                     $
                                                 </span>
-                                                <span class="line-item_amount" data-line-item="true"
+                                                <span class="line-item__amount" data-line-item="true"
                                                 data-financial="federalTotal">
                                             </span>
                                             </div>
@@ -1133,62 +1133,62 @@ <h3 class="offer-part_heading">
                                     </div>
                                 </div>
                                 <div class="form-group private-loans-group">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Private loans
                                         </label>
-                                        <p class="aid-form_definition">
+                                        <p class="aid-form__definition">
                                             Money from banks, schools, or others
                                             you have to pay back
                                         </p>
                                     </div>
                                     <div class="private-loans">
-                                        <div class="private-loans_loan" data-private-loan="true">
-                                            <div class="private-loans_heading">
+                                        <div class="private-loans__loan" data-private-loan="true">
+                                            <div class="private-loans__heading">
                                                 <div
-                                                class="private-loans_heading-text">
+                                                class="private-loans__heading-text">
                                                     Private loan
                                                 </div>
-                                                <button class="a-btn a-btn__link
-                                                private-loans_remove-btn"
+                                                <button class="a-btn a-btn--link
+                                                private-loans__remove-btn"
                                                 type="button"
                                                 title="Remove this private loan">
                                                     Remove
-                                                    {{ svg_icon('error-round') }}
+                                                    {{ svg__icon('error-round') }}
                                                 </span>
                                                 </button>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan">
+                                                    for="contrib--private-loan">
                                                         Loan amount
                                                     </label>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__currency"
+                                                    class="aid-form__input
+                                                    aid-form__input--currency"
                                                     type="text"
-                                                    id="contrib__private-loan_0"
-                                                    name="contrib__private-loan"
+                                                    id="contrib--private-loan__0"
+                                                    name="contrib--private-loan"
                                                     data-financial="privateLoan"
-                                                    data-private-loan_key="amount"
+                                                    data-private-loan__key="amount"
                                                     autocorrect="off"
                                                     value="0">
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-interest">
+                                                    for="contrib--private-loan-interest">
                                                         Interest rate
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Interest starts
                                                         accumulating when you
                                                         sign the loan; may be a
@@ -1198,32 +1198,32 @@ <h3 class="offer-part_heading">
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-interest_0"
-                                                    name="contrib__private-loan-interest"
+                                                    id="contrib--private-loan-interest__0"
+                                                    name="contrib--private-loan-interest"
                                                     data-financial="privateLoanRate"
-                                                    data-private-loan_key="rate"
-                                                    data-percentage_value="true"
+                                                    data-private-loan__key="rate"
+                                                    data-percentage__value="true"
                                                     autocorrect="off"
                                                     value="7.9">
-                                                    <span class="aid-form_unit">
+                                                    <span class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-fees">
+                                                    for="contrib--private-loan-fees">
                                                         Loan fees
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Fee is added to the
                                                         total loan amount (for
                                                         example if the loan
@@ -1236,102 +1236,102 @@ <h3 class="offer-part_heading">
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-fees_0"
-                                                    name="contrib__private-loan-fees"
+                                                    id="contrib--private-loan-fees__0"
+                                                    name="contrib--private-loan-fees"
                                                     data-financial="privateLoanFees"
-                                                    data-percentage_value="true"
-                                                    data-private-loan_key="fees"
+                                                    data-percentage__value="true"
+                                                    data-private-loan__key="fees"
                                                     autocorrect="off"
                                                     value="0.049">
                                                     <span
-                                                    class="aid-form_unit">
+                                                    class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="private-loans_loan" data-private-loan="true">
-                                            <div class="private-loans_heading">
+                                        <div class="private-loans__loan" data-private-loan="true">
+                                            <div class="private-loans__heading">
                                                 <div
-                                                class="private-loans_heading-text">
+                                                class="private-loans__heading-text">
                                                     Private loan
                                                 </div>
-                                                <button class="a-btn a-btn__link
-                                                private-loans_remove-btn"
+                                                <button class="a-btn a-btn--link
+                                                private-loans__remove-btn"
                                                 type="button"
                                                 title="Remove this private loan">
                                                     Remove
-                                                    {{ svg_icon('error-round') }}
+                                                    {{ svg__icon('error-round') }}
                                                 </span>
                                                 </button>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan">
+                                                    for="contrib--private-loan">
                                                         Loan amount
                                                     </label>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__currency"
+                                                    class="aid-form__input
+                                                    aid-form__input--currency"
                                                     type="text"
-                                                    id="contrib__private-loan_0"
-                                                    name="contrib__private-loan"
+                                                    id="contrib--private-loan__0"
+                                                    name="contrib--private-loan"
                                                     data-financial="privateLoan"
-                                                    data-private-loan_key="amount"
+                                                    data-private-loan__key="amount"
                                                     autocorrect="off"
                                                     value="0">
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-interest">
+                                                    for="contrib--private-loan-interest">
                                                         Interest rate
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Starts accumulating
                                                         when you sign the loan
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-interest_0"
-                                                    name="contrib__private-loan-interest"
+                                                    id="contrib--private-loan-interest__0"
+                                                    name="contrib--private-loan-interest"
                                                     data-financial="privateLoanRate"
-                                                    data-private-loan_key="rate"
-                                                    data-percentage_value="true"
+                                                    data-private-loan__key="rate"
+                                                    data-percentage__value="true"
                                                     autocorrect="off"
                                                     value="7.9">
-                                                    <span class="aid-form_unit">
+                                                    <span class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-fees">
+                                                    for="contrib--private-loan-fees">
                                                         Loan fees
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Fee is added to the
                                                         total loan amount (for
                                                         example if the loan
@@ -1344,102 +1344,102 @@ <h3 class="offer-part_heading">
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-fees_0"
-                                                    name="contrib__private-loan-fees"
+                                                    id="contrib--private-loan-fees__0"
+                                                    name="contrib--private-loan-fees"
                                                     data-financial="privateLoanFees"
-                                                    data-percentage_value="true"
-                                                    data-private-loan_key="fees"
+                                                    data-percentage__value="true"
+                                                    data-private-loan__key="fees"
                                                     autocorrect="off"
                                                     value="0.049">
                                                     <span
-                                                    class="aid-form_unit">
+                                                    class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="private-loans_loan" data-private-loan="true">
-                                            <div class="private-loans_heading">
+                                        <div class="private-loans__loan" data-private-loan="true">
+                                            <div class="private-loans__heading">
                                                 <div
-                                                class="private-loans_heading-text">
+                                                class="private-loans__heading-text">
                                                     Private loan
                                                 </div>
-                                                <button class="a-btn a-btn__link
-                                                private-loans_remove-btn"
+                                                <button class="a-btn a-btn--link
+                                                private-loans__remove-btn"
                                                 type="button"
                                                 title="Remove this private loan">
                                                     Remove
-                                                    {{ svg_icon('error-round') }}
+                                                    {{ svg__icon('error-round') }}
                                                 </span>
                                                 </button>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan">
+                                                    for="contrib--private-loan">
                                                         Loan amount
                                                     </label>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__currency"
+                                                    class="aid-form__input
+                                                    aid-form__input--currency"
                                                     type="text"
-                                                    id="contrib__private-loan_0"
-                                                    name="contrib__private-loan"
+                                                    id="contrib--private-loan__0"
+                                                    name="contrib--private-loan"
                                                     data-financial="privateLoan"
-                                                    data-private-loan_key="amount"
+                                                    data-private-loan__key="amount"
                                                     autocorrect="off"
                                                     value="0">
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-interest">
+                                                    for="contrib--private-loan-interest">
                                                         Interest rate
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Starts accumulating
                                                         when you sign the loan
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-interest_0"
-                                                    name="contrib__private-loan-interest"
+                                                    id="contrib--private-loan-interest__0"
+                                                    name="contrib--private-loan-interest"
                                                     data-financial="privateLoanRate"
-                                                    data-private-loan_key="rate"
-                                                    data-percentage_value="true"
+                                                    data-private-loan__key="rate"
+                                                    data-percentage__value="true"
                                                     autocorrect="off"
                                                     value="7.9">
-                                                    <span class="aid-form_unit">
+                                                    <span class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
-                                            <div class="form-group_item">
+                                            <div class="form-group__item">
                                                 <div
-                                                class="aid-form_label-wrapper">
+                                                class="aid-form__label-wrapper">
                                                     <label class="form-label"
-                                                    for="contrib__private-loan-fees">
+                                                    for="contrib--private-loan-fees">
                                                         Loan fees
                                                     </label>
                                                     <p
-                                                    class="aid-form_definition">
+                                                    class="aid-form__definition">
                                                         Fee is added to the
                                                         total loan amount (for
                                                         example if the loan
@@ -1452,46 +1452,46 @@ <h3 class="offer-part_heading">
                                                     </p>
                                                 </div>
                                                 <div
-                                                class="aid-form_input-wrapper">
+                                                class="aid-form__input-wrapper">
                                                     <input
-                                                    class="aid-form_input
-                                                    aid-form_input__percent"
+                                                    class="aid-form__input
+                                                    aid-form__input--percent"
                                                     type="text"
-                                                    id="contrib__private-loan-fees_0"
-                                                    name="contrib__private-loan-fees"
+                                                    id="contrib--private-loan-fees__0"
+                                                    name="contrib--private-loan-fees"
                                                     data-financial="privateLoanFees"
-                                                    data-percentage_value="true"
-                                                    data-private-loan_key="fees"
+                                                    data-percentage__value="true"
+                                                    data-private-loan__key="fees"
                                                     autocorrect="off"
                                                     value="0.049">
                                                     <span
-                                                    class="aid-form_unit">
+                                                    class="aid-form__unit">
                                                         %
                                                     </span>
                                                 </div>
                                             </div>
                                         </div>
-                                        <button class="a-btn a-btn__link
-                                        private-loans_add-btn" type="button"
+                                        <button class="a-btn a-btn--link
+                                        private-loans__add-btn" type="button"
                                         title="Add another private loan"
                                         data-add-loan-button="true">
-                                            {{ svg_icon('plus-round') }}
+                                            {{ svg__icon('plus-round') }}
                                             Add another private loan
                                         </button>
                                     </div>
-                                    <div class="aid-form_inline-subtotal">
-                                        <div class="content__line
-                                        aid-form_equals-line"></div>
+                                    <div class="aid-form__inline-subtotal">
+                                        <div class="content--line
+                                        aid-form__equals-line"></div>
                                         <div class="line-item">
-                                            <div class="line-item_title">
+                                            <div class="line-item__title">
                                                 Total private loans
                                             </div>
-                                            <div class="line-item_value">
+                                            <div class="line-item__value">
                                                 <span
-                                                class="line-item_currency">
+                                                class="line-item__currency">
                                                     $
                                                 </span>
-                                                <span class="line-item_amount"
+                                                <span class="line-item__amount"
                                                 data-line-item="true"
                                                 data-financial="privateLoanTotal"></span>
                                             </div>
@@ -1500,12 +1500,12 @@ <h3 class="offer-part_heading">
                                 </div>
                                 <div class="form-group tuition-payment-plan"
                                 data-section="tuitionpaymentplan">
-                                    <div class="aid-form_group-header">
+                                    <div class="aid-form__group-header">
                                         <label class="form-label-header">
                                             Tuition payment plan from your
                                             school
                                         </label>
-                                        <p class="aid-form_definition">
+                                        <p class="aid-form__definition">
                                             A loan arrangement with your school
                                             that you pay back within a certain
                                             amount of time. The amount of the
@@ -1514,59 +1514,59 @@ <h3 class="offer-part_heading">
                                             your entire program, not per year.
                                         </p>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__payment-plan">
+                                            for="contrib--payment-plan">
                                                 Loan amount for entire program
                                             </label>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="contrib__payment-plan"
-                                            name="contrib__payment-plan"
+                                            id="contrib--payment-plan"
+                                            name="contrib--payment-plan"
                                             data-financial="tuitionRepay"
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="aid-form_label-wrapper">
+                                    <div class="form-group__item">
+                                        <div class="aid-form__label-wrapper">
                                             <label class="form-label"
-                                            for="contrib__payment-plan-yearly">
+                                            for="contrib--payment-plan-yearly">
                                                 Loan amount for one year
                                             </label>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Full tuition payment plan amount
                                                 divided by the estimated years
                                                 to complete your program
                                             </p>
                                         </div>
-                                        <div class="aid-form_input-wrapper">
-                                            <input class="aid-form_input
-                                            aid-form_input__currency"
+                                        <div class="aid-form__input-wrapper">
+                                            <input class="aid-form__input
+                                            aid-form__input--currency"
                                             type="text"
-                                            id="contrib__payment-plan-yearly"
-                                            name="contrib__payment-plan-yearly"
+                                            id="contrib--payment-plan-yearly"
+                                            name="contrib--payment-plan-yearly"
                                             data-financial="tuitionRepayYearly"
                                             disabled
                                             autocorrect="off" value="0">
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <div class="offer-part_terms">
-                                            <p class="offer-part_term">
+                                    <div class="form-group__item">
+                                        <div class="offer-part__terms">
+                                            <p class="offer-part__term">
                                                 <span
                                                 data-financial="tuitionRepayRate"
-                                                data-percentage_value="true">
+                                                data-percentage__value="true">
                                                 [X.X]</span>% interest
                                             </p>
-                                            <p class="aid-form_definition">
+                                            <p class="aid-form__definition">
                                                 Interest starts accumulating
                                                 when you leave or finish school
                                             </p>
-                                            <p class="offer-part_term">
+                                            <p class="offer-part__term">
                                                 Payments start while you are in
                                                 school and the loan must be paid
                                                 back within <span
@@ -1576,19 +1576,19 @@ <h3 class="offer-part_heading">
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="aid-form_inline-subtotal" data-section="tuitionpaymentplan">
-                                        <div class="content__line
-                                        aid-form_equals-line"></div>
+                                    <div class="aid-form__inline-subtotal" data-section="tuitionpaymentplan">
+                                        <div class="content--line
+                                        aid-form__equals-line"></div>
                                         <div class="line-item">
-                                            <div class="line-item_title">
+                                            <div class="line-item__title">
                                                 Total payment plans
                                             </div>
-                                            <div class="line-item_value">
+                                            <div class="line-item__value">
                                                 <span
-                                                class="line-item_currency">
+                                                class="line-item__currency">
                                                     $
                                                 </span>
-                                                <span class="line-item_amount"
+                                                <span class="line-item__amount"
                                                 data-line-item="true"
                                                 data-financial="tuitionRepay"></span>
                                             </div>
@@ -1597,182 +1597,182 @@ <h3 class="offer-part_heading">
                                 </div>
                             </form>
                         </div>
-                        <div class="offer-part_summary-wrapper column-well
-                        column-well__bleed column-well__not-stacked">
-                            <div class="aid-form_summary column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                        <div class="offer-part__summary-wrapper column-well
+                        column-well--bleed column-well--not-stacked">
+                            <div class="aid-form__summary column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Loans summary
                                 </h4>
                                 <div class="line-item"
                                 data-section="federalLoans">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Federal loans
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="federalTotal"
-                                        id="summary_total-federal-loans">
+                                        id="summary__total-federal-loans">
                                     </span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Private loans
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( + )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="privateLoanTotal"
-                                        id="summary_total-private-loans">
+                                        id="summary__total-private-loans">
                                     </span>
                                     </div>
                                 </div>
                                 <div class="line-item" data-section="tuitionpaymentplan">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Tuition payment plan for one year
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( + )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="tuitionRepayYearly"
-                                        id="summary_total-payment-plans">
+                                        id="summary__total-payment-plans">
                                     </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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Total student loan debt
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="summaryLoanTotal"
-                                        id="summary_total-loans"></span>
+                                        id="summary__total-loans"></span>
                                     </div>
                                 </div>
                             </div>
-                            <div class="aid-form_summary big-picture
-                            column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                            <div class="aid-form__summary big-picture
+                            column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Big picture
                                 </h4>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your out-of-pocket cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="firstYearNetCost">
                                         </span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your contributions
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="savingsTotal">
                                     </span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your debt
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Remaining cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
-                                          id="summary_remaining-cost-after-loans"
+                                          id="summary__remaining-cost-after-loans"
                                           data-financial="gap"></span>
                                     </div>
                                 </div>
                                 <p>
                                     This is an estimate of the remaining costs
                                     of studying your program at
-                                    {{school_primary_alias}} for one year based
+                                    {{school__primary__alias}} for one year based
                                     on your inputs above.
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="offer-part future
-                    column-well_wrapper__overflow-small">
-                        <div class="offer-part_intro">
-                            <div class="offer-part_intro-wrapper">
-                                <div class="offer-part_intro-content">
-                                    <h3 class="offer-part_heading">
+                    column-well__wrapper--overflow-small">
+                        <div class="offer-part__intro">
+                            <div class="offer-part__intro-wrapper">
+                                <div class="offer-part__intro-content">
+                                    <h3 class="offer-part__heading">
                                         What does this mean for your future?
                                     </h3>
                                 </div>
                             </div>
                         </div>
-                        <div class="offer-part_form-wrapper">
-                            <p class="offer-part_content-positive-cost">
+                        <div class="offer-part__form-wrapper">
+                            <p class="offer-part__content-positive-cost">
                                 It looks like you still have a remaining cost
-                                of <span id="future_remaining-cost-positive"
+                                of <span id="future__remaining-cost-positive"
                                 data-financial="gap">[XX]</span> to pay for
                                 the first year of school. You’ll either need
                                 to lower your cost of attendance, pay more
                                 upfront, or increase your loan amount to cover
                                 these costs.
                             </p>
-                            <p class="offer-part_content-negative-cost">
+                            <p class="offer-part__content-negative-cost">
                                 It looks like you are borrowing
-                                <span id="future_remaining-cost-negative"
+                                <span id="future__remaining-cost-negative"
                                 data-financial="overborrowing">[XX]</span> more than
                                 you need to pay for school. You can reduce
                                 your future debt by decreasing your loan
@@ -1780,7 +1780,7 @@ <h3 class="offer-part_heading">
                             </p>
                             <p>
                                 Think about how borrowing <span
-                                id="future_total-loans"
+                                id="future__total-loans"
                                 data-financial="summaryLoanTotal">[XX]</span> this
                                 year will affect your future finances. As you
                                 can see in the summary, the
@@ -1788,7 +1788,7 @@ <h3 class="offer-part_heading">
                                 data-currency="false"
                                 data-financial="yearsAttending">[XX]</span>
                                 plus interest and fees equals <span
-                                id="future_total-debt"
+                                id="future__total-debt"
                                 data-financial="loanLifetime">[XX]</span>.
                             </p>
                             <p>
@@ -1799,143 +1799,143 @@ <h3 class="offer-part_heading">
                                 repay your student debt.
                             </p>
                         </div>
-                        <div class="offer-part_summary-wrapper column-well
-                        column-well__bleed column-well__not-stacked">
-                            <div class="aid-form_summary big-picture
-                            column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                        <div class="offer-part__summary-wrapper column-well
+                        column-well--bleed column-well--not-stacked">
+                            <div class="aid-form__summary big-picture
+                            column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Big picture
                                 </h4>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your out-of-pocket cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="firstYearNetCost">
                                         </span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your contributions
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="savingsTotal">
                                         </span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Your debt
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
-                                            <span class="line-item_sign">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         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">
+                                <div class="line-item line-item--total">
+                                    <div class="line-item__title">
                                         Remaining cost
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="gap"
-                                        id="summary_remaining-cost-final">
+                                        id="summary__remaining-cost-final">
                                         </span>
                                     </div>
                                 </div>
-                                <p class="offer-part_content-positive-cost">
+                                <p class="offer-part__content-positive-cost">
                                     After all the grants, scholarships, loans,
                                     and personal contributions, this is how
                                     much you still need to pay to attend
-                                    {{school_primary_alias}} for one year.
+                                    {{school__primary__alias}} for one year.
                                 </p>
                             </div>
-                            <div class="aid-form_summary debt-summary
-                            column-well_content">
-                                <h4 class="aid-form_summary-heading">
+                            <div class="aid-form__summary debt-summary
+                            column-well__content">
+                                <h4 class="aid-form__summary-heading">
                                     Debt summary
                                 </h4>
-                                <div class="line-item" data-multi_year="true">
-                                    <div class="line-item_title">
+                                <div class="line-item" data-multi__year="true">
+                                    <div class="line-item__title">
                                         Loans for first year
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="summaryLoanTotal"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title" data-multi_year="false">
+                                    <div class="line-item__title" data-multi__year="false">
                                         Loans for program length
                                     </div>
-                                    <div class="line-item_title" data-multi_year="true">
+                                    <div class="line-item__title" data-multi__year="true">
                                         Loans for <span
-                                        id="future_years-attending"
+                                        id="future__years-attending"
                                         data-financial="yearsAttending"
                                         data-currency="false"
                                         >[XX]
                                         </span> (program length)
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="totalProgramDebt"
-                                        id="summary_total-program-debt"></span>
+                                        id="summary__total-program-debt"></span>
                                     </div>
                                 </div>
                                 <div class="line-item">
-                                    <div class="line-item_title">
+                                    <div class="line-item__title">
                                         Total cost of repayment with interest
                                         and fees
-                                        <span class="line-item_explanation">
+                                        <span class="line-item__explanation">
                                             Assuming all interest rates and loan
                                             amounts remain the same for the
                                             entire program and a standard
                                             10-year repayment plan
                                         </span>
                                     </div>
-                                    <div class="line-item_value">
-                                        <span class="line-item_currency">
+                                    <div class="line-item__value">
+                                        <span class="line-item__currency">
                                             $
                                         </span>
-                                        <span class="line-item_amount"
+                                        <span class="line-item__amount"
                                         data-line-item="true"
                                         data-financial="loanLifetime"
-                                        id="summary_total-repayment"></span>
+                                        id="summary__total-repayment"></span>
                                     </div>
                                 </div>
                                 <p>
@@ -1950,11 +1950,11 @@ <h4 class="aid-form_summary-heading">
                 </div>
             </section>
             <section class="continue step">
-                <div class="content__wrapper">
-                    <div class="content__main">
-                        <div class="continue_wrapper">
-                            <div class="continue_content">
-                                <h2 class="step_heading">
+                <div class="content--wrapper">
+                    <div class="content--main">
+                        <div class="continue__wrapper">
+                            <div class="continue__content">
+                                <h2 class="step__heading">
                                     Don’t forget you can edit amounts in your
                                     offer. These loan numbers will be used in
                                     Step 2 to help you evaluate your offer.
@@ -1968,10 +1968,10 @@ <h2 class="step_heading">
                                     work with them to determine your
                                     eligibility.
                                 </p>
-                                <div class="continue_controls">
-                                    <button class="a-btn a-btn__full-on-xs a-btn__disabled"
+                                <div class="continue__controls">
+                                    <button class="a-btn a-btn--full-on-xs a-btn--disabled"
                                     title="Continue to Step 2" type="button" disabled>
-                                    {{ svg_icon('updating') }} Continue to Step 2
+                                    {{ svg__icon('updating') }} Continue to Step 2
                                     </button>
                                 </div>
                             </div>
@@ -1979,15 +1979,15 @@ <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="evaluate_wrapper">
-                        <div class="evaluate_intro">
-                            <h2 class="step_heading">
+                <div class="content--main">
+                    <div class="evaluate__wrapper">
+                        <div class="evaluate__intro">
+                            <h2 class="step__heading">
                                 Step 2: Weigh the financial impact of your offer
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 The information in this section will help you
                                 understand how accepting this offer could
                                 affect your ability to pay back your student
@@ -1995,18 +1995,18 @@ <h2 class="step_heading">
                             </p>
                         </div>
                     </div>
-                    <section class="criteria column-well_wrapper">
-                        <h3 class="criteria_heading">
+                    <section class="criteria column-well__wrapper">
+                        <h3 class="criteria__heading">
                             How many students graduate?
                         </h3>
-                        <div class="criteria_wrapper">
-                            <div class="criteria_intro">
-                                <p class="content_grad-cohort">
+                        <div class="criteria__wrapper">
+                            <div class="criteria__intro">
+                                <p class="content__grad-cohort">
                                     For first-time students enrolled full-time
-                                    in {{program.program_name}} at
-                                    {{school_primary_alias}},
+                                    in {{program.program__name}} at
+                                    {{school__primary__alias}},
                                     {{program.completers}} out of
-                                    {{program.completion_cohort}}
+                                    {{program.completion__cohort}}
                                     graduated.
                                 </p>
                                 <p>
@@ -2020,12 +2020,12 @@ <h3 class="criteria_heading">
                                 </p>
                             </div>
                             <section class="metric graduation-rate column-well
-                            column-well__bleed column-well__not-stacked">
-                                <div class="column-well_content">
-                                    <h4 class="metric_heading">
+                            column-well--bleed column-well--not-stacked">
+                                <div class="column-well__content">
+                                    <h4 class="metric__heading">
                                         Graduation rate
                                     </h4>
-                                    <p class="metric_explanation">
+                                    <p class="metric__explanation">
                                         Percentage of first-time, full-time
                                         students who graduate from
                                         <span class="content-grad-program">your
@@ -2037,74 +2037,74 @@ <h4 class="metric_heading">
                                     data-incoming-format="decimal-percent"
                                     data-graph-min="0"
                                     data-graph-max="1">
-                                        <div class="bar-graph_bar"></div>
-                                        <div class="bar-graph_point
-                                        bar-graph_point__you u-clearfix">
-                                            <div class="bar-graph_label"
-                                            data-graph_label="completionRate">
+                                        <div class="bar-graph__bar"></div>
+                                        <div class="bar-graph__point
+                                        bar-graph__point--you u-clearfix">
+                                            <div class="bar-graph__label"
+                                            data-graph__label="completionRate">
                                                 This school
                                             </div>
-                                            <div class="bar-graph_line"></div>
-                                            <div class="bar-graph_value">
-                                                <div data-bar-graph_number="you" class="bar-graph_number"></div>
+                                            <div class="bar-graph__line"></div>
+                                            <div class="bar-graph__value">
+                                                <div data-bar-graph__number="you" class="bar-graph__number"></div>
                                             </div>
                                         </div>
-                                        <div class="bar-graph_point
-                                        bar-graph_point__average u-clearfix">
-                                            <div class="bar-graph_label">
+                                        <div class="bar-graph__point
+                                        bar-graph__point--average u-clearfix">
+                                            <div class="bar-graph__label">
                                                 National average
                                             </div>
-                                            <div class="bar-graph_line"></div>
-                                            <div class="bar-graph_value">
-                                                <div data-bar-graph_number="average" class="bar-graph_number"></div>
+                                            <div class="bar-graph__line"></div>
+                                            <div class="bar-graph__value">
+                                                <div data-bar-graph__number="average" class="bar-graph__number"></div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="metric_notification"
+                                    <div class="metric__notification"
                                          data-better-direction="higher">
 
-                                        <p class="cf-notification_text
-                                        metric_notification_text__better">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-better">
                                             Higher graduation rate than national
                                             average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__same">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-same">
                                             About the same graduation rate as
                                             national average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__worse">
-                                            <span class="cf-notification_icon
-                                                         cf-notification_icon__error">
-                                                {{ svg_icon('error-round') }}
+                                        <p class="cf-notification__text
+                                        metric__notification-text-worse">
+                                            <span class="cf-notification__icon
+                                                         cf-notification__icon--error">
+                                                {{ svg__icon('error-round') }}
                                             </span>
                                             Lower graduation rate than national
                                             average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-you">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-you">
                                             We currently don’t have data to
                                             display for your school
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-average">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-average">
                                             We currently don’t have national
                                             average data to display
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-data">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-data">
                                             We currently don’t have data to
                                             display
                                         </p>
                                     </div>
-                                    <div class="metric_link">
+                                    <div class="metric__link">
                                         <p>
                                             Curious about the graduation rate
                                             for the entire school? <a
                                             href="https://collegescorecard.ed.gov/"
                                             class="graduation-link"
-                                            target="_blank" rel="noopener noreferrer">See
+                                            target="__blank" rel="noopener noreferrer">See
                                             how this school’s graduation rate
                                             compares to the national average</a>
                                         </p>
@@ -2113,18 +2113,18 @@ <h4 class="metric_heading">
                             </section>
                         </div>
                     </section>
-                    <section class="criteria column-well_wrapper">
-                        <h3 class="criteria_heading">
+                    <section class="criteria column-well__wrapper">
+                        <h3 class="criteria__heading">
                             How do I know if I'm about to take on too much debt?
                         </h3>
-                        <div class="criteria_wrapper">
-                            <div class="criteria_intro">
-                                <p id="content_salary">
-                                    <span id="content_median-salary">According
+                        <div class="criteria__wrapper">
+                            <div class="criteria__intro">
+                                <p id="content__salary">
+                                    <span id="content__median-salary">According
                                         to your school, the average
                                     first-year salary for students graduating
                                     from your program is</span> <span
-                                    id="criteria_median-salary"
+                                    id="criteria__median-salary"
                                     data-financial="medianSalary">[XX]</span>
                                     per year. In reality, you could end up
                                     making more or less than the salary
@@ -2143,82 +2143,82 @@ <h3 class="criteria_heading">
                                 </p>
                             </div>
                             <section class="metric salary-and-debt
-                            column-well column-well__bleed
-                            column-well__not-stacked">
-                                <div class="column-well_content">
-                                    <h4 class="metric_heading">
+                            column-well column-well--bleed
+                            column-well--not-stacked">
+                                <div class="column-well__content">
+                                    <h4 class="metric__heading">
                                         Your salary and total student debt
                                     </h4>
                                     <p>
                                         A general rule of thumb <span
-                                        class="content_graduate-program">for
+                                        class="content__graduate-program">for
                                         undergraduates</span> is that you should
                                         avoid borrowing more for school than
                                         you’ll earn your first year out of
                                         school.
                                     </p>
-                                    <p class="content_graduate-program">
+                                    <p class="content__graduate-program">
                                         For graduate students, especially in
                                         medical residency programs, this rule of
                                         thumb may not apply.
                                     </p>
-                                    <div id="salary-and-debt-metric" class="salary-and-debt_projection">
-                                        <div id="content_salary-metric"
-                                        class="salary-and-debt_projection-name">
+                                    <div id="salary-and-debt-metric" class="salary-and-debt__projection">
+                                        <div id="content__salary-metric"
+                                        class="salary-and-debt__projection-name">
                                           Typical first-year salary
                                           for this program
                                         </div>
                                         <div
-                                        class="salary-and-debt_projection-value">
+                                        class="salary-and-debt__projection-value">
                                             <span
                                             data-financial="medianSalary">[XX]
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="salary-and-debt_projection">
+                                    <div class="salary-and-debt__projection">
                                         <div
-                                        class="salary-and-debt_projection-name">
+                                        class="salary-and-debt__projection-name">
                                           Estimated debt when repayment begins
-                                          <span class="salary-and-debt_explanation">
+                                          <span class="salary-and-debt__explanation">
                                               Includes interest and fees
                                               accrued while in school
                                           </span>
                                         </div>
                                         <div
-                                        class="salary-and-debt_projection-value">
+                                        class="salary-and-debt__projection-value">
                                             <span
                                             data-financial="totalDebt">
                                             </span>
                                       </div>
                                     </div>
-                                    <div class="metric_notification"
+                                    <div class="metric__notification"
                                     data-better-direction="higher">
-                                        <p class="cf-notification_text
-                                        metric_notification_text__better">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-better">
                                             Projected first-year salary is
                                             higher than total student debt
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__same">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-same">
                                             Projected first-year salary is
                                             about the same as total student debt
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__worse">
-                                            <span class="cf-notification_icon
-                                                         cf-notification_icon__error">
-                                                {{ svg_icon('error-round') }}
+                                        <p class="cf-notification__text
+                                        metric__notification-text-worse">
+                                            <span class="cf-notification__icon
+                                                         cf-notification__icon--error">
+                                                {{ svg__icon('error-round') }}
                                             </span>
                                             Projected first-year salary is
                                             lower than total student debt
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-you">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-you">
                                             We currently don’t have salary data
                                             to display for your school
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-data">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-data">
                                             We currently don’t have salary data
                                             to display
                                         </p>
@@ -2227,15 +2227,15 @@ <h4 class="metric_heading">
                             </section>
                         </div>
                     </section>
-                    <section class="criteria column-well_wrapper">
-                        <h3 class="criteria_heading">
+                    <section class="criteria column-well__wrapper">
+                        <h3 class="criteria__heading">
                             How much will I pay per month for all of my student loans?
                         </h3>
-                        <div class="criteria_wrapper">
-                            <div class="criteria_intro">
+                        <div class="criteria__wrapper">
+                            <div class="criteria__intro">
                                 <p>
                                   Currently, your projected monthly student loan
-                                  payment is <span id="criteria_loan-monthly"
+                                  payment is <span id="criteria__loan-monthly"
                                   data-financial="loanMonthly">[$XX]</span>,
                                   based on standard loan terms of <span
                                   data-financial="repaymentTerm"
@@ -2243,7 +2243,7 @@ <h3 class="criteria_heading">
                                   you leave school, you are able to choose one
                                   of <a
                                   href="https://studentaid.gov/manage-loans/repayment/plans"
-                                  target="_blank" rel="noopener noreferrer">several
+                                  target="__blank" rel="noopener noreferrer">several
                                   different repayment options for your federal
                                   loans</a> that may help reduce your monthly
                                   student loan payment.
@@ -2256,7 +2256,7 @@ <h3 class="criteria_heading">
                                     repaying your loans, you may be able to
                                     <a
                                     href="https://www.irs.gov/newsroom/tax-benefits-for-education-information-center"
-                                    target="_blank" rel="noopener noreferrer">reduce your
+                                    target="__blank" rel="noopener noreferrer">reduce your
                                     federal tax burden</a>. Please consult with
                                     your tax advisor.
                                 </p>
@@ -2273,7 +2273,7 @@ <h3 class="criteria_heading">
                                   plans you may be paying off your loans for up
                                   to of 20 to 25 years.
                                 </p>
-                                <p data-term-toggle="repaymentContent_30KFederalLoans">
+                                <p data-term-toggle="repaymentContent__30KFederalLoans">
                                   Another payment option extends your
                                   repayment over 25 years, which means you
                                   would have a lower monthly student loan
@@ -2288,47 +2288,47 @@ <h3 class="criteria_heading">
                                 </p>
                             </div>
                             <section class="metric salary-and-debt
-                            column-well column-well__bleed
-                            column-well__not-stacked"
+                            column-well column-well--bleed
+                            column-well--not-stacked"
                              data-repayment-section="monthly-payment">
-                                <div class="column-well_content">
-                                    <h4 class="metric_heading repaymentContent">
+                                <div class="column-well__content">
+                                    <h4 class="metric__heading repaymentContent">
                                         Your estimated monthly payment
                                     </h4>
-                                    <p class="metric_explanation
+                                    <p class="metric__explanation
                                     repaymentContent">
                                         Based on a standard loan term of 10
                                         years
                                     </p>
-                                    <h4 class="metric_heading"
-                                    data-term-toggle="repaymentContent_30KFederalLoans">
+                                    <h4 class="metric__heading"
+                                    data-term-toggle="repaymentContent__30KFederalLoans">
                                         Calculate your monthly payment
                                     </h4>
-                                    <p data-term-toggle="repaymentContent_30KFederalLoans">
+                                    <p data-term-toggle="repaymentContent__30KFederalLoans">
                                         Once you leave school, you can choose
                                         one of several available repayment
                                         options.
                                     </p>
-                                    <div class="salary-and-debt_projection">
+                                    <div class="salary-and-debt__projection">
                                         <div
-                                        class="salary-and-debt_projection-name">
+                                        class="salary-and-debt__projection-name">
                                          Your projected loan payment
                                         </div>
                                         <div
-                                        class="salary-and-debt_projection-value">
+                                        class="salary-and-debt__projection-value">
                                             <span
                                             data-financial="loanMonthly">
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="salary-and-debt_projection">
+                                    <div class="salary-and-debt__projection">
                                         <div
-                                        class="salary-and-debt_projection-name">
+                                        class="salary-and-debt__projection-name">
                                           Total cost of repayment with interest
                                           and fees
                                         </div>
                                         <div
-                                        class="salary-and-debt_projection-value">
+                                        class="salary-and-debt__projection-value">
                                             <span
                                             data-financial="loanLifetime">
                                             </span>
@@ -2339,18 +2339,18 @@ <h4 class="metric_heading repaymentContent">
                                         See how loan length affects your
                                         payments
                                       </p>
-                                      <div class="salary-and-debt_payment-term"
-                                      id="monthly-payment_term">
-                                        <label for="monthly-payment_term_10">
-                                          <input id="monthly-payment_term_10"
+                                      <div class="salary-and-debt__payment-term"
+                                      id="monthly-payment__term">
+                                        <label for="monthly-payment__term__10">
+                                          <input id="monthly-payment__term__10"
                                           type="radio"
-                                          name="monthly-payment_term"
+                                          name="monthly-payment__term"
                                           value="10" checked> 10 years
                                         </label>
-                                        <label for="monthly-payment_term_25">
-                                          <input id="monthly-payment_term_25"
+                                        <label for="monthly-payment__term__25">
+                                          <input id="monthly-payment__term__25"
                                           type="radio"
-                                          name="monthly-payment_term"
+                                          name="monthly-payment__term"
                                           value="25">
                                           25 years
                                         </label>
@@ -2359,7 +2359,7 @@ <h4 class="metric_heading repaymentContent">
                                     <div>
                                         <p>
                                           <a href="https://studentaid.gov/manage-loans/repayment/plans"
-                                          target="_blank" rel="noopener noreferrer">
+                                          target="__blank" rel="noopener noreferrer">
                                             Learn about other federal repayment options
                                           </a>
                                         </p>
@@ -2369,12 +2369,12 @@ <h4 class="metric_heading repaymentContent">
                         </div>
                     </section>
                     <section class="criteria
-                    column-well_wrapper__overflow-small">
-                        <h3 class="criteria_heading">
+                    column-well__wrapper--overflow-small">
+                        <h3 class="criteria__heading">
                             How will I afford my loan payment?
                         </h3>
-                        <div class="criteria_wrapper">
-                            <div class="criteria_intro">
+                        <div class="criteria__wrapper">
+                            <div class="criteria__intro">
                                 <p>
                                     Think about how much money you can expect to
                                     make if you graduate and get a job in your
@@ -2383,52 +2383,52 @@ <h3 class="criteria_heading">
                                     payments. In reality, you could end up
                                     making more or less than the salaries shown here.
                                 </p>
-                                <p class="content_job-placement"
-                                id="criteria_job-placement-content">
+                                <p class="content__job-placement"
+                                id="criteria__job-placement-content">
                                     Keep in mind your school has a <a
-                                    href="/{{url_root}}/understanding-your-financial-aid-offer/about-this-tool/#job-placement-rate" target="_blank" rel="noopener noreferrer">job
+                                    href="/{{url__root}}/understanding-your-financial-aid-offer/about-this-tool/#job-placement-rate" target="__blank" rel="noopener noreferrer">job
                                     placement rate</a> of <span
-                                    id="criteria_job-placement-rate"
+                                    id="criteria__job-placement-rate"
                                     data-financial="jobRate"
-                                    data-percentage_value="true">[X.X]</span>%
+                                    data-percentage__value="true">[X.X]</span>%
                                     for students who graduate and get a job in
                                     their field of study within six months of
                                     graduating.
                                 </p>
                             </div>
                             <section class="metric debt-burden column-well
-                              column-well__bleed column-well__not-stacked"
+                              column-well--bleed column-well--not-stacked"
                               data-repayment-section="debt-burden">
-                                  <div class="column-well_content">
-                                      <h4 class="metric_heading">
+                                  <div class="column-well__content">
+                                      <h4 class="metric__heading">
                                           Your estimated debt burden
                                       </h4>
-                                      <p class="metric_explanation">
+                                      <p class="metric__explanation">
                                           We calculate your debt burden by
                                           dividing your monthly loan payment by
                                           the average <span
-                                          id="content_debt-burden-salary">salary
+                                          id="content__debt-burden-salary">salary
                                           for students who attended your
                                           school</span>.
                                       </p>
-                                      <div class="debt-burden_projection">
+                                      <div class="debt-burden__projection">
                                           <div
-                                          class="debt-burden_projection-name">
+                                          class="debt-burden__projection-name">
                                               Your projected loan payment
                                           </div>
                                           <div
-                                          class="debt-burden_projection-value">
+                                          class="debt-burden__projection-value">
                                               <span data-debt-burden="loanMonthly"></span>
                                               / mo.
                                           </div>
                                       </div>
-                                      <div class="debt-burden_projection">
+                                      <div class="debt-burden__projection">
                                           <div
-                                          class="debt-burden_projection-name">
+                                          class="debt-burden__projection-name">
                                               Average salary
                                           </div>
                                           <div
-                                          class="debt-burden_projection-value">
+                                          class="debt-burden__projection-value">
                                               <span data-debt-burden="annualSalary"></span>
                                               / yr.<br>
                                               <span data-debt-burden="monthlySalary"></span>
@@ -2436,64 +2436,64 @@ <h4 class="metric_heading">
                                           </div>
                                       </div>
                                       <div class="debt-equation u-clearfix">
-                                          <div class="debt-equation_part
-                                          debt-equation_part__loan">
-                                              <div class="debt-equation_number">
+                                          <div class="debt-equation__part
+                                          debt-equation__part--loan">
+                                              <div class="debt-equation__number">
                                                   <span data-debt-burden="loanMonthly"></span>
                                               </div>
-                                              <div class="debt-equation_label">
+                                              <div class="debt-equation__label">
                                                   loan payment
                                               </div>
                                           </div>
-                                          <div class="debt-equation_symbol">
+                                          <div class="debt-equation__symbol">
                                               /
                                           </div>
-                                          <div class="debt-equation_part
-                                          debt-equation_part__income">
-                                              <div class="debt-equation_number">
+                                          <div class="debt-equation__part
+                                          debt-equation__part--income">
+                                              <div class="debt-equation__number">
                                                   <span data-debt-burden="monthlySalary"></span>
                                               </div>
-                                              <div class="debt-equation_label">
+                                              <div class="debt-equation__label">
                                                   monthly salary
                                               </div>
                                           </div>
-                                          <div class="debt-equation_symbol">
+                                          <div class="debt-equation__symbol">
                                               =
                                           </div>
-                                          <div class="debt-equation_part
-                                          debt-equation_part__percent">
-                                              <div class="debt-equation_number">
+                                          <div class="debt-equation__part
+                                          debt-equation__part--percent">
+                                              <div class="debt-equation__number">
                                                   <span data-debt-burden="debtBurden"></span>
                                               </div>
-                                              <div class="debt-equation_label">
+                                              <div class="debt-equation__label">
                                                   of your income
                                               </div>
                                           </div>
                                       </div>
-                                      <div class="metric_notification"
+                                      <div class="metric__notification"
                                       data-better-direction="lower">
-                                          <p class="cf-notification_text
-                                          metric_notification_text__better">
+                                          <p class="cf-notification__text
+                                          metric__notification-text-better">
                                               Loan payment is lower than
                                               recommended 8% of salary
                                           </p>
-                                          <p class="cf-notification_text
-                                          metric_notification_text__same">
+                                          <p class="cf-notification__text
+                                          metric__notification-text-same">
                                               Loan payment is equal to
                                               recommended 8% of salary
                                           </p>
-                                          <p class="cf-notification_text
-                                          metric_notification_text__worse">
-                                            <span class="cf-notification_icon
-                                                         cf-notification_icon__error">
-                                                {{ svg_icon('error-round') }}
+                                          <p class="cf-notification__text
+                                          metric__notification-text-worse">
+                                            <span class="cf-notification__icon
+                                                         cf-notification__icon--error">
+                                                {{ svg__icon('error-round') }}
                                             </span>
                                               Loan payment is higher than
                                               recommended 8% of salary
                                           </p>
                                       </div>
-                                      <div class="debt-burden_payment-term"
-                                      id="estimated-debt-burden_term"
+                                      <div class="debt-burden__payment-term"
+                                      id="estimated-debt-burden__term"
                                       data-repayment-section="estimated-debt-burden"
                                       data-term-toggle="debtBurden">
                                       <p>
@@ -2501,19 +2501,19 @@ <h4 class="metric_heading">
                                         burden
                                       </p>
                                         <label
-                                        for="estimated-debt-burden_term_10">
+                                        for="estimated-debt-burden__term__10">
                                           <input
-                                          id="estimated-debt-burden_term_10"
+                                          id="estimated-debt-burden__term__10"
                                           type="radio"
-                                          name="estimated-debt-burden_term"
+                                          name="estimated-debt-burden__term"
                                           value="10" checked> 10 years
                                         </label>
                                         <label
-                                        for="estimated-debt-burden_term_25">
+                                        for="estimated-debt-burden__term__25">
                                           <input
-                                          id="estimated-debt-burden_term_25"
+                                          id="estimated-debt-burden__term__25"
                                           type="radio"
-                                          name="estimated-debt-burden_term"
+                                          name="estimated-debt-burden__term"
                                           value="25">
                                           25 years
                                         </label>
@@ -2522,8 +2522,8 @@ <h4 class="metric_heading">
                               </section>
                             <section class="estimated-expenses">
                                 <form class="aid-form" action="#">
-                                    <div class="aid-form_heading">
-                                        <h4 class="aid-form_title">
+                                    <div class="aid-form__heading">
+                                        <h4 class="aid-form__title">
                                             Estimated budget after you leave
                                             school (adjust as needed)
                                         </h4>
@@ -2533,17 +2533,17 @@ <h4 class="aid-form_title">
                                             <span
                                             data-financial="medianSalary">[$XX]
                                             </span>/year <span
-                                            id="content_expenses-nat-salary">
+                                            id="content__expenses-nat-salary">
                                             (the average national salary for all
                                             students who attended
                                             college)</span> in the region you
                                             plan to live (Source: <a
                                             href="https://www.bls.gov/cex/"
-                                            target="_blank" rel="noopener noreferrer">Bureau of Labor
+                                            target="__blank" rel="noopener noreferrer">Bureau of Labor
                                             Statistics</a>). Your expenses may
                                             be higher or lower.
                                         </p>
-                                        <div class="estimated-expenses_region">
+                                        <div class="estimated-expenses__region">
                                             <div class="a-select">
                                               <select id="bls-region-select">
                                                 <option value="WE">West region</option>
@@ -2555,259 +2555,259 @@ <h4 class="aid-form_title">
                                         </div>
                                     </div>
                                     <div class="line-item">
-                                        <div class="line-item_title">
+                                        <div class="line-item__title">
                                             Average monthly salary
                                             <span
-                                            class="line-item_explanation">
+                                            class="line-item__explanation">
                                                 Before taxes
                                             </span>
                                         </div>
-                                        <div class="line-item_value">
-                                            <span class="line-item_currency">
+                                        <div class="line-item__value">
+                                            <span class="line-item__currency">
                                                 $
                                             </span>
-                                            <span class="line-item_amount"
+                                            <span class="line-item__amount"
                                             data-line-item="true"
                                             data-financial="monthlySalary"
-                                            id="summary_monthly-salary">
+                                            id="summary__monthly-salary">
                                             </span>
                                         </div>
                                     </div>
                                     <div class="line-item">
-                                        <div class="line-item_title">
+                                        <div class="line-item__title">
                                             Monthly student loan payment
                                             <span
-                                            class="line-item_explanation">
+                                            class="line-item__explanation">
                                                 Based on <span
                                                 data-financial="repaymentTerm"
                                                 data-currency="false">
                                                 </span>-year repayment plan
                                             </span>
                                         </div>
-                                        <div class="line-item_value">
-                                            <span class="line-item_sign">
+                                        <div class="line-item__value">
+                                            <span class="line-item__sign">
                                                 ( &minus; )
                                             </span>
-                                            <span class="line-item_currency">
+                                            <span class="line-item__currency">
                                                 $
                                             </span>
-                                            <span class="line-item_amount" data-line-item="true"
+                                            <span class="line-item__amount" data-line-item="true"
                                             data-financial="loanMonthly"></span>
                                         </div>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Housing
-                                                <span class="line-item_explanation">
+                                                <span class="line-item__explanation">
                                                     Includes utilities, cell
                                                     phone
                                                 </span>
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
-                                                type="text" id="expenses__rent"
-                                                name="expenses__rent"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
+                                                type="text" id="expenses--rent"
+                                                name="expenses--rent"
                                                 data-expenses="housing"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Food
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
-                                                type="text" id="expenses__food"
-                                                name="expenses__food"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
+                                                type="text" id="expenses--food"
+                                                name="expenses--food"
                                                 data-expenses="food"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Clothing
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__clothing"
-                                                name="expenses__clothing"
+                                                id="expenses--clothing"
+                                                name="expenses--clothing"
                                                 data-expenses="clothing"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Transportation
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__transportation"
-                                                name="expenses__transportation"
+                                                id="expenses--transportation"
+                                                name="expenses--transportation"
                                                 data-expenses="transportation"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Healthcare
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__healthcare"
-                                                name="expenses__healthcare"
+                                                id="expenses--healthcare"
+                                                name="expenses--healthcare"
                                                 data-expenses="healthcare"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Entertainment
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__entertainment"
-                                                name="expenses__entertainment"
+                                                id="expenses--entertainment"
+                                                name="expenses--entertainment"
                                                 data-expenses="entertainment"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Retirement and savings
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__retirement"
-                                                name="expenses__retirement"
+                                                id="expenses--retirement"
+                                                name="expenses--retirement"
                                                 data-expenses="retirement"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Taxes
-                                                <span class="line-item_explanation">
+                                                <span class="line-item__explanation">
                                                     Federal, state, local
                                                 </span>
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
-                                                <input class="aid-form_input
-                                                aid-form_input__currency"
+                                                <input class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__taxes"
-                                                name="expenses__taxes"
+                                                id="expenses--taxes"
+                                                name="expenses--taxes"
                                                 data-expenses="taxes"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
-                                    <div class="form-group_item">
-                                        <label class="form-label__wrapped">
+                                    <div class="form-group__item">
+                                        <label class="form-label--wrapped">
                                             <span
-                                            class="form-label_text-wrapper">
+                                            class="form-label__text-wrapper">
                                                 Other
                                             </span>
                                             <span
-                                            class="aid-form_input-wrapper">
-                                                <span class="aid-form_sign">
+                                            class="aid-form__input-wrapper">
+                                                <span class="aid-form__sign">
                                                     ( &minus; )
                                                 </span>
                                                 <input
-                                                class="aid-form_input
-                                                aid-form_input__currency"
+                                                class="aid-form__input
+                                                aid-form__input--currency"
                                                 type="text"
-                                                id="expenses__other"
-                                                name="expenses__other"
+                                                id="expenses--other"
+                                                name="expenses--other"
                                                 data-expenses="other"
                                                 autocorrect="off" value="0">
                                             </span>
                                         </label>
                                     </div>
                                 </form>
-                                <div class="aid-form_summary">
-                                    <div class="content__line
-                                    aid-form_equals-line"></div>
-                                    <div class="line-item line-item__total">
-                                        <div class="line-item_title">
+                                <div class="aid-form__summary">
+                                    <div class="content--line
+                                    aid-form__equals-line"></div>
+                                    <div class="line-item line-item--total">
+                                        <div class="line-item__title">
                                             Total left at the end of the month
                                         </div>
-                                        <div class="line-item_value">
-                                            <span class="line-item_amount"
+                                        <div class="line-item__value">
+                                            <span class="line-item__amount"
                                             data-currency="true"
                                             data-line-item="true"
                                             data-expenses="monthlyLeftover"
-                                            id="summary_monthly-left-over">
+                                            id="summary__monthly-left-over">
                                             </span>
                                         </div>
                                     </div>
-                                    <div class="aid-form_higher-expenses">
+                                    <div class="aid-form__higher-expenses">
                                         Your total expenses are higher than your
                                         estimated monthly salary
                                     </div>
@@ -2815,12 +2815,12 @@ <h4 class="aid-form_title">
                             </section>
                         </div>
                     </section>
-                    <section class="criteria column-well_wrapper">
-                        <h3 class="criteria_heading">
+                    <section class="criteria column-well__wrapper">
+                        <h3 class="criteria__heading">
                             What if I can’t afford my student loan payments?
                         </h3>
-                        <div class="criteria_wrapper">
-                            <div class="criteria_intro">
+                        <div class="criteria__wrapper">
+                            <div class="criteria__intro">
                                 <p>
                                     Defaulting on a loan can happen when you
                                     fail to make scheduled payments over a
@@ -2836,13 +2836,13 @@ <h3 class="criteria_heading">
                                 </p>
                             </div>
                             <section class="metric loan-default-rates
-                            column-well column-well__bleed
-                            column-well__not-stacked">
-                                <div class="column-well_content">
-                                    <h4 class="metric_heading">
+                            column-well column-well--bleed
+                            column-well--not-stacked">
+                                <div class="column-well__content">
+                                    <h4 class="metric__heading">
                                         Loan default rates
                                     </h4>
-                                    <p class="metric_explanation">
+                                    <p class="metric__explanation">
                                         Percentage of students from this
                                         <span
                                         class="content-default-program">program</span>
@@ -2855,75 +2855,75 @@ <h4 class="metric_heading">
                                     data-incoming-format="decimal-percent"
                                     data-graph-min="0"
                                     data-graph-max="0.4">
-                                        <div class="bar-graph_top-label">
+                                        <div class="bar-graph__top-label">
                                             40%
                                         </div>
-                                        <div class="bar-graph_bar"></div>
-                                        <div class="bar-graph_point
-                                        bar-graph_point__you u-clearfix">
-                                            <div class="bar-graph_label"
-                                            data-graph_label="defaultRate">
+                                        <div class="bar-graph__bar"></div>
+                                        <div class="bar-graph__point
+                                        bar-graph__point--you u-clearfix">
+                                            <div class="bar-graph__label"
+                                            data-graph__label="defaultRate">
                                                 This school
                                             </div>
-                                            <div class="bar-graph_line"></div>
-                                            <div class="bar-graph_value">
-                                                <div data-bar-graph_number="you" class="bar-graph_number"></div>
+                                            <div class="bar-graph__line"></div>
+                                            <div class="bar-graph__value">
+                                                <div data-bar-graph__number="you" class="bar-graph__number"></div>
                                             </div>
                                         </div>
-                                        <div class="bar-graph_point
-                                        bar-graph_point__average u-clearfix">
-                                            <div class="bar-graph_label">
+                                        <div class="bar-graph__point
+                                        bar-graph__point--average u-clearfix">
+                                            <div class="bar-graph__label">
                                                 National average
                                             </div>
-                                            <div class="bar-graph_line"></div>
-                                            <div class="bar-graph_value">
-                                                <div data-bar-graph_number="average" class="bar-graph_number"></div>
+                                            <div class="bar-graph__line"></div>
+                                            <div class="bar-graph__value">
+                                                <div data-bar-graph__number="average" class="bar-graph__number"></div>
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="metric_notification"
+                                    <div class="metric__notification"
                                     data-better-direction="lower">
-                                        <p class="cf-notification_text
-                                        metric_notification_text__better">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-better">
                                             Lower default rate than national
                                             average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__same">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-same">
                                             The same default rate as
                                             national average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__worse">
-                                            <span class="cf-notification_icon
-                                                         cf-notification_icon__error">
-                                                {{ svg_icon('error-round') }}
+                                        <p class="cf-notification__text
+                                        metric__notification-text-worse">
+                                            <span class="cf-notification__icon
+                                                         cf-notification__icon--error">
+                                                {{ svg__icon('error-round') }}
                                             </span>
                                             Higher default rate than national
                                             average
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-you">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-you">
                                             We currently don’t have data to
                                             display for your school
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-average">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-average">
                                             We currently don’t have national
                                             average data to display
                                         </p>
-                                        <p class="cf-notification_text
-                                        metric_notification_text__no-data">
+                                        <p class="cf-notification__text
+                                        metric__notification-text-no-data">
                                             We currently don’t have data to
                                             display
                                         </p>
                                     </div>
-                                    <div class="metric_link">
+                                    <div class="metric__link">
                                         <p>
                                             <a
                                             href="https://nces.ed.gov/collegenavigator/"
                                             class="loan-default-link"
-                                            target="_blank" rel="noopener noreferrer">See
+                                            target="__blank" rel="noopener noreferrer">See
                                             the loan default rates for the
                                             entire school</a>
                                         </p>
@@ -2935,42 +2935,42 @@ <h4 class="metric_heading">
                 </div>
             </section>
             <section class="question step">
-                <div class="content__wrapper">
-                    <div class="content__main">
-                        <div class="question_wrapper">
-                            <div class="question_content">
-                                <h2 class="step_heading step_settlement">
+                <div class="content--wrapper">
+                    <div class="content--main">
+                        <div class="question__wrapper">
+                            <div class="question__content">
+                                <h2 class="step__heading step__settlement">
                                     It's estimated you'll owe <span
                                     data-financial="loanLifetime">[XX]</span>
-                                    to complete this program in {{program.program_name}} at
-                                    {{school_primary_alias}}. Do you better
+                                    to complete this program in {{program.program__name}} at
+                                    {{school__primary__alias}}. Do you better
                                     understand how this may impact your future
                                     finances?
                                 </h2>
-                                <h2 class="step_heading step_nonsettlement">
+                                <h2 class="step__heading step__nonsettlement">
                                     Do you feel like going into <span
                                     data-financial="loanLifetime">[XX]</span>
                                     of debt to attend this school is a good
                                     investment in your future?
                                 </h2>
-                                <div class="question_answers m-btn-group">
+                                <div class="question__answers m-btn-group">
                                     <button class="a-btn"
-                                    id="question_answer-no"
-                                    name="question_answer-no"
+                                    id="question__answer-no"
+                                    name="question__answer-no"
                                     type="button">
                                         No
                                     </button>
                                     <button class="a-btn"
-                                    id="question_answer-yes"
-                                    name="question_answer-yes"
+                                    id="question__answer-yes"
+                                    name="question__answer-yes"
                                     type="button">
                                         Yes
                                     </button>
                                     <button class="a-btn"
-                                    id="question_answer-not-sure"
-                                    name="question_answer-not-sure"
+                                    id="question__answer-not-sure"
+                                    name="question__answer-not-sure"
                                     type="button"
-                                    data-gtm_ignore="true">
+                                    data-gtm__ignore="true">
                                         Not sure
                                     </button>
                                 </div>
@@ -2985,26 +2985,26 @@ <h2 class="step_heading step_nonsettlement">
                     </div>
                 </div>
             </section>
-            <section class="get-options step content__wrapper
-            column-well_wrapper">
-                <div class="content__main">
-                    <div class="get-options_wrapper">
-                        <div class="get-options_intro followup__no-not-sure">
-                            <h2 class="step_heading">
+            <section class="get-options step content--wrapper
+            column-well__wrapper">
+                <div class="content--main">
+                    <div class="get-options__wrapper">
+                        <div class="get-options__intro followup--no-not-sure">
+                            <h2 class="step__heading">
                                 Step 3: Consider your options
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 If you are interested in lowering your amount of
                                 debt, there are things you can do. Here are some
                                 choices you can make that may help you improve
                                 your financial future.
                             </p>
                         </div>
-                        <div class="get-options_intro followup__yes">
-                            <h2 class="step_heading">
+                        <div class="get-options__intro followup--yes">
+                            <h2 class="step__heading">
                                 Step 3: A few more things to consider
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 It’s important to feel confident in the
                                 financial decisions you are making. Here are
                                 some additional choices you can make that may
@@ -3012,30 +3012,30 @@ <h2 class="step_heading">
                                 more.
                             </p>
                         </div>
-                        <div class="get-options_intro followup__settlement
-                        step_settlement">
-                            <h2 class="step_heading">
+                        <div class="get-options__intro followup--settlement
+                        step__settlement">
+                            <h2 class="step__heading">
                                 Step 3: Consider your options
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 If you are interested in lowering your amount of
                                 debt, there are things you can do.
                             </p>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 Here are some choices you can make that may help
                                 you improve your financial future.
                             </p>
                         </div>
                     </div>
-                    <div class="get-options_wrapper">
-                        <div class="get-options__dynamic">
-                            <section class="option option__maximize-grants">
-                                <h3 class="option_heading">
+                    <div class="get-options__wrapper">
+                        <div class="get-options--dynamic">
+                            <section class="option option--maximize-grants">
+                                <h3 class="option__heading">
                                     Maximize all available grants and scholarships.
                                 </h3>
                                 <p>
                                     Consider applying for <a href="https://studentaid.gov/understand-aid/types/grants"
-                                    target="_blank" rel="noopener noreferrer">additional
+                                    target="__blank" rel="noopener noreferrer">additional
                                     scholarships and grants</a>,
                                     which provide money you don’t have to repay.
                                     By increasing the amount of this type of
@@ -3044,21 +3044,21 @@ <h3 class="option_heading">
                                     consequently pay back.
                                 </p>
                             </section>
-                            <section class="option option__reduce-costs">
-                                <h3 class="option_heading">
+                            <section class="option option--reduce-costs">
+                                <h3 class="option__heading">
                                     Reduce your living costs.
                                 </h3>
                                 <p>
                                     Living at home or finding cheaper off-campus
                                     housing can
                                     <a href="https://studentaid.gov/resources/prepare-for-college/students/choosing-schools/consider-costs#how-can-i"
-                                    target="_blank" rel="noopener noreferrer">reduce the
+                                    target="__blank" rel="noopener noreferrer">reduce the
                                     cost of attendance</a>, meaning you can
                                     borrow less money overall.
                                 </p>
                             </section>
-                            <section class="option option__different-program">
-                                <h3 class="option_heading">
+                            <section class="option option--different-program">
+                                <h3 class="option__heading">
                                     Consider a different program with better
                                     outcomes.
                                 </h3>
@@ -3076,17 +3076,17 @@ <h3 class="option_heading">
                                     the average salaries of graduates.
                                 </p>
                             </section>
-                            <section class="option option__transfer-credits">
-                                <h3 class="option_heading">
+                            <section class="option option--transfer-credits">
+                                <h3 class="option__heading">
                                     Make sure you don’t have to take classes twice.
                                 </h3>
                                 <p>
-                                    <a href="https://consumer.ftc.gov/articles/choosing-college-questions-ask" target="_blank" rel="noopener noreferrer">Ask if
+                                    <a href="https://consumer.ftc.gov/articles/choosing-college-questions-ask" target="__blank" rel="noopener noreferrer">Ask if
                                         credits from your school transfer</a> to
                                         degrees earned at other schools.
-                                    <span id="option_completion-rate-content">
-                                    <span id="option_completion-rate" data-financial="gradRate"
-                                    data-percentage_value="true">[XX]</span>% of
+                                    <span id="option__completion-rate-content">
+                                    <span id="option__completion-rate" data-financial="gradRate"
+                                    data-percentage__value="true">[XX]</span>% of
                                     students who start at this school finish here.
                                     </span>
                                     In the case you decide to finish your
@@ -3095,8 +3095,8 @@ <h3 class="option_heading">
                                     degree will be honored at another school.
                                 </p>
                             </section>
-                            <section class="option option__explore-schools">
-                                <h3 class="option_heading">
+                            <section class="option option--explore-schools">
+                                <h3 class="option__heading">
                                     Explore other schools that have similar
                                     programs.
                                 </h3>
@@ -3107,15 +3107,15 @@ <h3 class="option_heading">
                                     your educational needs.
                                     <a href="https://collegescorecard.ed.gov/"
                                     class="scorecard-link"
-                                    target="_blank" rel="noopener noreferrer">
+                                    target="__blank" rel="noopener noreferrer">
                                         See all schools
                                     </a>
                                     that offer the same type of program in your
                                     area.
                                 </p>
                             </section>
-                            <section class="option option__work-while-studying">
-                                <h3 class="option_heading">
+                            <section class="option option--work-while-studying">
+                                <h3 class="option__heading">
                                     Think about working while you study.
                                 </h3>
                                 <p>
@@ -3128,19 +3128,19 @@ <h3 class="option_heading">
                                     long-term benefits of reducing overall debt.
                                     Check out <a
                                     href="https://www.careeronestop.org/JobSearch/job-search.aspx"
-                                    target="_blank" rel="noopener noreferrer">resources for finding a
+                                    target="__blank" rel="noopener noreferrer">resources for finding a
                                     job</a>, including links to job search
                                     sites, tips for writing a
                                     r&eacute;sum&eacute;, and more.
                                 </p>
                             </section>
                         </div>
-                        <aside class="get-options__sidebar
+                        <aside class="get-options--sidebar
                                       column-well
-                                      column-well__emphasis
-                                      content__sidebar">
-                            <div class="column-well_content">
-                                <h3 class="option__take-action-header">
+                                      column-well--emphasis
+                                      content--sidebar">
+                            <div class="column-well__content">
+                                <h3 class="option--take-action-header">
                                     What you can do
                                 </h3>
                                 <p>
@@ -3168,11 +3168,11 @@ <h4>
                                 <div>
                                     <a
                                     href="https://collegescorecard.ed.gov"
-                                    target="_blank" rel="noopener noreferrer">College
+                                    target="__blank" rel="noopener noreferrer">College
                                     Scorecard</a>
                                     <p>Compare <a class="scorecard-school"
                                         href="https://collegescorecard.ed.gov"
-                                        target="_blank" rel="noopener noreferrer">your
+                                        target="__blank" rel="noopener noreferrer">your
                                         school</a>’s annual costs,
                                         graduation rates, and post-college
                                         earnings.</p>
@@ -3180,24 +3180,24 @@ <h4>
                                 <p>
                                     <a
                                         href="https://www.consumer.ftc.gov/articles/0395-choosing-college-questions-ask"
-                                        target="_blank" rel="noopener noreferrer">Questions to ask
+                                        target="__blank" rel="noopener noreferrer">Questions to ask
                                         your college</a>
                                 </p>
                                 <div>
                                     <a href="https://studentaid.gov/h/apply-for-aid/fafsa"
-                                    target="_blank" rel="noopener noreferrer">FAFSA&reg;</a>
+                                    target="__blank" rel="noopener noreferrer">FAFSA&reg;</a>
                                     <p>Apply for federal, state, and school
                                         financial aid.</p>
                                 </div>
                                 <div>
                                     <a href="https://www.consumerfinance.gov/paying-for-college/choose-a-student-loan/"
-                                    target="_blank" rel="noopener noreferrer">Student
+                                    target="__blank" rel="noopener noreferrer">Student
                                     loan guide</a>
                                     <p>Choose a student loan that’s right
                                         for you.</p>
                                 </div>
                                 <div>
-                                    <a href="https://www.consumerfinance.gov/paying-for-college/manage-your-college-money/" target="_blank" rel="noopener noreferrer">Student banking guide</a>
+                                    <a href="https://www.consumerfinance.gov/paying-for-college/manage-your-college-money/" target="__blank" rel="noopener noreferrer">Student banking guide</a>
                                     <p>Manage your college money.</p>
                                 </div>
                             </div>
@@ -3205,24 +3205,24 @@ <h4>
                     </div>
                 </div>
             </section>
-            <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">
+            <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">
                                 Next steps
                             </h2>
-                            <p class="step_intro">
+                            <p class="step__intro">
                                 We have notified your school that you have
                                 reviewed your personalized offer. You can now
                                 move forward in the enrollment process.
                             </p>
                         </div>
                     </div>
-                    <ol class="super-numerals next-steps_list">
-                        <li class="super-numerals next-steps_list-item">
-                            <p class="next-steps_list-intro">
+                    <ol class="super-numerals next-steps__list">
+                        <li class="super-numerals next-steps__list-item">
+                            <p class="next-steps__list-intro">
                                 Review any changes you made to your offer. If
                                 you decide to move forward using any adjusted
                                 amount of aid, you need to contact your
@@ -3242,8 +3242,8 @@ <h2 class="step_heading">
                                 updated.
                             </p>
                         </li>
-                        <li class="super-numerals next-steps_list-item">
-                            <p class="next-steps_list-intro">
+                        <li class="super-numerals next-steps__list-item">
+                            <p class="next-steps__list-intro">
                                 Keep a copy of this personalized aid
                                 information.
                             </p>
@@ -3252,12 +3252,12 @@ <h2 class="step_heading">
                                 in this tool or save it as a PDF. Use this as a
                                 reference while talking with your school.
                             </p>
-                            <div class="next-steps_controls">
-                                <button class="a-btn a-btn__full-on-xs"
+                            <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">
-                                        {{ svg_icon('print') }}
+                                data-gtm__ignore="true">
+                                    <span class="a-btn--icon--on-left">
+                                        {{ svg__icon('print') }}
                                     </span>
                                     Print
                                 </button>
@@ -3268,11 +3268,11 @@ <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">
-                    <div class="instructions_wrapper">
-                        <div class="instructions_content
-                        instructions_content__wrong">
+            <section class="instructions step content--wrapper">
+                <div class="content--main">
+                    <div class="instructions__wrapper">
+                        <div class="instructions__content
+                        instructions__content--wrong">
                             <p>
                                 If the information provided is not correct,
                                 please contact your school and ask them to fix
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 e3f45ad305f..8fec572545b 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
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content_main %}
-    <section class="block block__flush-top">
+    <section class="block block--flush-top">
         <h1>
             About the &ldquo;Understanding Your Financial
             Aid Offer&rdquo; tool
@@ -994,7 +994,7 @@ <h2>
 {% endblock %}
 
 {% block content_sidebar scoped -%}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h2>
             Useful resources for new college students
         </h2>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
index c4dc839ceb6..41ece27e194 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
@@ -80,7 +80,7 @@ <h1>{{ product.name }}</h1>
         <div class="block">
             <h2 class="h3">Download most recent agreement files</h2>
             {% set agreement = agreements | first  %}
-            <div class="block block__sub block__flush-bottom block__flush-top">
+            <div class="block block--sub block--flush-bottom block--flush-top">
                 <p>Agreement effective date: {{ agreement.effective_date }}</p>
                 <p class="u-break-word">
                     <a href="{{ agreement.compressed_files_url }}">
@@ -94,7 +94,7 @@ <h2 class="h3">Download most recent agreement files</h2>
         <div class="block">
             <h2 class="h3">Download older agreements</h2>
             {% for agreement in agreements[1:] %}
-                <div class="block block__sub block__flush-bottom {{ 'block__flush-top' if loop.index == 1 else '' }}">
+                <div class="block block--sub block--flush-bottom {{ 'block--flush-top' if loop.index == 1 else '' }}">
                     <p>Agreement effective date: {{ agreement.effective_date }}</p>
                     <p class="u-break-word">
                         <a href="{{ agreement.compressed_files_url }}">
@@ -113,7 +113,7 @@ <h2 class="h3">Download older agreements</h2>
 
 {% block content_sidebar scoped -%}
     {% if support_text %}
-        <div class="block block__flush-top">
+        <div class="block block--flush-top">
             <header class="m-slug-header">
             <h2 class="m-slug-header__heading">
                 {{ support_text.sidefoot_heading | safe }}
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
index 522a5927e65..e2e19cb9a3b 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
@@ -24,12 +24,12 @@
 {# BODY items #}
 
 {% block content_main_modifiers -%}
-    content__1-3 prepaid-agreements prepaid-agreements-search
+    content--1-3 prepaid-agreements prepaid-agreements-search
 {%- endblock %}
 
 {% block content_main scoped %}
-    <div class="search_form">
-        <div class="block block__sub search_intro">
+    <div class="search__form">
+        <div class="block block--sub search__intro">
             <h1>Prepaid product agreements database</h1>
             <div class="lead-paragraph u-readable-width">
                 Find prepaid product agreements by issuer name, product name, prepaid product type, and other criteria. All data is refreshed nightly.
@@ -40,10 +40,10 @@ <h1>Prepaid product agreements database</h1>
             <p>Note that we are unable to do a full-text search of agreement files.</p>
         </div>
 
-        <div class="search_wrapper block block__sub">
+        <div class="search_wrapper block block--sub">
             <form class="u-mt15" method="get" action="." >
                 <h3 class="h4 u-mb5">Search within</h3>
-                <div class="layout-row block block__sub block__flush-top">
+                <div class="layout-row block block--sub block--flush-top">
                     <div class="a-select flex-fixed">
                         {% set opts = [
                             ('All fields', 'all'),
@@ -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>
@@ -79,7 +79,7 @@ <h3 class="h4 u-mb5">Search within</h3>
                                    placeholder="Enter search term"
                                    value="{{ query }}"
                                    aria-label="The term to search for">
-                            <a class="a-btn a-btn__link" href="{{ remove_url_parameter(request, { 'q': [query] }) }}">{{ svg_icon('error') }} Clear</a>
+                            <a class="a-btn a-btn--link" href="{{ remove_url_parameter(request, { 'q': [query] }) }}">{{ svg_icon('error') }} Clear</a>
                         </div>
                     </div>
                     <button class="a-btn flex-fixed">Search</button>
@@ -88,7 +88,7 @@ <h3 class="h4 u-mb5">Search within</h3>
         </div>
     </div>
 
-    <div class="block block__flush-top search_results">
+    <div class="block block--flush-top search_results">
         {% include 'search_results.html' %}
     </div>
 {% endblock %}
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
index 197d6301f8d..51b7347946d 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
@@ -18,7 +18,7 @@ <h3>Narrow results by...</h3>
 
         <div class="m-form-field u-mb15">
             {% set selections = filters['issuer_name'] %}
-            <label class="a-label a-label__heading"
+            <label class="a-label a-label--heading"
                    for="issuer_name">
                 Issuer name
             </label>
@@ -43,7 +43,7 @@ <h3>Narrow results by...</h3>
             {% call() expandable(expandable_settings) %}
              <div class="o-form__group">
                 <fieldset class="o-form__fieldset">
-                    <ul class="m-list m-list__unstyled">
+                    <ul class="m-list m-list--unstyled">
                         {% for type in active_filters['prepaid_type'] %}
                             {% if type != None %}
                                 <li>
@@ -74,7 +74,7 @@ <h3>Narrow results by...</h3>
 
              <div class="o-form__group">
                 <fieldset class="o-form__fieldset">
-                    <ul class="m-list m-list__unstyled">
+                    <ul class="m-list m-list--unstyled">
                         {% for option in active_filters['status'] %}
                         <li>
                             {{ checkbox.render({
@@ -97,9 +97,9 @@ <h3>Narrow results by...</h3>
 </aside>
 
 <div class="content__main content__flush-all-on-small content__flush-bottom">
-    <div class="results_header">
+    <div class="results__header">
         {% if current_count and current_count > 0  %}
-            <div class="results_count">
+            <div class="results__count">
                 <h3>Showing
                     {% if total_count > current_count  %}
                          {{ current_count }}
@@ -110,7 +110,7 @@ <h3>Showing
                 </h3>
             </div>
         {% else %}
-            <div class="results_count no-results" data-results-count="0">
+            <div class="results__count no-results" data-results-count="0">
                 <h3>No results match your search.</h3>
                 <p>Try adjusting your filters or searching for different terms.</p>
             </div>
@@ -119,11 +119,11 @@ <h3>No results match your search.</h3>
 
     {% if filters | length %}
 
-        <div class="filters_applied">
-            <span class="filters_applied-label">
+        <div class="filters__applied">
+            <span class="filters__applied-label">
                 Filters applied:
             </span>
-            <div class="filters_tags">
+            <div class="filters__tags">
                 {% set filters_to_remove = [] %}
                 {% for filter in filters %}
                     {% if filter in valid_filters %}
@@ -141,20 +141,20 @@ <h3>No results match your search.</h3>
             </div>
 
             {% set clear_url = remove_url_parameter(request, filters) %}
-            <a class="a-btn a-btn__link a-btn__warning results_filters-clear u-mb10"
+            <a class="a-btn a-btn--link a-btn--warning results__filters-clear u-mb10"
                     data-js-hook="behavior_clear-all" href="{{ clear_url if clear_url else '.' }}">
                 Clear all filters
             </a>
         </div>
     {% endif %}
 
-    <div class="results_list">
+    <div class="results__list">
         {% for result in results %}
             {{ search_item.render( result ) }}
         {% endfor %}
     </div>
 
-    <div class="results_paginator">
+    <div class="results__paginator">
         {% if paginator.num_pages > 1 %}
             <div class="block block--flush-top">
                 {{ pagination.render( paginator.num_pages, current_page, '', '' ) }}
diff --git a/cfgov/privacy/jinja2/privacy/_sidebar.html b/cfgov/privacy/jinja2/privacy/_sidebar.html
index c1c36fe284e..1d6add630ef 100644
--- a/cfgov/privacy/jinja2/privacy/_sidebar.html
+++ b/cfgov/privacy/jinja2/privacy/_sidebar.html
@@ -3,7 +3,7 @@ <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.
     </p>
-    <a class="a-btn a-btn__link"
+    <a class="a-btn a-btn--link"
        href="/about-us/the-bureau/"
        rel="noopener noreferrer"
        target="_blank">
diff --git a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
index cbbf5d27501..a837b2b3c88 100644
--- a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
+++ b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
@@ -40,7 +40,7 @@
 	    {% endfor %}
 	</div>
     {% endif %}
-    <div class="block block__flush-top block__flush-bottom">
+    <div class="block block--flush-top block--flush-bottom">
         <h1>Consent for disclosure of records protected under the Privacy Act</h1>
         <div class="lead-paragraph">
             <p>This form may be used to provide consent and authorize the CFPB to disclose your records to another person or entity. Please provide the information requested below and submit.</p>
@@ -69,9 +69,9 @@ <h3>For requests by parent or legal guardian</h3>
         <p>The term guardian means the legal guardian of any individual who has been declared to be incompetent due to physical or mental incapacity or age by a court of competent jurisdiction.</p>
         <h2>Information required to locate the records</h2>
         <p>This information is required for the CFPB to be able to match the individual's information provided in this request with the record that pertains to that individual.</p>
-        <p><a class="a-btn a-btn__link" href="/privacy/system-records-notices/">See list of CFPB System of Records Notices (SORNs)</a></p>
+        <p><a class="a-btn a-btn--link" href="/privacy/system-records-notices/">See list of CFPB System of Records Notices (SORNs)</a></p>
     </div>
-    <div class="block block__flush-top block__padded-top">
+    <div class="block block--flush-top block--padded-top">
         <form id="privacy-form"
               action="{{ url('privacy:disclosure_consent') }}"
               enctype="multipart/form-data"
@@ -79,7 +79,7 @@ <h2>Information required to locate the records</h2>
             <div class="o-well">
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.description.id_for_label }}">
                             {{ form.description.label }}
                         </label>
@@ -90,7 +90,7 @@ <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="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -99,7 +99,7 @@ <h3>Additional information that might assist in locating the records</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -109,7 +109,7 @@ <h3>Additional information that might assist in locating the records</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -125,7 +125,7 @@ <h2>Contact information</h2>
                 <h3>Requestor contact information</h3>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.requestor_name.id_for_label }}">
                             {{ form.requestor_name.label }}
                         </label>
@@ -134,7 +134,7 @@ <h3>Requestor contact information</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.requestor_email.id_for_label }}">
                             {{ form.requestor_email.label }}
                         </label>
@@ -147,7 +147,7 @@ <h3>Requestor contact information</h3>
                 <h3 class="u-mt45">Recepient contact information</h3>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.recipient_name.id_for_label }}">
                             {{ form.recipient_name.label }}
                         </label>
@@ -156,7 +156,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.recipient_email.id_for_label }}">
                             {{ form.recipient_email.label }}
                         </label>
@@ -180,7 +180,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                   {% endif %}
                   {% for choice in form.contact_channel %}
                     {% set value = choice.data['value'] %}
-                    <div class="m-form-field m-form-field__radio">
+                    <div class="m-form-field m-form-field--radio">
                       <input class="a-radio" {%if choice.data['value'] == selected %}checked {% endif %} value={{ value }} name="contact_channel" type="radio" id="{{choice.id_for_label}}">
                         <label class="a-label" for="{{choice.id_for_label}}">{{choice.choice_label}}</label>
                     </div>
@@ -190,7 +190,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                   <p>If you would like to receive your records by mail, please provide your mailing address.</p>
                   <div class="o-form__group">
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.street_address.id_for_label }}">
                               {{ form.street_address.label }}
                           </label>
@@ -199,21 +199,21 @@ <h3 class="u-mt45">Recepient contact information</h3>
                   </div>
                   <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.city.id_for_label }}">
                               {{ form.city.label }}
                           </label>
                           {{ form.city }}
                       </div>
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.state.id_for_label }}">
                               {{ form.state.label }}
                           </label>
                           {{ form.state }}
                       </div>
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.zip_code.id_for_label }}">
                               {{ form.zip_code.label }}
                           </label>
@@ -259,7 +259,7 @@ <h4>Files added:</h4>
             <h2>Consent for disclosure of records</h2>
             <div class="o-well">
                 <div class="o-form__group">
-                    <div class="m-form-field m-form-field__checkbox">
+                    <div class="m-form-field m-form-field--checkbox">
                         {{ form.consent }}
                         <label class="a-label"
                                for="{{ form.consent.id_for_label }}">
@@ -269,7 +269,7 @@ <h2>Consent for disclosure of records</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.full_name.id_for_label }}">
                             {{ form.full_name.label }}
                         </label>
@@ -287,7 +287,7 @@ <h2>Consent for disclosure of records</h2>
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
-                    <a class="a-btn a-btn__link"
+                    <a class="a-btn a-btn--link"
                        href="/privacy/records-disclosure-privacy-act-statement/"
                        rel="noopener noreferrer"
                        target="_blank">
diff --git a/cfgov/privacy/jinja2/privacy/form-submitted.html b/cfgov/privacy/jinja2/privacy/form-submitted.html
index b5bb9132deb..ab2f29e696f 100644
--- a/cfgov/privacy/jinja2/privacy/form-submitted.html
+++ b/cfgov/privacy/jinja2/privacy/form-submitted.html
@@ -18,8 +18,8 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
-        <div class="m-notification m-notification__visible m-notification__success">
+    <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">
@@ -28,7 +28,7 @@
                 <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>
+                    <a class="a-btn a-btn--link href="mailto:FOIA@consumerfinance.gov">FOIA@consumerfinance.gov</a>
                 </p>
             </div>
         </div>
diff --git a/cfgov/privacy/jinja2/privacy/privacy-styles.html b/cfgov/privacy/jinja2/privacy/privacy-styles.html
index 3e8a44c673e..bf33ba5c890 100644
--- a/cfgov/privacy/jinja2/privacy/privacy-styles.html
+++ b/cfgov/privacy/jinja2/privacy/privacy-styles.html
@@ -15,10 +15,10 @@
     .m-form-grid input {
       width: 100%;
     }
-    .m-form-field__radio {
+    .m-form-field--radio {
       margin-bottom: 0.5em;
     }
-    .m-form-field__checkbox span {
+    .m-form-field--checkbox span {
       margin-left: 5px;
     }
     #mail-target {
diff --git a/cfgov/privacy/jinja2/privacy/records-access-form.html b/cfgov/privacy/jinja2/privacy/records-access-form.html
index 838fd2351ed..26a3da25508 100644
--- a/cfgov/privacy/jinja2/privacy/records-access-form.html
+++ b/cfgov/privacy/jinja2/privacy/records-access-form.html
@@ -40,7 +40,7 @@
             {% endfor %}
         </div>
     {% endif %}
-    <div class="block block__flush-top block__flush-bottom">
+    <div class="block block--flush-top block--flush-bottom">
         <h1>Request for individual access to records protected under the Privacy Act</h1>
         <div class="lead-paragraph">
             <p>This form may be used to seek access to your records pursuant to the Privacy Act. Please provide the information requested below and submit.</p>
@@ -69,9 +69,9 @@ <h3>For requests by parent or legal guardian</h3>
         <p>The term guardian means the legal guardian of any individual who has been declared to be incompetent due to physical or mental incapacity or age by a court of competent jurisdiction.</p>
         <h2>Additional information required to locate the records</h2>
         <p>This information is required for the CFPB to be able to match the individual's information provided in this request with the records that pertain to that individual.</p>
-        <p><a class="a-btn a-btn__link" href="/privacy/system-records-notices/">See list of CFPB System of Records Notices (SORNs)</a></p>
+        <p><a class="a-btn a-btn--link" href="/privacy/system-records-notices/">See list of CFPB System of Records Notices (SORNs)</a></p>
     </div>
-    <div class="block block__flush-top block__padded-top">
+    <div class="block block--flush-top block--padded-top">
         <form id="privacy-form"
               action="{{ url('privacy:records_access') }}"
               enctype="multipart/form-data"
@@ -79,7 +79,7 @@ <h2>Additional information required to locate the records</h2>
             <div class="o-well">
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.description.id_for_label }}">
                             {{ form.description.label }}
                         </label>
@@ -90,7 +90,7 @@ <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="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -99,7 +99,7 @@ <h3>Additional information that might assist in locating the records</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -109,7 +109,7 @@ <h3>Additional information that might assist in locating the records</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <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>
                         </label>
@@ -125,7 +125,7 @@ <h2>Contact information</h2>
                 <h3>Requestor contact information</h3>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.requestor_name.id_for_label }}">
                             {{ form.requestor_name.label }}
                         </label>
@@ -134,7 +134,7 @@ <h3>Requestor contact information</h3>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.requestor_email.id_for_label }}">
                             {{ form.requestor_email.label }}
                         </label>
@@ -154,7 +154,7 @@ <h3>Requestor contact information</h3>
                   {% endif %}
                   {% for choice in form.contact_channel %}
                     {% set value = choice.data['value'] %}
-                    <div class="m-form-field m-form-field__radio">
+                    <div class="m-form-field m-form-field--radio">
                       <input class="a-radio" {%if choice.data['value'] == selected %}checked {% endif %} value={{ value }} name="contact_channel" type="radio" id="{{choice.id_for_label}}">
                         <label class="a-label" for="{{choice.id_for_label}}">{{choice.choice_label}}</label>
                      </div>
@@ -164,7 +164,7 @@ <h3>Requestor contact information</h3>
                   <p>If you would prefer to receive your records by mail, please provide your mailing address.</p>
                   <div class="o-form__group">
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.street_address.id_for_label }}">
                               {{ form.street_address.label }}
                           </label>
@@ -173,21 +173,21 @@ <h3>Requestor contact information</h3>
                   </div>
                   <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.city.id_for_label }}">
                               {{ form.city.label }}
                           </label>
                           {{ form.city }}
                       </div>
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.state.id_for_label }}">
                               {{ form.state.label }}
                           </label>
                           {{ form.state }}
                       </div>
                       <div class="m-form-field">
-                          <label class="a-label a-label__heading"
+                          <label class="a-label a-label--heading"
                                  for="{{ form.zip_code.id_for_label }}">
                               {{ form.zip_code.label }}
                           </label>
@@ -232,7 +232,7 @@ <h4>Files added:</h4>
             <h2>Consent for release of records</h2>
             <div class="o-well">
                 <div class="o-form__group">
-                    <div class="m-form-field m-form-field__checkbox">
+                    <div class="m-form-field m-form-field--checkbox">
                         {{ form.consent }}
                         <label class="a-label"
                                for="{{ form.consent.id_for_label }}">
@@ -242,7 +242,7 @@ <h2>Consent for release of records</h2>
                 </div>
                 <div class="o-form__group">
                     <div class="m-form-field">
-                        <label class="a-label a-label__heading"
+                        <label class="a-label a-label--heading"
                                for="{{ form.full_name.id_for_label }}">
                             {{ form.full_name.label }}
                         </label>
@@ -260,7 +260,7 @@ <h2>Consent for release of records</h2>
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
-                    <a class="a-btn a-btn__link"
+                    <a class="a-btn a-btn--link"
                        href="/privacy/records-disclosure-privacy-act-statement/"
                        rel="noopener noreferrer"
                        target="_blank">
diff --git a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
index d93520e890d..29532541592 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
@@ -112,8 +112,8 @@ <h1>{{section.title}}</h1>
             {% else %}
                 <div class="m-full-width-text
                             m-notification
-                            m-notification__visible
-                            m-notification__warning">
+                            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>
@@ -135,7 +135,7 @@ <h1>{{section.title}}</h1>
             <div class="a-rule-break m-full-width-text"></div>
         {% endif %}
 
-        <section class="block block__flush-top">
+        <section class="block block--flush-top">
             <div class="o-regulations-wayfinder" aria-hidden="true" data-section="{{section.title}}">
                 <div class="o-regulations-wayfinder_wrapper">
                     <div class="o-regulations-wayfinder_sidebar">
@@ -143,9 +143,9 @@ <h1>{{section.title}}</h1>
                             {{ regulation.short_name }}
                         </span>
                     </div>
-                    <div class="o-regulations-wayfinder_content">
-                        <a href="#" class="h4 o-regulations-wayfinder_link">
-                            <span class="o-regulations-wayfinder_section-title"></span><span class="o-regulations-wayfinder_marker"></span>
+                    <div class="o-regulations-wayfinder__content">
+                        <a href="#" class="h4 o-regulations-wayfinder__link">
+                            <span class="o-regulations-wayfinder__section-title"></span><span class="o-regulations-wayfinder__marker"></span>
                         </a>
                         <div class="o-regulations-wayfinder_version">
                             {% if requested_version.effective_date < current_version.effective_date %}
@@ -192,7 +192,7 @@ <h3>All versions of {{ page.regulation }}</h3>
         </ul>
 
     {% else %}
-        <div class="block block__flush-top block__flush-bottom">
+        <div class="block block--flush-top block--flush-bottom">
             <h1>{{ page.title }}</h1>
             {% if requested_version == current_version %}
                 <div class="regulation-meta">
@@ -207,13 +207,13 @@ <h1>{{ page.title }}</h1>
             {{ render_block.render(block, loop.index) }}
         {%- endfor %}
 
-        <div class="block block__flush-bottom block__flush-regs3k">
+        <div class="block block--flush-bottom block--flush-regs3k">
             {% if requested_version != current_version %}
-            <div class="block block__sub">
+            <div class="block block--sub">
                 <div class="m-full-width-text
                             m-notification
-                            m-notification__visible
-                            m-notification__warning">
+                            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>
@@ -230,7 +230,7 @@ <h1>{{ page.title }}</h1>
             </div>
             {% endif %}
 
-            <div class="block block__sub">
+            <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">
@@ -274,7 +274,7 @@ <h1>{{ page.title }}</h1>
     {% endif %}
 
     {% if section %}
-        <div class="block block__sub">
+        <div class="block block--sub">
             <nav class="section-nav" role="navigation">
                 <ul>
                     {% if previous_section %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
index dd38c43bf4c..d804de9ccc0 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
@@ -2,8 +2,8 @@
 {%- set interp_location = 'Appendix A' if regulation and regulation.part_number == '1004' else 'Supplement I' -%}
 
 <div class="o-expandable
-            o-expandable__background
-            o-expandable__border
+            o-expandable--background
+            o-expandable--border
             inline-interpretation">
 
     <button class="o-expandable__header"{% if section_title %} data-section="{{ section_title }}"{% endif %}>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
index 1cbd03a7333..a5c2309e2dc 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
@@ -4,7 +4,7 @@
     <h2 class="h4">
         Search term
     </h2>
-    <div class="o-form__input-w-btn">
+    <div class="o-form--input-w-btn">
         {% if hidden_fields | length > 0 %}
             <div id="regs3k-hidden-filters">
             {% for field in hidden_fields %}
@@ -16,7 +16,7 @@ <h2 class="h4">
         {% endif %}
         <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>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
index db204d392ac..4e4b6f9ea4f 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
@@ -46,8 +46,8 @@
 
 {% 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 '' }}"
+          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 3da15231cc4..237550fa850 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
@@ -8,7 +8,7 @@
 {%- endblock %}
 
 {% block content scoped %}
-    <main class="u-layout-grid u-layout-grid__1-3
+    <main class="u-layout-grid u-layout-grid--1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
         <div class="u-layout-grid__wrapper">
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations-results.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations-results.html
index abdfc5e37eb..708c4184ba3 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations-results.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations-results.html
@@ -2,9 +2,9 @@
 {% import 'regulations3k/regulations3k-search-result-item.html' as search_item %}
 {% import 'v1/includes/molecules/pagination.html' as pagination with context %}
 
-<div class="results_header">
+<div class="results__header">
     {% if current_count and current_count > 0 %}
-    <div class="results_count">
+    <div class="results__count">
         <h2 class="h3">
             Showing {{ current_count }}
             match{% if current_count > 1 %}es{% endif %}
@@ -14,17 +14,17 @@ <h2 class="h3">
         </h2>
     </div>
     {% else %}
-    <div class="results_count no-results">
+    <div class="results__count no-results">
         <h2 class="h3">No results match your filters.</h2>
         <p>Try adjusting your filters or searching for different terms.</p>
     </div>
     {% endif %}
     {% if show_filters %}
-    <div class="filters_applied">
-        <span class="filters_applied-label">
+    <div class="filters__applied">
+        <span class="filters__applied-label">
             Filters applied:
         </span>
-        <div class="filters_tags">
+        <div class="filters__tags">
             {% for reg in page.results.all_regs %}
                 {% if reg.selected %}
                     {%- set reg_name = '(' ~ reg.short_name | regs_hide_on_mobile ~ ')' -%}
@@ -36,7 +36,7 @@ <h2 class="h3">No results match your filters.</h2>
                 {% endif %}
             {% endfor %}
         </div>
-        <button class="a-btn a-btn__link a-btn__warning filters_clear"
+        <button class="a-btn a-btn--link a-btn--warning filters__clear"
                 data-js-hook="behavior_clear-all">
             Clear all filters
         </button>
@@ -44,12 +44,12 @@ <h2 class="h3">No results match your filters.</h2>
     {% endif %}
 </div>
 {% if current_count %}
-<div class="results_list">
+<div class="results__list">
     {% for result in results %}
         {{ search_item.render( result ) }}
     {% endfor %}
 </div>
-<div class="results_paginator">
+<div class="results__paginator">
     {{ pagination.render( paginator.num_pages, current_page, '', '' ) }}
 </div>
 {% endif %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
index ecec200bd20..50bd1f2ffaf 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
@@ -47,7 +47,7 @@
 
 {% block content_main scoped %}
 
-<div class="block block__flush-top block__flush-bottom search_form">
+<div class="block block--flush-top block--flush-bottom search__form">
     <h1>
         Search regulations
     </h1>
@@ -65,7 +65,7 @@ <h1>
 </div>
 {% if page.results.search_query %}
 <div class="search_results">
-    <div class="block block__flush-top content content__1-3">
+    <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">
             <h3>Refine results</h3>
             <form action="." method="get" data-js-hook="behavior_change-filter">
@@ -81,7 +81,7 @@ <h3>Refine results</h3>
                         <input type="hidden" name="q" value="{{ page.results.search_query }}">
                         {% endif %}
                         <p> </p>
-                        <ul class="m-list m-list__unstyled">
+                        <ul class="m-list m-list--unstyled">
                         {% for reg in page.results.all_regs %}
                             {%- set reg_name = '(' ~ reg.short_name | regs_hide_on_mobile ~ ')' -%}
                             <li>
@@ -177,7 +177,7 @@ <h3>Refine results</h3>
     </div>
 </div>
 {% else %}
-<div class="block block__flush-top search_results_empty">
+<div class="block block--flush-top search_results_empty">
     <p class="results_initial__all">
         Search for a term above, then filter the results to find what you’re looking for.
     </p>
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 5e161d4dc3e..e76c57e60c8 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
@@ -1,5 +1,5 @@
 <div class="m-notification
-            m-notification__error
+            m-notification--error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
     <div class="m-notification__content">
diff --git a/cfgov/retirement_api/jinja2/retirement_api/about.html b/cfgov/retirement_api/jinja2/retirement_api/about.html
index f1d221be511..838912204e9 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/about.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/about.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>
             {{ _("About this tool") }}
         </h1>
@@ -82,7 +82,7 @@ <h4>
 {% endblock %}
 
 {% block content_sidebar %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h2>
             my Social Security
         </h2>
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
index b226194eed5..32a5feffbda 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
@@ -385,7 +385,7 @@
 
 {% block next_step_one %}
 Crear un
-<a class="a-link a-link__icon" href="https://www.ssa.gov/myaccount/" rel="noopener noreferrer" target="_blank">
+<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>
 </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 435f64ea837..2a5da51bf3b 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
@@ -24,7 +24,7 @@
 {% set STEP = _("Step") %}
 
 <div id="claiming-social-security" class="claiming-social-security">
-    <div class="intro block block__flush-top">
+    <div class="intro block block--flush-top">
         <div class="content-l">
             <div class="content-l__col content-l__col-2-3">
                 <h1>{{ _("Planning your Social Security claiming age") }}</h1>
@@ -69,14 +69,14 @@ <h1>{{ _("Planning your Social Security claiming age") }}</h1>
     {% include "_templates/no_js.html" %}
     <div class="step-one
               block
-              block__padded-top
-              block__border-top
+              block--padded-top
+              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">
                     <p class="h3 step-one-instructions">{{ _("Enter your information below to calculate your estimated benefits.") }}</p>
-                    <div class="m-notification m-notification__warning">
+                    <div class="m-notification m-notification--warning">
                         {{ svg_icon('warning-round') }}
                         <div class="m-notification__content">
                             <div class="m-notification__message">Error message.</div>
@@ -97,7 +97,7 @@ <h2 class="content-l__col content-l__col-2-3"><strong>{{STEP}} 1: </strong>{{ _(
                         </div>
                         <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
+                                <span class="input-labels__block">{{ _("Highest annual work income") }} <span
                                         data-tooltip-target="salary" aria-describedby="salary-tooltip">{{
                                         svg_icon('help-round') }}</span></span>
                                 <input id="salary-input" type="text" placeholder="$" value="" autocapitalize="none"
@@ -111,7 +111,7 @@ <h2 class="content-l__col content-l__col-2-3"><strong>{{STEP}} 1: </strong>{{ _(
                             <button
                                 type="submit"
                                 id="get-your-estimates"
-                                class="get-your-estimates a-btn a-btn__disabled"
+                                class="get-your-estimates a-btn a-btn--disabled"
                                 disabled>
                                 {{ _("Get your estimates") }}
                                 <span id="api-data-loading-indicator">
@@ -226,9 +226,9 @@ <h3 class="retirement-age">{{ _("About your early benefit claiming age:") }}</h3
                 </div>
                 <div id="full-age-benefits-text" class="h3">
                 </div>
-                <div class="graph_slider">
-                    <label for="graph_slider-input" class="u-visually-hidden">Select a claiming age</label>
-                    <input id="graph_slider-input" class="a-range" type="range" min="62" max="70" step="1">
+                <div class="graph__slider">
+                    <label for="graph__slider-input" class="u-visually-hidden">Select a claiming age</label>
+                    <input id="graph__slider-input" class="a-range" type="range" min="62" max="70" step="1">
                 </div>
             </div>
             <p class="y-axis-label">{{ _("Estimated benefits") }}</p>
@@ -243,7 +243,7 @@ <h2><strong>{{STEP}} 2: </strong>{{ _("Learn tips specific to your situation") }
         </div>
         <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">
+            <div class="lifestyle-question__container">
                 <hr>
                 <h3 class="lifestyle-question">{{ _("Are you married?") }}</h3>
                 <div class="m-btn-group">
@@ -313,7 +313,7 @@ <h4>{{ _("Your claiming age matters for your own retirement benefits and your su
         </div>
         <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">
+            <div class="lifestyle-question__container">
                 <hr>
                 <h3 class="lifestyle-question">{{ _("Do you plan to continue working in your 60s?") }}</h3>
                 <div class="m-btn-group">
@@ -495,7 +495,7 @@ <h4>{{ _("Consider working extra years in your 60s for an extra boost to your in
     <div class="content-l step-two">
         <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">
+            <div class="lifestyle-question__container">
                 <hr>
                 <h3 class="lifestyle-question">{{ _("Will your expenses decrease after you retire?") }}</h3>
                 <div class="m-btn-group">
@@ -622,7 +622,7 @@ <h4>{{ _("Many people find retirement is more expensive than expected.") }}</h4>
         </div>
         <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">
+            <div class="lifestyle-question__container">
                 <hr>
                 <h3 class="lifestyle-question">{{ _("Do you expect to have additional sources of retirement income beyond Social Security?") }}</h3>
                 <div class="m-btn-group">
@@ -819,7 +819,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
         </div>
         <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">
+            <div class="lifestyle-question__container">
                 <hr>
                 <h3 class="lifestyle-question">{{ _("Do you expect to live a long life?") }}</h3>
                 <div class="m-btn-group">
diff --git a/cfgov/tccp/jinja2/tccp/card.html b/cfgov/tccp/jinja2/tccp/card.html
index abe0a2d52b1..faeee28637c 100644
--- a/cfgov/tccp/jinja2/tccp/card.html
+++ b/cfgov/tccp/jinja2/tccp/card.html
@@ -23,7 +23,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="block block__flush-top">
+<div class="block block--flush-top">
 
     <div class="eyebrow">{{ card.institution_name }}</div>
     <h1>{{ card.product_name }}</h1>
diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
index e688058e6c8..f774743ca85 100644
--- a/cfgov/tccp/jinja2/tccp/cards.html
+++ b/cfgov/tccp/jinja2/tccp/cards.html
@@ -43,18 +43,18 @@ <h1>{{ heading }}</h1>
 </div>
 
 {% if not situations %}
-<div class="block block__sub">
+<div class="block block--sub">
     <p>
         <a href="{{ url('tccp:landing_page') }}">Choose what you're looking for in a card</a>
     </p>
 </div>
 {% endif %}
 
-<div class="block block__flush-top">
+<div class="block block--flush-top">
     <div class="o-filterable-list-results o-filterable-list-results__partial htmx-results">
         {% include "tccp/includes/card_list.html" %}
     </div>
-    <button data-js-hook="behavior_show-more" class="a-btn a-btn__link a-btn__full-on-xs u-mt20 u-js-only">
+    <button data-js-hook="behavior_show-more" class="a-btn a-btn--link a-btn--full-on-xs u-mt20 u-js-only">
         Show more results with higher interest rates
     </button>
 </div>
diff --git a/cfgov/tccp/jinja2/tccp/includes/card_list.html b/cfgov/tccp/jinja2/tccp/includes/card_list.html
index 17e2e07728a..2ec8b031ad5 100644
--- a/cfgov/tccp/jinja2/tccp/includes/card_list.html
+++ b/cfgov/tccp/jinja2/tccp/includes/card_list.html
@@ -5,7 +5,7 @@
 {% import 'v1/includes/molecules/notification.html' as notification %}
 
 {% if situation_features -%}
-<div class="block block__sub">
+<div class="block block--sub">
     <h2>Cards you're looking for have these features:</h2>
 
     <ul>
@@ -34,7 +34,7 @@ <h2>Cards you're looking for have these features:</h2>
 ) -}}
 {%- endif %}
 
-<div class="block block__sub o-apr-rating-group">
+<div class="block block--sub o-apr-rating-group">
     <p class="o-apr-rating-group--heading">
         Use our ratings to compare your results:
     </p>
@@ -56,7 +56,7 @@ <h2>Cards you're looking for have these features:</h2>
     </dl>
 </div>
 
-<div class="block block__sub u-js-only" id="tccp-ordering-container"></div>
+<div class="block block--sub u-js-only" id="tccp-ordering-container"></div>
 
 {% if stats_all.first_report_date -%}
 {{ data_published(stats_all.first_report_date) }}
@@ -83,7 +83,7 @@ <h2>Cards you're looking for have these features:</h2>
 {%- endmacro -%}
 
 <div class="o-card-group">
-    <div class="o-card-group_cards">
+    <div class="o-card-group__cards">
         {%- for card in cards %}
         {%- set show_more = loop.index > 10 -%}
         <article class="m-card m-card--tabular{% if show_more %} u-show-more{% endif %}">
diff --git a/cfgov/tccp/jinja2/tccp/includes/filter_form.html b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
index 07627aa0b93..f93bb4c239e 100644
--- a/cfgov/tccp/jinja2/tccp/includes/filter_form.html
+++ b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
@@ -10,7 +10,7 @@
 
     <label
         class="a-label
-        {%- if field_type == "select" %} a-label__heading{% endif -%}"
+        {%- if field_type == "select" %} a-label--heading{% endif -%}"
         for="{{ field.id_for_label }}">
         {{ field.label }}
     </label>
@@ -78,7 +78,7 @@
             <button type="submit" class="a-btn" title="Apply filters">
                 Apply filters
             </button>
-            <a class="a-btn a-btn__link a-btn__warning" href="{{ request.path }}">
+            <a class="a-btn a-btn--link a-btn--warning" href="{{ request.path }}">
                 Clear filters
             </a>
         </div>
diff --git a/cfgov/tccp/jinja2/tccp/includes/sidebar.html b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
index a0f005e4f8e..e0fb16cddb6 100644
--- a/cfgov/tccp/jinja2/tccp/includes/sidebar.html
+++ b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
@@ -5,7 +5,7 @@ <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/">
+    <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>
     </a>
 </div>
diff --git a/cfgov/tccp/jinja2/tccp/includes/speed_bump.html b/cfgov/tccp/jinja2/tccp/includes/speed_bump.html
index 0a1a956d665..d9495eeb47c 100644
--- a/cfgov/tccp/jinja2/tccp/includes/speed_bump.html
+++ b/cfgov/tccp/jinja2/tccp/includes/speed_bump.html
@@ -9,8 +9,8 @@
 
     {%- if value.link -%}
     <ul class="m-list m-list--links">
-        <li class="m-list_item">
-            <a class="m-list_link" href="{{ value.url }}">{{ value.link }}</a>
+        <li class="m-list__item">
+            <a class="m-list__link" href="{{ value.url }}">{{ value.link }}</a>
         </li>
     </ul>
     {%- endif -%}
diff --git a/cfgov/tccp/jinja2/tccp/landing_page.html b/cfgov/tccp/jinja2/tccp/landing_page.html
index 690b5be7670..e05ab0b3e69 100644
--- a/cfgov/tccp/jinja2/tccp/landing_page.html
+++ b/cfgov/tccp/jinja2/tccp/landing_page.html
@@ -38,11 +38,11 @@
     {% include "v1/includes/molecules/hero.html" with context %}
 {% endwith %}
 
-{% endblock content__intro %}
+{% endblock content_intro %}
 
 {% block content_main %}
 
-    <div class="block block__sub block__flush-top">
+    <div class="block block--sub block--flush-top">
         <h2>
             How is this comparison tool different than others you may have used?
         </h2>
@@ -66,13 +66,13 @@ <h2>
         </p>
     </div>
 
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <form action="." method="get">
 
             <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
-                        class="a-label a-label__heading"
+                        class="a-label a-label--heading"
                         for="{{ form.credit_tier.id_for_label}}"
                     >
                         {{ form.credit_tier.label }}
@@ -91,7 +91,7 @@ <h2>
             <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
-                        class="a-label a-label__heading"
+                        class="a-label a-label--heading"
                         for="{{ form.location.id_for_label}}"
                     >
                         {{ form.location.label }}
@@ -112,7 +112,7 @@ <h2>
             </div>
 
             <div class="m-btn-group">
-                <button class="a-btn a-btn__full-on-xs" title="See cards for your situation">See cards for your situation</button>
+                <button class="a-btn a-btn--full-on-xs" title="See cards for your situation">See cards for your situation</button>
                 <div class="u-btn-helper">
                     Or <a href="{{ url('tccp:cards') }}">see all cards</a> in our database
                 </div>
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 559d17dd80c..9d92d1814ce 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
@@ -3,7 +3,7 @@
 <p>
     We’ll show you cards where you’ll:
 </p>
-<ul class="m-list m-list__unstyled">
+<ul class="m-list m-list--unstyled">
     <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
@@ -13,7 +13,7 @@
     </li>
 </ul>
 <p>
-    <div class="m-notification m-notification__warning m-notification__visible">
+    <div class="m-notification m-notification--warning m-notification--visible">
         {{ svg_icon("warning-round") }}
 
         <div class="m-notification__content">
@@ -30,7 +30,7 @@
 
             <p>
                 <a
-                    class="a-link a-link__jump"
+                    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>
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 9d9e0646df0..7662a800b92 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
@@ -1,7 +1,7 @@
 <p>
     We’ll show you cards where you’ll:
 </p>
-<ul class="m-list m-list__unstyled">
+<ul class="m-list m-list--unstyled">
     <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
diff --git a/cfgov/tccp/templates/tccp/widgets/checkbox_option.html b/cfgov/tccp/templates/tccp/widgets/checkbox_option.html
index 6ddd5f10cf4..49a08b9cab8 100644
--- a/cfgov/tccp/templates/tccp/widgets/checkbox_option.html
+++ b/cfgov/tccp/templates/tccp/widgets/checkbox_option.html
@@ -1,4 +1,4 @@
-<div class="m-form-field m-form-field__checkbox">
+<div class="m-form-field m-form-field--checkbox">
     {% include "django/forms/widgets/input.html" %}
     <label class="a-label" for="{{ widget.attrs.id }}">{{ widget.label }}</label>
 </div>
diff --git a/cfgov/tccp/templates/tccp/widgets/radio.html b/cfgov/tccp/templates/tccp/widgets/radio.html
index 470202a8ef2..4462fcf36cd 100644
--- a/cfgov/tccp/templates/tccp/widgets/radio.html
+++ b/cfgov/tccp/templates/tccp/widgets/radio.html
@@ -1,6 +1,6 @@
 {% for group, options, index in widget.optgroups %}
     {% for option in options %}
-    <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+    <div class="m-form-field m-form-field--radio m-form-field--lg-target">
         {% include option.template_name with widget=option %}
     </div>
     {% endfor %}
diff --git a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
index 8905774dabd..dced39c3fa7 100644
--- a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
+++ b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
@@ -1,4 +1,4 @@
-<div class="m-form-field m-form-field__checkbox m-form-field__lg-target">
+<div class="m-form-field m-form-field--checkbox m-form-field--lg-target">
     {% include "django/forms/widgets/input.html" %}
 
     <label class="a-label" for="{{ widget.attrs.id }}">
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 6cc44cfa768..e19919fdd87 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
@@ -10,7 +10,7 @@
 
 {% block content_main scoped %}
 <div class="tdp-activity-search">
-    <div class="content content__1-3">
+    <div class="content content--1-3">
         <section class="m-search-hero">
             <div class="m-search-hero_text">
                 {% for block in page.header -%}
@@ -26,13 +26,13 @@
                      alt="Illustration of teacher and student activity books">
             </div>
         </section>
-        <div class="block block__padded-top block__flush-top u-mb30">
+        <div class="block block--padded-top block--flush-top u-mb30">
             <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">
                     <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>
@@ -41,7 +41,7 @@ <h2>Search for activities</h2>
                                     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
+                                         input-contains-label__after--clear
                                          u-hidden" data-js-hook="behavior_clear-search">
                                 Clear {{ svg_icon('error') }}
                             </label>
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 e41fba3b37e..89d49bc2c7f 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
@@ -96,7 +96,7 @@ <h3>Key information for this activity</h3>
     {% if page.building_block %}
         <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">
+        <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>
             {% endfor %}
@@ -136,7 +136,7 @@ <h4>Activity characteristics</h4>
         <h4 class="u-mb5">National standards</h4>
         <p class="u-mb20"><small>
             (<a
-            class="a-link a-link__icon" target="_blank" rel="noreferrer noopener"
+            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-icon">{{ svg_icon('download') }}</span></a>)
@@ -146,7 +146,7 @@ <h4 class="u-mb5">National standards</h4>
         <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h5>Legal Disclaimer</h5>
         <p>This resource includes links and references to third-party resources or content that consumers may find helpful. The Bureau does not control or guarantee the accuracy of this third-party information. By listing these links and references, the Bureau is not endorsing and has not vetted these third-parties, the views they express, or the products or services they offer. Other entities and resources also may meet your needs.</p>
     </div>
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 e281d387de4..c644a6db95c 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
@@ -21,10 +21,10 @@
 {% macro build_form_group(name, items) %}
     <div class="o-form__group">
         <fieldset class="o-form__fieldset">
-            <ul class="m-list m-list__unstyled">
+            <ul class="m-list m-list--unstyled">
                 {% for facet in items %}
                 <li>
-                    <div class="m-form-field m-form-field__checkbox">
+                    <div class="m-form-field m-form-field--checkbox">
                       <input type="checkbox" class="a-checkbox" aria-label="{{ facet.title }}" id="{{name}}--{{ facet.title | trim | slugify }}" name="{{name}}" value="{{ facet.id }}"{% if facet.selected %} checked="checked"{% endif %}>
                       <label class="a-label" for="{{name}}--{{ facet.title | trim | slugify }}">{{ facet.title }}</label>
                     </div>
@@ -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 %}
@@ -103,9 +103,9 @@ <h5>{{topic_dict[topic.title]}}</h5>
 
 </aside>
 <section id="tdp-search-results" class="content__main results" tabindex="-1">
-    <div class="results_header">
+    <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 }}">
+            <div class="results__count u-hide-on-sm u-hide-on-xs" data-results-count="{{ page.results.total_results }}">
                 <h3>
                     {% if page.results.total_activities > page.results.total_results %}
                         Showing {{ page.results.total_results }}
@@ -116,17 +116,17 @@ <h3>
                 </h3>
             </div>
         {% else %}
-            <div class="results_count results_count__empty u-hide-on-sm u-hide-on-xs" data-results-count="0">
+            <div class="results__count results__count--empty u-hide-on-sm u-hide-on-xs" data-results-count="0">
                 <h3>No results match your search.</h3>
                 <p class="u-mb15">Try a new search with different terms or filters.</p>
             </div>
         {% endif %}
         {% if show_filters %}
-            <div class="results_filters">
-                <span class="results_filters-label">
+            <div class="results__filters">
+                <span class="results__filters-label">
                     Filters applied
                 </span>
-                <div class="results_filters-tags">
+                <div class="results__filters-tags">
                     {% for facet_name, facet_items in facets | items %}
                         {% if facet_name == 'topic'%}
                             {{ build_nested_filter_tags(facet_items, facet_name) }}
@@ -144,7 +144,7 @@ <h3>No results match your search.</h3>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <button class="a-btn a-btn__link a-btn__warning results_filters-clear u-mb10"
+                <button class="a-btn a-btn--link a-btn--warning results__filters-clear u-mb10"
                         data-js-hook="behavior_clear-all">
                     Clear all filters
                 </button>
@@ -152,8 +152,8 @@ <h3>No results match your search.</h3>
         {% endif %}
     </div>
     {% if activities %}
-        <div class="results_list">
-            <ul class="m-list m-list__unstyled">
+        <div class="results__list">
+            <ul class="m-list m-list--unstyled">
                 {% for result in activities %}
                     {% if result %}
                     <li class="u-mb30">{% include "activity_search_result.html" %}</li>
@@ -161,7 +161,7 @@ <h3>No results match your search.</h3>
                 {% endfor %}
             </ul>
         </div>
-        <div class="results_footer">
+        <div class="results__footer">
             {{ pagination.render( paginator.num_pages, current_page, 'tdp-search-facets-and-results', '' ) }}
             <div class="o-well">
                 Activities align with the My Money Five principles introduced by the statutorily created federal Financial Literacy and Education Commission.
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 ad04e512735..ae152a4730a 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
@@ -36,7 +36,7 @@ <h5 class="activity_meta-key">Activity duration:</h5>
         </div>
         <div>
             <h4 class="h5">Building block</h4>
-            <ul class="m-list m-list__unstyled">
+            <ul class="m-list m-list--unstyled">
                 {% for block in result.building_block %}
                     <li class="m-list__item">
                         <span class="a-icon a-icon__large a-icon__space-after">
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 579d605a81b..cd41b71312f 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
@@ -37,8 +37,8 @@
 
 {% macro expandable(value) %}
 <div class="o-expandable
-            {{ 'o-expandable__background' if value.is_midtone else '' }}
-            {{ 'o-expandable__border' if value.is_bordered else '' }}">
+            {{ '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">
             {{ value.label }}
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
index 61f40558e9f..ab03b26ff3d 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
@@ -118,12 +118,12 @@ export default function (label) {
   }
 
   addEventListenerToSelector(
-    '.form-explainer_page-link',
+    '.form-explainer__page-link',
     'click',
     trackFormExplainerPageLinkClick,
   );
   addEventListenerToSelector(
-    '.form-explainer_page-buttons button',
+    '.form-explainer__page-buttons button',
     'click',
     trackFormExplainerPageButtonClick,
   );
@@ -133,7 +133,7 @@ export default function (label) {
     trackExpandableTargetsClick,
   );
   addEventListenerToSelector(
-    '.image-map_overlay',
+    '.image-map__overlay',
     'click',
     trackImageMapOverlayClick,
   );
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/retirement-before-you-claim-listeners.js b/cfgov/unprocessed/apps/analytics-gtm/js/retirement-before-you-claim-listeners.js
index 8d666edbe6b..afbce356cdb 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/retirement-before-you-claim-listeners.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/retirement-before-you-claim-listeners.js
@@ -80,7 +80,7 @@ import { analyticsSendEvent, analyticsLog } from '@cfpb/cfpb-analytics';
       });
 
     document
-      .querySelector('#graph_slider-input')
+      .querySelector('#graph__slider-input')
       .addEventListener('mousedown', function () {
         sliderIsActive = true;
         sliderClicks++;
@@ -121,7 +121,7 @@ import { analyticsSendEvent, analyticsLog } from '@cfpb/cfpb-analytics';
     for (let i = 0, len = lifestyleBtns.length; i < len; i++) {
       lifestyleBtns[i].addEventListener('click', function (event) {
         const target = event.currentTarget;
-        const $container = target.closest('.lifestyle-question_container');
+        const $container = target.closest('.lifestyle-question__container');
         const question = $container.querySelector('h3').innerText.trim();
         const value = target.value;
         if (questionsAnswered.indexOf(question) === -1) {
diff --git a/cfgov/unprocessed/apps/ccdb-search/css/main.less b/cfgov/unprocessed/apps/ccdb-search/css/main.less
index bdb7adfe2e5..d134c7e3277 100644
--- a/cfgov/unprocessed/apps/ccdb-search/css/main.less
+++ b/cfgov/unprocessed/apps/ccdb-search/css/main.less
@@ -6,7 +6,7 @@
   max-width: 1200px !important;
 }
 
-.wrapper__match-content {
+.wrapper--match-content {
   // Tablet size.
   @media only screen and (min-width: 600px) and (max-width: 900px) {
     padding-left: 30px !important;
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
index 19e292b80e0..dc4e0eaab69 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
@@ -1,7 +1,7 @@
 @import (reference) '../../../css/main.less';
 @import url('../node_modules/ctrl-f/dist/css/index.css');
 
-.o-fig_main {
+.o-fig__main {
   // Bump up all heading sizes to improve readability
   h1 {
     .superheading();
@@ -64,20 +64,20 @@
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
     .content-l,
-    .a-link__jump {
+    .a-link--jump {
       z-index: -1;
     }
   });
 }
 
-.o-fig_heading {
+.o-fig__heading {
   a {
     color: var(--black);
     word-break: break-word;
   }
 }
 
-.o-fig_section__sub-sub {
+.o-fig__section--sub-sub {
   margin-top: unit(45px / @base-font-size-px, em);
   margin-bottom: unit(45px / @base-font-size-px, em);
 
@@ -93,7 +93,7 @@
 }
 
 // TODO: convert FIG secondary nav override abuse to modifiers on secondary nav.
-.o-fig_sidebar {
+.o-fig__sidebar {
   .o-secondary-nav__label {
     width: 95%;
   }
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 9439b937170..270ba6803f7 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
@@ -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 5ed188ec907..3d9842a9258 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
@@ -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);
       });
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/cfgov/unprocessed/apps/financial-well-being/css/main.less
index daecfbfc6f3..7780af52693 100644
--- a/cfgov/unprocessed/apps/financial-well-being/css/main.less
+++ b/cfgov/unprocessed/apps/financial-well-being/css/main.less
@@ -22,18 +22,18 @@
   top: 0;
 }
 
-.score-box__left {
+.score-box--left {
   padding-left: 10px;
   border-width: 0 0 0 1px;
 }
 
-.score-box__right {
+.score-box--right {
   padding-right: 10px;
   border-width: 0 1px 0 0;
   text-align: right;
 }
 
-.score-box__avg {
+.score-box--avg {
   height: 70px;
   top: 80px;
 }
@@ -42,7 +42,7 @@
   border-bottom-width: 1px;
 }
 
-.spectrum_x-label {
+.spectrum__x-label {
   padding-top: 5px;
   padding-left: 5px;
   border-left: 1px solid var(--gray-40);
@@ -51,81 +51,81 @@
   list-style: none;
 }
 
-.spectrum_x-label__40 {
+.spectrum__x-label--40 {
   left: 32.0987654321%;
 }
 
-.spectrum_x-label__50 {
+.spectrum__x-label--50 {
   left: 44.4444444444%;
 }
 
-.spectrum_x-label__60 {
+.spectrum__x-label--60 {
   left: 56.7901234568%;
 }
 
-.spectrum_x-label__70 {
+.spectrum__x-label--70 {
   left: 69.1358024691%;
 }
 
-.spectrum_x-label__overall {
+.spectrum__x-label--overall {
   width: 100%;
   margin-top: 30px;
   text-align: center;
 }
 
-.comparison-chart_toggle {
+.comparison-chart__toggle {
   padding: 0;
   border: none;
   margin: 0;
 }
 
-.comparison-chart_toggle-button {
+.comparison-chart__toggle-button {
   margin-bottom: 5px;
   background-color: var(--pacific-20);
   color: var(--black);
   font-size: unit(14px / @base-font-size-px, em);
 }
 
-.comparison-chart_toggle-button:hover,
-.comparison-chart_toggle-button:focus,
-.comparison-chart_toggle-button__selected {
+.comparison-chart__toggle-button:hover,
+.comparison-chart__toggle-button:focus,
+.comparison-chart__toggle-button--selected {
   background-color: var(--pacific-60);
 }
 
-.comparison-chart_title {
+.comparison-chart__title {
   margin-top: 30px;
 }
 
-.comparison-chart_list {
+.comparison-chart__list {
   margin-top: 30px;
   position: relative;
 }
 
-.comparison-chart_list dt,
-.comparison-chart_source dt {
+.comparison-chart__list dt,
+.comparison-chart__source dt {
   font-size: inherit;
   letter-spacing: normal;
   text-transform: none;
 }
 
-.comparison-chart_list dt {
+.comparison-chart__list dt {
   width: 30%;
   margin-bottom: 20px;
   text-align: right;
 }
 
-.comparison-chart_list dd {
+.comparison-chart__list dd {
   width: 65%;
   border-bottom: 1px solid var(--gray-40);
   position: relative;
   bottom: 0.25em;
 }
 
-.comparison-chart_list dd:not(.u-hidden) {
+.comparison-chart__list dd:not(.u-hidden) {
   display: inline-block;
 }
 
-.comparison-chart_list dd span {
+.comparison-chart__list dd span {
   height: 30px;
   padding-left: 5px;
   border-left-width: 4px;
@@ -136,7 +136,7 @@
   line-height: 1;
 }
 
-.comparison-chart_source {
+.comparison-chart__source {
   padding-top: 15px;
   border-top: 1px solid var(--gray-40);
   margin-top: 30px;
@@ -158,7 +158,7 @@
   }
 
   .respond-to-min( @bp-sm-min, {
-    .m-form-field__radio {
+    .m-form-field--radio {
       width: percentage( 1 / @scale-point-count );
 
       float: left;
@@ -190,13 +190,13 @@
   } );
 
   .respond-to-max( @bp-lg-max, {
-    .o-scale_answer-prefix {
+    .o-scale__answer-prefix {
       margin-bottom: unit( 15px / @base-font-size-px, em );
     }
   } );
 
   .respond-to-min( @bp-xl-min, {
-    .o-scale_answer-prefix {
+    .o-scale__answer-prefix {
       box-sizing: border-box;
       padding-right: unit( 15px / @base-font-size-px, em );
       width: 20%;
@@ -204,7 +204,7 @@
       float: left;
     }
 
-    .o-scale_answer-options {
+    .o-scale__answer-options {
       width: 80%;
 
       float: left;
@@ -214,7 +214,7 @@
 
 /* CF Enhancements */
 @media all and (max-width: 37.5em) {
-  .comparison-chart_toggle-button {
+  .comparison-chart__toggle-button {
     display: block;
   }
 }
@@ -222,7 +222,7 @@
 @media print {
   /* Force all these things back on when printing, regardless
      of how the user has interacted with the page */
-  .js .comparison_data-point {
+  .js .comparison__data-point {
     display: inline-block !important;
   }
 
@@ -259,7 +259,7 @@
   /* Hide various things when printing */
   .save-links,
   .o-expandable__cues,
-  .comparison-chart_toggle,
+  .comparison-chart__toggle,
   .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 2436798e20c..f4ed782aec3 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
@@ -2,15 +2,15 @@
   background: var(--gray-5);
 }
 
-.hud-search-container_text {
+.hud-search-container__text {
   padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
 }
 
-#hud_hca_api_map_canvas {
+#hud-hca-api-map-canvas {
   height: 320px;
 }
 
-#hud_hca_api_query {
+#hud-hca-api-query {
   max-width: unit(480px / @base-font-size-px, em);
 }
 
@@ -20,32 +20,32 @@
     display: flex;
   }
 
-  .hud-search-container_text {
+  .hud-search-container__text {
     flex: 1;
     // Magic number of 270px below keeps full input placeholder in view.
     min-width: unit( 270px / @base-font-size-px, em );
     padding: unit( @grid_gutter-width / @base-font-size-px, em );
   }
 
-  .hud-search-container_map {
+  .hud-search-container__map {
     flex: 2;
   }
 
-  #hud_hca_api_map_canvas {
+  #hud-hca-api-map-canvas {
     height: 440px;
   }
 });
 
-#hud_hca_api_map_container {
+#hud-hca-api-map-container {
   /* Prevent map controls from appearing on top of mega menu. */
   z-index: 0;
 }
 
-#hud_hca_api_map_canvas img {
+#hud-hca-api-map-canvas img {
   max-width: none;
 }
 
-.hud_hca_api_results_actions {
+.hud-hca-api-results-actions {
   .respond-to-min(@bp-xs-max, {
     & {
       // Margin makes a gap between result header links and result text.
@@ -76,7 +76,7 @@
     }
   }
 
-  .hud-search-container_map,
+  .hud-search-container__map,
   #hud_print-page-link {
     display: none;
   }
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud_print.css b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud_print.css
index b7c961a82de..6afa419fecb 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud_print.css
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud_print.css
@@ -99,7 +99,7 @@
   /* Hide unneeded content */
   .o-header,
   .o-footer,
-  .hud_hca_api_results_actions,
+  .hud-hca-api-results-actions,
   svg {
     display: none !important;
   }
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/js/common.js b/cfgov/unprocessed/apps/find-a-housing-counselor/js/common.js
index 44e5b018335..a1f627a1eac 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/js/common.js
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/js/common.js
@@ -59,14 +59,14 @@ function scriptLoaded(evt) {
  * Set access map options and create map.
  */
 function initializeMap() {
-  const showMap = Boolean(document.getElementById('hud_hca_api_map_container'));
+  const showMap = Boolean(document.getElementById('hud-hca-api-map-container'));
 
   if (showMap) {
     const fcm = document.getElementById('hud_search_container');
     fcm.classList.remove('no-js');
     window.L.mapbox.accessToken = mapboxAccessToken;
     map = window.L.mapbox
-      .map('hud_hca_api_map_container')
+      .map('hud-hca-api-map-container')
       .setView([40, -80], 2)
       .addLayer(
         window.L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'),
diff --git a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
index 94fb0e08460..83fae45fd71 100644
--- a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
+++ b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
@@ -32,17 +32,17 @@
     .u-clearfix();
   }
 
-  .image-map_wrapper {
+  .image-map__wrapper {
     position: relative;
   }
 
-  .image-map_image {
+  .image-map__image {
     display: block;
     box-sizing: border-box;
     border: 1px solid var(--black);
   }
 
-  .image-map_overlay {
+  .image-map__overlay {
     position: absolute;
     box-sizing: border-box;
     border: 2px solid transparent;
@@ -53,7 +53,7 @@
   each( @colors, {
     @color: @{value}-dk;
 
-    .image-map_overlay__category-@{index} {
+    .image-map__overlay--category-@{index} {
       background: fade( @@color, 20% );
 
       &:hover,
@@ -160,44 +160,44 @@
 
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
-      &_image-map {
+      &__image-map {
         display:flex;
       }
     });
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      &_container{
+      &__container{
         display:flex;
       }
 
-      &_image-map {
+      &__image-map {
         max-width: 66%;
       }
 
-      .image-map_wrapper {
+      .image-map__wrapper {
         position: sticky;
         top: 2vh;
       }
 
-      .image-map_image {
+      .image-map__image {
         margin-right: 2px;
         max-height: 96vh;
         max-width: 100%;
       }
 
-      &_terms {
+      &__terms {
         flex: 1;
         padding-left: unit( 35px / @base-font-size-px, em );
       }
 
-      &_pagination {
+      &__pagination {
         margin-bottom: unit( @grid_gutter-width / 3 / @base-font-size-px, em );
       }
     });
   }
 
-  .explain_page {
+  .explain__page {
     // Position is needed to allow .explain_image-map
     // to stick to the bottom of .explain_page.
     // Tablet and above.
@@ -206,12 +206,12 @@
     });
   }
 
-  .explain_pagination {
+  .explain__pagination {
     margin-top: unit(15px / @base-font-size-px, em);
     .u-clearfix();
   }
 
-  .form-explainer_page-buttons {
+  .form-explainer__page-buttons {
     button {
       position: absolute;
       top: 45%;
@@ -228,11 +228,11 @@
     }
   }
 
-  .form-explainer_nav-label {
+  .form-explainer__nav-label {
     float: left;
   }
 
-  .form-explainer_page-links {
+  .form-explainer__page-links {
     margin-bottom: unit(
       @grid_gutter-width / 3 / @base-font-size-px,
       em
diff --git a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
index ba0e036a9c9..f689a80791b 100644
--- a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
+++ b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
@@ -66,7 +66,7 @@ class FormExplainer {
    * Update the pagination UI.
    */
   updatePaginationUI() {
-    const BTN_DISABLED = 'a-btn__disabled';
+    const BTN_DISABLED = 'a-btn--disabled';
     const PAGE_BTN_CTR = '.form-explainer_page-buttons';
 
     if (this.pageCount > 1) {
@@ -92,7 +92,7 @@ class FormExplainer {
     const targetId = target.getAttribute('id');
 
     DT.removeClass(
-      '.o-expandable__form-explainer, .image-map_overlay',
+      '.o-expandable__form-explainer, .image-map__overlay',
       className,
     );
 
@@ -269,7 +269,7 @@ class FormExplainer {
      * update the hover styles.
      */
     DT.bindEvents(
-      '.image-map_overlay, .o-expandable__form-explainer',
+      '.image-map__overlay, .o-expandable__form-explainer',
       ['mouseenter', 'mouseleave'],
       (event) => {
         event.preventDefault();
@@ -288,7 +288,7 @@ class FormExplainer {
     /* When an overlay is clicked, toggle the corresponding expandable
      * and scroll the page until it is in view.
      */
-    DT.bindEvents('.image-map_overlay', 'click', (event) => {
+    DT.bindEvents('.image-map__overlay', 'click', (event) => {
       event.preventDefault();
       event.stopPropagation();
       const imageOverlay = event.target;
diff --git a/cfgov/unprocessed/apps/homepage/css/main.less b/cfgov/unprocessed/apps/homepage/css/main.less
index 6001ae781f7..2b3b17d12a7 100644
--- a/cfgov/unprocessed/apps/homepage/css/main.less
+++ b/cfgov/unprocessed/apps/homepage/css/main.less
@@ -1,22 +1,22 @@
-.content_level--1 {
+.content__level--1 {
   max-width: 1230px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.content_level-1 {
+.content__level-1 {
   max-width: 930px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.content_level-2 {
+.content__level-2 {
   max-width: 870px;
   margin-left: auto;
   margin-right: auto;
 }
 
-.content__main__flush-inner {
+.content__main--flush-inner {
   padding-top: 0;
   margin-top: 0;
 }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/a-range.less b/cfgov/unprocessed/apps/owning-a-home/css/a-range.less
index baa5ec2cb1a..ecd6d00d56f 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/a-range.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/a-range.less
@@ -5,7 +5,7 @@
   position: relative;
   margin-bottom: 1.5em;
 
-  &_labels {
+  &__labels {
     margin: unit(15px / @base-font-size-px, em) 0
       unit(8px / @base-font-size-px, em);
     font-size: 0.625em;
@@ -16,7 +16,7 @@
     }
   }
 
-  &_text {
+  &__text {
     position: absolute;
     display: block;
     margin-left: unit(-10px / @base-font-size-px, em);
@@ -31,7 +31,7 @@
   display: block;
   width: 100%;
   height: 20px;
-  background: transparent url('@{image_path}/slider-bg.png') scroll no-repeat
+  background: transparent url('@{image-path}/slider-bg.png') scroll no-repeat
     center center;
   background-size: 100%;
 }
@@ -49,19 +49,19 @@
   width: 22px;
   height: 21px;
   border: 0;
-  background: transparent url('@{image_path}/slider-handle.png') no-repeat 0 0;
+  background: transparent url('@{image-path}/slider-handle.png') no-repeat 0 0;
   background-size: 100%;
 
   &.warning {
     width: 22px;
     height: 21px;
-    background: transparent url('@{image_path}/slider-handle.png') no-repeat 0
+    background: transparent url('@{image-path}/slider-handle.png') no-repeat 0
       100%;
     background-size: 100%;
   }
 }
 
-.a-range_input:focus + .rangeslider .rangeslider__handle {
+.a-range__input:focus + .rangeslider .rangeslider__handle {
   border: 1px solid #0072ce;
   box-shadow: none;
   outline: 1px solid #0072ce;
@@ -73,14 +73,14 @@
     width: 22px;
     height: 21px;
     border: 0;
-    background: transparent url('@{image_path}/slider-handle@2x.png') no-repeat
+    background: transparent url('@{image-path}/slider-handle@2x.png') no-repeat
       0 0;
     background-size: 100%;
 
     &.warning {
       width: 22px;
       height: 21px;
-      background: transparent url('@{image_path}/slider-handle@2x.png')
+      background: transparent url('@{image-path}/slider-handle@2x.png')
         no-repeat 0 100%;
       background-size: 100%;
     }
@@ -90,7 +90,7 @@
 // Print styles
 @media print {
   .rangeslider,
-  .a-range_labels {
+  .a-range__labels {
     display: none;
   }
 }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
index 6a3343b17e2..d4a6166655f 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
@@ -6,7 +6,7 @@
   background-color: var(--gray-5);
   border-top: 1px solid var(--gray-40);
 
-  &_wrapper {
+  &__wrapper {
     box-sizing: border-box;
     padding: unit(30px / @base-font-size-px, rem);
     padding-bottom: unit(60px / @base-font-size-px, rem);
@@ -14,18 +14,18 @@
     margin: 0 auto;
   }
 
-  &_heading {
+  &__heading {
     margin-bottom: unit(30px / @base-font-size-px, rem);
   }
 
-  &_blocks {
+  &__blocks {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: unit(60px / @base-font-size-px, rem);
   }
 
-  &_block {
+  &__block {
     flex-grow: 1;
     width: 240px;
   }
@@ -34,7 +34,7 @@
     border-bottom-width: 1px;
   }
 
-  &_img {
+  &__img {
     text-align: center;
 
     // Tablet and above.
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
index 634842d2fdb..fcb9125960e 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.less
@@ -17,7 +17,7 @@
   );
   }
 
-  &_text {
+  &__text {
     font-size: 14px;
   }
 
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
index f40fb812e50..feafa063f43 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
@@ -187,7 +187,7 @@
       unit(20px / @base-font-size-px, em) unit(20px / @base-font-size-px, em) 0;
 
     &.geolocating {
-      background: transparent url('@{image_path}icon_spinner.gif') scroll
+      background: transparent url('@{image-path}icon_spinner.gif') scroll
         no-repeat center center;
       #chart {
         opacity: 0;
@@ -224,7 +224,7 @@
     }
   }
 
-  .data-label_number {
+  .data-label__number {
     background-color: var(--white);
   }
 
@@ -435,7 +435,7 @@
     background-color: var(--white);
     font-size: 13px;
 
-    &_btn {
+    &__btn {
       width: 100%;
       padding: unit(5px / @base-font-size-px, em)
         unit(15px / @base-font-size-px, em);
@@ -447,7 +447,7 @@
       text-align: left;
     }
 
-    &_options {
+    &__options {
       height: 0;
       padding: 0;
       margin: 0;
@@ -473,7 +473,7 @@
     &__open {
       border-color: var(--gray-10);
 
-      .chart-menu_options {
+      .chart-menu__options {
         height: 110px;
       }
     }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/main.less b/cfgov/unprocessed/apps/owning-a-home/css/main.less
index e62b5f286b1..654c92107ba 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/main.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/main.less
@@ -4,7 +4,7 @@
    ========================================================================== */
 
 // Image path
-@image_path: '/static/apps/owning-a-home/img/';
+@image-path: '/static/apps/owning-a-home/img/';
 
 @import (reference) '../../../css/main.less';
 @import (less) './brand-header.less';
diff --git a/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/RateCheckerChart.js b/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/RateCheckerChart.js
index b0ae64a14d7..76460c2135a 100644
--- a/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/RateCheckerChart.js
+++ b/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/RateCheckerChart.js
@@ -114,11 +114,11 @@ function RateCheckerChart() {
   function setStatus(state) {
     if (state === RateCheckerChart.STATUS_OKAY) {
       _chartDom.classList.remove('warning');
-      _resultAlertDom.classList.remove('m-notification__visible');
+      _resultAlertDom.classList.remove('m-notification--visible');
       _failAlertDom.classList.add('u-hidden');
     } else if (state === RateCheckerChart.STATUS_WARNING) {
       _chartDom.classList.add('warning');
-      _resultAlertDom.classList.add('m-notification__visible');
+      _resultAlertDom.classList.add('m-notification--visible');
     } else if (state === RateCheckerChart.STATUS_ERROR) {
       _failAlertDom.classList.remove('u-hidden');
     } else {
diff --git a/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/Slider.js b/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/Slider.js
index a9fb67398e4..218fc707c8f 100644
--- a/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/Slider.js
+++ b/cfgov/unprocessed/apps/owning-a-home/js/explore-rates/Slider.js
@@ -14,8 +14,8 @@ const BASE_CLASS = 'a-range';
  */
 function Slider(element) {
   const _dom = checkDom(element, BASE_CLASS);
-  const _inputDom = _dom.querySelector(`.${BASE_CLASS}_input`);
-  const _labelDom = _dom.querySelector(`.${BASE_CLASS}_text`);
+  const _inputDom = _dom.querySelector(`.${BASE_CLASS}__input`);
+  const _labelDom = _dom.querySelector(`.${BASE_CLASS}__text`);
 
   let _rangeSliderHandleDom;
 
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 7b600c1e96f..1a70b5890a1 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
@@ -18,7 +18,7 @@
   font-size: 1.125em;
 }
 
-.form-label_text-wrapper {
+.form-label__text-wrapper {
   display: block;
   margin-bottom: unit(5px / @base-font-size-px, em);
   font-size: 1.125em;
@@ -38,54 +38,54 @@
    ========================================================================== */
 
 .cf-notification {
-  @notification-padding__px: 11px;
+  @notification-padding-px: 11px;
 
   position: relative;
 
-  padding: @notification-padding__px;
+  padding: @notification-padding-px;
   padding-left: 40px;
-  margin-bottom: @notification-padding__px + 4px;
+  margin-bottom: @notification-padding-px + 4px;
 
   background: var(--gray-20);
   border: 1px solid var(--gray);
 
-  &__error {
+  &--error {
     background: var(--red-20);
     border-color: @input-error;
   }
 
-  &__success {
+  &--success {
     background: var(--green-20);
     border-color: @input-success;
   }
 
-  &__warning {
+  &--warning {
     background: var(--gold-20);
     border-color: @input-warning;
   }
 
-  &_icon {
+  &__icon {
     position: absolute;
-    top: @notification-padding__px + 2px;
-    left: @notification-padding__px + 4px;
+    top: @notification-padding-px + 2px;
+    left: @notification-padding-px + 4px;
 
     color: var(--gray-20);
     font-size: unit(18px / @base-font-size-px, em);
 
-    &__error {
+    &--error {
       color: #d14327;
     }
 
-    &__success {
+    &--success {
       color: #2cb34a;
     }
 
-    &__warning {
+    &--warning {
       color: #ff931b;
     }
   }
 
-  &_text {
+  &__text {
     .h4();
     margin: 0;
 
@@ -204,10 +204,10 @@
     });
   }
 
-  &_wrapper {
+  &__wrapper {
     overflow: hidden;
 
-    &__overflow-small {
+    &--overflow-small {
       overflow: visible;
 
       .respond-to-min(@bp-sm-min, {
@@ -216,7 +216,7 @@
     }
   }
 
-  &_content {
+  &__content {
     position: relative;
     z-index: 1;
 
@@ -234,7 +234,7 @@
       });
     }
 
-    .column-well_content {
+    .column-well__content {
       .respond-to-min(@bp-med-min, {
         padding-right: 0;
         padding-left: 0;
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 a582ccefd1a..7a138880e17 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
@@ -123,18 +123,18 @@
 // Color variables
 
 // .block
-@block__border-top: var(--gray-40);
-@block__border-bottom: var(--gray-40);
-@block__bg: var(--gray-10);
+@block--border-top: var(--gray-40);
+@block--border-bottom: var(--gray-40);
+@block--bg: var(--gray-10);
 
-// .content_main
+// .content__main
 @content__main-border: var(--gray-40);
 
-// .content_sidebar
+// .content__sidebar
 @content__sidebar-bg: var(--gray-10);
 @content__sidebar-border: var(--gray-40);
 
-// .content_line
+// .content__line
 @content__line: var(--gray-40);
 
 /* cf-pagination
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less
index a9766141a10..533e7e3638d 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less
@@ -1,5 +1,5 @@
 .college-costs {
-  &_tool-section__school-results {
+  &__tool-section--school-results {
     & .highcharts-plot-band {
       fill-opacity: 1;
 
@@ -15,22 +15,22 @@
     }
   }
 
-  #affording-your-loans_chart,
-  #max-debt-guideline_chart {
+  #affording-your-loans__chart,
+  #max-debt-guideline__chart {
     .highcharts-plot-line {
       stroke: #20aa3f;
       stroke-width: 3px;
     }
   }
 
-  #make-a-plan_chart {
+  #make-a-plan__chart {
     .highcharts-plot-line {
       stroke: #d14124;
       stroke-width: 3px;
     }
   }
 
-  &_chart {
+  &__chart {
     & + p.median-salary-note {
       font-size: unit(12px / @base-font-size-px, rem);
       margin-top: unit(15px / @base-font-size-px, rem);
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 6f5a520c61d..45d1ff2033f 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
@@ -49,22 +49,22 @@
     margin-top: unit(5px / @base-font-size-px, em);
   }
 
-  &_tool-section {
+  &__tool-section {
     display: none;
 
     max-width: unit(570px / @base-font-size-px, rem);
 
     .equation-row {
       .financial-item {
-        &_label div {
+        &__label div {
           .h3();
         }
-        &_value span {
+        &__value span {
           .h3();
         }
       }
 
-      &__bottom-line {
+      &--bottom-line {
         border-bottom: 2px solid black;
         padding-bottom: 30px;
       }
@@ -81,14 +81,14 @@
     }
 
     .o-costs-group {
-      &_header,
-      &_content {
+      &__header,
+      &__content {
         padding-left: 0;
         padding-right: 0;
       }
     }
 
-    &__school-search {
+    &--school-search {
       .m-notification {
         margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
         margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
@@ -99,22 +99,22 @@
       }
     }
 
-    &__costs {
+    &--costs {
       .a-btn.active {
         background-color: var(--white);
         color: var(--pacific);
         border-color: var(--pacific);
       }
 
-      .costs_button-section {
+      .costs__button-section {
         .m-form-field {
           margin-bottom: unit(15px / @base-font-size-px, em);
         }
       }
     }
 
-    &__debt-guideline {
-      .h3 .financial-item__subtotal {
+    &--debt-guideline {
+      .h3 .financial-item--subtotal {
         margin-top: unit(15px / @base-font-size-px, em);
       }
 
@@ -123,8 +123,8 @@
       }
     }
 
-    &__affording {
-      .total-hours .financial-item_value span {
+    &--affording {
+      .total-hours .financial-item__value span {
         font-weight: 600;
       }
 
@@ -132,13 +132,13 @@
         margin-top: unit(30px / @base-font-size-px, em);
       }
 
-      .o-costs-group_header {
+      .o-costs-group__header {
         border-top: 1px solid var(--black);
         border-bottom: 1px solid var(--black);
       }
     }
 
-    &__summary {
+    &--summary {
       .financial-item {
         margin-top: 0;
       }
@@ -160,7 +160,7 @@
       }
     }
 
-    .action-plan_choices,
+    .action-plan__choices,
     .affording-loans-choices {
       // equal height radio inputs
       display: flex;
@@ -178,14 +178,14 @@
           height: 100%;
         }
       }
+    }
 
-      &_about {
-        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-      }
+    .affording-loans-choices__about {
+      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
     }
   }
 
-  .school-results_comparison-section {
+  .school-results__comparison-section {
     border: 2px solid var(--gray-20);
     padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
 
@@ -193,7 +193,7 @@
       margin-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
     }
 
-    .school-results_rank-display {
+    .school-results__rank-display {
       display: flex;
       align-items: center;
       margin: unit(@grid_gutter-width / @base-font-size-px, em) 0;
@@ -216,7 +216,7 @@
       flex-shrink: 0;
     }
 
-    .m-form-field__radio {
+    .m-form-field--radio {
       display: inline-block;
     }
   }
@@ -226,7 +226,7 @@
     list-style: none;
   }
 
-  .o-table__financial {
+  .o-table--financial {
     .indented-row td:first-child {
       padding-left: unit(@grid_gutter-width * 2/3 / @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 f3670389a0d..3d3cbe2cc76 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
@@ -1,9 +1,9 @@
 .financial-item {
   margin-top: unit(30px / @base-font-size-px, em);
 
-  &:not(&__flyout) {
-    .financial-item_label,
-    .financial-item_value {
+  &:not(&--flyout) {
+    .financial-item__label,
+    .financial-item__value {
       display: inline-block;
       border-width: 0;
       border: solid transparent;
@@ -15,37 +15,37 @@
   }
 
   input,
-  &_value {
+  &__value {
     text-align: right;
   }
 
-  .a-label__heading {
+  .a-label--heading {
     margin-bottom: 0;
   }
 
-  &_note {
+  &__note {
     display: block;
 
     & span {
       display: block;
     }
 
-    .a-link__text,
+    .a-link--text,
     .inline {
       display: inline;
     }
   }
 
-  &__subtotal,
-  &__total {
-    .financial-item_label > :not(p),
-    .financial-item_value {
+  &--subtotal,
+  &--total {
+    .financial-item__label > :not(p),
+    .financial-item__value {
       .heading-4();
       margin-bottom: 0;
     }
   }
 
-  &__flyout {
+  &--flyout {
     padding: 0.625em;
     margin-top: 0;
     background-color: #fff;
@@ -54,45 +54,45 @@
       margin-bottom: 0;
     }
 
-    .o-costs-group_label {
+    .o-costs-group__label {
       width: auto;
     }
 
-    .financial-item_note {
+    .financial-item__note {
       text-align: left;
       margin-top: unit(15px / @base-font-size-px, em);
     }
 
-    .financial-item_note span {
+    .financial-item__note span {
       margin-top: unit(15px / @base-font-size-px, em);
     }
 
-    .financial-item_value {
+    .financial-item__value {
       color: var(--black);
     }
   }
 
-  &.o-costs-group_header {
+  &.o-costs-group__header {
     width: 100%;
     border: none;
     margin-bottom: unit(15px / @base-font-size-px, em);
     text-align: left;
 
-    &__collapsed {
-      .o-costs-group_cue-close {
+    &--collapsed {
+      .o-costs-group__cue-close {
         display: none;
       }
-      .o-costs-group_cue-open {
+      .o-costs-group__cue-open {
         display: inline;
         margin-left: unit(5px / @base-font-size-px, em);
       }
     }
 
-    &__expanded {
-      .o-costs-group_cue-open {
+    &--expanded {
+      .o-costs-group__cue-open {
         display: none;
       }
-      .o-costs-group_cue-close {
+      .o-costs-group__cue-close {
         display: inline;
         margin-left: unit(5px / @base-font-size-px, em);
       }
@@ -101,52 +101,52 @@
     .flex-container {
       display: flex;
 
-      .o-costs-group_label {
+      .o-costs-group__label {
         flex: 1;
         flex-grow: 1;
       }
     }
 
-    .o-costs-group_link .o-costs-group_cue-close,
-    .o-costs-group_link .o-costs-group_cue-open {
+    .o-costs-group__link .o-costs-group__cue-close,
+    .o-costs-group__link .o-costs-group__cue-open {
       color: var(--pacific);
       font-size: 1em;
       line-height: 1.375;
     }
   }
 
-  &__total {
+  &--total {
     font-size: unit(20px / @size-iv, em);
     border-top: 1px solid var(--gray-60);
     padding-top: unit(10px / @base-font-size-px, em);
   }
 
-  &__warning {
-    .financial-item_value {
+  &--warning {
+    .financial-item__value {
       color: var(--red);
     }
   }
 
-  &__full-width {
+  &--full-width {
     div + div {
       margin-top: unit(5px / @base-font-size-px, em);
     }
   }
 
-  .financial-item_label p {
+  .financial-item__label p {
     font-size: unit(16px / @base-font-size-px, em);
   }
 }
 
 .financial-item-group {
   .o-costs-group {
-    border-bottom: 1px solid @flyout__border;
+    border-bottom: 1px solid @flyout-border;
     &:first-child {
-      border-top: 1px solid @flyout__border;
+      border-top: 1px solid @flyout-border;
     }
   }
 
-  .o-costs-group_content {
+  .o-costs-group__content {
     .financial-item {
       margin-top: unit(15px / @base-font-size-px, em);
     }
@@ -155,8 +155,8 @@
   }
 }
 
-.text-item__bigger {
-  .financial-item_label div {
+.text-item--bigger {
+  .financial-item__label div {
     font-size: unit(18px / @base-font-size-px, em);
     font-weight: 500;
   }
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 9267c3ded90..6ab7eec1707 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
@@ -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 a4313df7571..5456871d703 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
@@ -1,45 +1,45 @@
 .number-callout {
-  &_header {
+  &__header {
     font-size: unit(16px / @base-font-size-px, em);
     font-weight: 500;
     margin-bottom: 0;
     text-transform: uppercase;
   }
 
-  &_value {
+  &__value {
     margin-top: 0;
     margin-bottom: unit(10px / @base-font-size-px, em);
     font-size: unit(18px / @base-font-size-px, em);
   }
 
-  &__large {
-    .number-callout_value {
+  &--large {
+    .number-callout__value {
       font-size: unit(28px / @base-font-size-px, em);
       font-weight: 600;
     }
   }
 
-  &__right {
+  &--right {
     text-align: right;
     border-right: 5px solid var(--black);
     padding-right: unit(10px / @base-font-size-px, em);
   }
 
-  &__warning {
+  &--warning {
     border-color: var(--red);
 
-    .number-callout_value {
+    .number-callout__value {
       color: var(--red);
     }
   }
 
-  &__border-top {
+  &--border-top {
     border-top: 1px solid @block--border;
     padding-top: unit(10px / @base-font-size-px, em);
     margin-top: unit(30px / @base-font-size-px, em);
   }
 
-  &__divisor .number-callout_value > span {
+  &--divisor .number-callout__value > span {
     border-bottom: 1px solid black;
     padding-bottom: unit(5px / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
index 8fb7f8b0ed6..2e53c846f8b 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
@@ -1,4 +1,4 @@
-#college-costs_school-search {
+#college-costs__school-search {
   position: relative;
 
   #search-results {
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
index 7d14c00ae1e..28f38d95738 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
@@ -121,11 +121,11 @@ main.college-costs {
   }
 
   &[data-state_gotstarted='true'] {
-    .college-costs_intro-segment {
+    .college-costs__intro-segment {
       display: none;
     }
 
-    .college-costs_tool-section.active {
+    .college-costs__tool-section.active {
       display: block;
     }
   }
@@ -163,7 +163,7 @@ main.college-costs {
   &:not([data-state_costsquestion]) {
     // Don't show the Next button on Costs page until a costs choice is made
     &[data-state_activesection='costs'] {
-      .college-costs_tool-section_buttons {
+      .college-costs__tool-section-buttons {
         display: none;
       }
     }
@@ -218,7 +218,7 @@ main.college-costs {
       display: inline;
     }
 
-    .college-costs_tool-section.college-costs_tool-section__affording
+    .college-costs__tool-section.college-costs__tool-section--affording
       .affording-loans-choices {
       display: none;
     }
@@ -226,13 +226,13 @@ main.college-costs {
     [data-state-based-visibility='expenses-hourly-wages'] {
       display: block;
     }
-    .debt-guideline_salary-info {
+    .debt-guideline__salary-info {
       display: none;
     }
   }
 
   &[data-state_costsquestion] {
-    #costs_inputs-section {
+    #costs__inputs-section {
       display: block;
     }
     [data-state-based-visibility='costs-question-hide'] {
@@ -342,83 +342,83 @@ main.college-costs {
 
   // Don't show the next button on the save & finish page
   &[data-state_activesection='save-and-finish'] {
-    .college-costs_tool-section_buttons {
+    .college-costs__tool-section-buttons {
       display: none;
     }
   }
 
-  .school-results_comparison-section__default-rate .big-percentile {
+  .school-results__comparison-section--default-rate .big-percentile {
     border-color: var(--gray-20);
   }
 
   &[data-state_rategraduationrange='high'] {
-    .school-results_comparison-section__grad-rate .big-percentile {
+    .school-results__comparison-section--grad-rate .big-percentile {
       border-color: @college-costs-chart-max;
     }
   }
 
   &[data-state_rategraduationrange='medium'] {
-    .school-results_comparison-section__grad-rate .big-percentile {
+    .school-results__comparison-section--grad-rate .big-percentile {
       border-color: @college-costs-chart-median;
     }
   }
 
   &[data-state_rategraduationrange='low'] {
-    .school-results_comparison-section__grad-rate .big-percentile {
+    .school-results__comparison-section--grad-rate .big-percentile {
       border-color: @college-costs-chart-min;
     }
   }
 
   &[data-state_raterepay3yrrange='high'] {
-    .school-results_comparison-section__repayment-rate .big-percentile {
+    .school-results__comparison-section--repayment-rate .big-percentile {
       border-color: @college-costs-chart-max;
     }
   }
 
   &[data-state_raterepay3yrrange='medium'] {
-    .school-results_comparison-section__repayment-rate .big-percentile {
+    .school-results__comparison-section--repayment-rate .big-percentile {
       border-color: @college-costs-chart-median;
     }
   }
 
   &[data-state_raterepay3yrrange='low'] {
-    .school-results_comparison-section__repayment-rate .big-percentile {
+    .school-results__comparison-section--repayment-rate .big-percentile {
       border-color: @college-costs-chart-min;
     }
   }
 
   &[data-state_defaultraterange='high'] {
-    .school-results_comparison-section__default-rate .big-percentile {
+    .school-results__comparison-section--default-rate .big-percentile {
       border-color: @college-costs-chart-min;
     }
   }
 
   &[data-state_defaultraterange='medium'] {
-    .school-results_comparison-section__default-rate .big-percentile {
+    .school-results__comparison-section--default-rate .big-percentile {
       border-color: @college-costs-chart-median;
     }
   }
 
   &[data-state_defaultraterange='low'] {
-    .school-results_comparison-section__default-rate .big-percentile {
+    .school-results__comparison-section--default-rate .big-percentile {
       border-color: @college-costs-chart-max;
     }
   }
 
   &[data-state_repay3yrmissing='true'] {
-    .school-results_comparison-section__repayment-rate {
+    .school-results__comparison-section--repayment-rate {
       display: none;
     }
   }
 
   &[data-state_gradratemissing='true'] {
-    .school-results_comparison-section__grad-rate {
+    .school-results__comparison-section--grad-rate {
       display: none;
     }
   }
 
   &[data-state_defaultratemissing='true'] {
-    .school-results_comparison-section__default-rate {
+    .school-results__comparison-section--default-rate {
       display: none;
     }
   }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
index fd47f6a19c4..1820ca9e947 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
@@ -1,5 +1,5 @@
 @college-costs-chart-min: #d14124;
 @college-costs-chart-median: #ff9e1b;
 @college-costs-chart-max: #257675;
-@flyout__transition-speed: 0.25s;
-@flyout__border: var(--gray-40);
+@flyout-transition-speed: 0.25s;
+@flyout-border: var(--gray-40);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
index dc2426c6fdc..771e41b1d64 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
@@ -16,11 +16,11 @@
   }
 
   .content {
-    &_main {
+    &__main {
       padding-top: 0;
       padding-bottom: 0;
 
-      button.a-btn.a-btn__link {
+      button.a-btn.a-btn--link {
         border-bottom: none;
       }
 
@@ -30,20 +30,20 @@
       }
     }
 
-    &_sidebar a {
+    &__sidebar a {
       border-bottom-width: 1px;
     }
   }
 
   .information-right,
   .information-wrong,
-  .offer-part_content-positive-cost,
-  .offer-part_content-negative-cost,
+  .offer-part__content-positive-cost,
+  .offer-part__content-negative-cost,
   .evaluate,
   .question,
   .get-options,
-  .followup__no-not-sure,
-  .followup__yes,
+  .followup--no-not-sure,
+  .followup--yes,
   .next-steps {
     display: none;
   }
@@ -56,46 +56,46 @@
 }
 
 .step {
-  &_heading {
+  &__heading {
     .heading-2();
   }
 
-  &_intro {
+  &__intro {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .heading-3();
-    });
+         .heading-3();
+       });
   }
 }
 
 // A bottom border for the sections in step 3 that use a special grid (11 columns plus bleeding into one gutter)
 .offer-part::after,
-.criteria_wrapper::after {
+.criteria__wrapper::after {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    display: block;
-    height: 1px;
-    border-right: 0;
-    border-left: 0;
-    margin-right: 0;
-    position: absolute;
-    bottom: 0;
-    right: @grid_gutter-width / 2;
-    left: @grid_gutter-width / 2;
-    z-index: 10;
-    background-color: var(--gray-40);
-    content: ' ';
-  });
+       display: block;
+       height: 1px;
+       border-right: 0;
+       border-left: 0;
+       margin-right: 0;
+       position: absolute;
+       bottom: 0;
+       right: @grid_gutter-width / 2;
+       left: @grid_gutter-width / 2;
+       z-index: 10;
+       background-color: var(--gray-40);
+       content: ' ';
+     });
 
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    width: unit( (11 / @grid_total-columns) * 100, %);
-  });
+       width: unit( (11 / @grid_total-columns) * 100, %);
+     });
 }
 
 /* ==========================================================================
-   Tool intro
-   ========================================================================== */
+      Tool intro
+      ========================================================================== */
 
 .understanding-financial-aid-offer .m-hero__image {
   background-image: url('/static/apps/paying-for-college/img/intro-195.png');
@@ -108,28 +108,28 @@
 }
 
 /* ==========================================================================
-   Verify offer
-   ========================================================================== */
+      Verify offer
+      ========================================================================== */
 
 .verify {
   margin-top: unit(20px / @base-font-size-px, em);
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    margin-top: unit(30px / @base-font-size-px, em);
-  });
+       margin-top: unit(30px / @base-font-size-px, em);
+     });
 
-  &_wrapper {
+  &__wrapper {
     margin-bottom: unit(20px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-      margin-bottom: unit(45px / @base-font-size-px, em);
-    });
+         .grid__nested-col-group();
+         margin-bottom: unit(45px / @base-font-size-px, em);
+       });
   }
 
-  &_content {
+  &__content {
     dt,
     dd {
       display: block;
@@ -137,85 +137,85 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(9);
-    });
+         .grid__column(9);
+       });
 
     .respond-to-min(@bp-lg-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
   }
 
-  &_prompt {
+  &__prompt {
     .heading-2();
     margin-bottom: unit(30px / @font-size, em);
   }
 
-  &_school,
-  &_location {
+  &__school,
+  &__location {
     .heading-3();
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-bottom: unit(5px / @font-size, em);
-    });
+         margin-bottom: unit(5px / @font-size, em);
+       });
   }
-  &_school {
+  &__school {
     margin-bottom: 0;
     font-weight: bold;
   }
 
-  &_list {
+  &__list {
     margin-top: unit(15px / @base-font-size-px, em);
     margin-bottom: unit(15px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-top: unit(20px / @base-font-size-px, em);
-    });
+         margin-top: unit(20px / @base-font-size-px, em);
+       });
   }
 
-  &_heading,
-  &_label {
+  &__heading,
+  &__label {
     .heading-5();
     margin-bottom: 0;
   }
 
-  &_value {
+  &__value {
     margin-left: 0;
   }
 
-  &_value + &_heading {
+  &__value + &__heading {
     padding-top: unit(15px / @x-small-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      padding-top: unit(20px / @x-small-font-size-px, em);
-    });
+         padding-top: unit(20px / @x-small-font-size-px, em);
+       });
   }
 
-  &_estimate {
+  &__estimate {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(8);
-      border: none;
-    });
+         .grid__column(8);
+         border: none;
+       });
   }
 
-  &_controls {
+  &__controls {
     margin-top: unit(30px / @base-font-size-px, em);
     text-align: center;
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      text-align: left;
-    });
+         text-align: left;
+       });
   }
 
-  &_wrong-info-btn {
+  &__wrong-info-btn {
     font-size: 1em;
   }
 
@@ -225,56 +225,56 @@
 }
 
 /* ==========================================================================
-   Instructions
-   ========================================================================== */
+      Instructions
+      ========================================================================== */
 
 .instructions {
   margin-top: unit(30px / @base-font-size-px, em);
 
-  &_wrapper {
+  &__wrapper {
     padding-bottom: unit(5px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-      padding-bottom: unit(20px / @base-font-size-px, em);
-    });
+         .grid__nested-col-group();
+         padding-bottom: unit(20px / @base-font-size-px, em);
+       });
   }
 
-  &_content {
+  &__content {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
   }
 
-  &_subheading {
+  &__subheading {
     .heading-4();
   }
 
-  &_about-wrapper {
+  &__about-wrapper {
     padding-top: unit(20px / @base-font-size-px, em);
     padding-bottom: unit(20px / @base-font-size-px, em);
     margin-top: unit(30px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(5);
-      .grid__push(1);
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-    });
+         .grid__column(5);
+         .grid__push(1);
+         padding-top: 0;
+         padding-bottom: 0;
+         margin-top: 0;
+       });
   }
 
-  &_about-heading {
+  &__about-heading {
     .heading-5();
   }
 }
 
 /* ==========================================================================
-   Offer and expenses forms
-   ========================================================================== */
+      Offer and expenses forms
+      ========================================================================== */
 
 .aid-form {
   @aid-form-left-inset: 40px;
@@ -282,76 +282,76 @@
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    margin-top: 0;
-  });
+       margin-top: 0;
+     });
 
   .respond-to-min(@bp-lg-min, {
-    padding-left: unit(@aid-form-left-inset / @base-font-size-px, em);
-  });
+       padding-left: unit(@aid-form-left-inset / @base-font-size-px, em);
+     });
 
-  &_heading {
+  &__heading {
     margin-bottom: unit(20px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      padding-bottom: unit(5px / @base-font-size-px, em);
-      border-bottom: 1px solid var(--gray-40);
-    });
+         padding-bottom: unit(5px / @base-font-size-px, em);
+         border-bottom: 1px solid var(--gray-40);
+       });
   }
 
-  &_title {
+  &__title {
     margin-bottom: unit(5px / 18px, em);
   }
 
-  &_caption {
+  &__caption {
     margin-bottom: 0;
     font-size: @small-font-size-px;
   }
 
-  &_label-wrapper,
-  .form-label_text-wrapper {
+  &__label-wrapper,
+  .form-label__text-wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(12);
-    });
+         .grid__column(12);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(15,24);
-    });
+         .grid__column(15,24);
+       });
 
-    .aid-form_definition {
+    .aid-form__definition {
       margin-bottom: unit(5px / @small-font-size-px, em);
     }
   }
 
-  &_input-wrapper {
+  &__input-wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(12);
-    });
+         .grid__column(12);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(9,24);
-    });
+         .grid__column(9,24);
+       });
   }
 
-  &_input {
+  &__input {
     box-sizing: border-box;
     width: 100%;
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      max-width: unit(280px / @base-font-size-px, em);
-    });
+         max-width: unit(280px / @base-font-size-px, em);
+       });
 
-    &__currency {
+    &--currency {
       text-align: right;
     }
 
-    &__percent,
-    &__time {
+    &--percent,
+    &--time {
       width: unit(65px / @base-font-size-px, em);
       text-align: right;
     }
@@ -364,13 +364,13 @@
       opacity: 1;
     }
 
-    &&__error {
+    &&--error {
       border-color: var(--red-80);
       border-width: unit(2px / @base-font-size-px, em);
     }
   }
 
-  &_calc-error {
+  &__calc-error {
     font-size: unit(@small-font-size-px / @base-font-size-px, em);
     line-height: 1.5;
     margin-top: unit(5px / @base-font-size-px, em);
@@ -382,20 +382,20 @@
     }
   }
 
-  &_unit {
+  &__unit {
     display: inline-block;
     margin-top: unit(6px / @base-font-size-px, em);
     margin-left: unit(10px / @base-font-size-px, em);
   }
 
-  &_equals-line {
+  &__equals-line {
     margin-top: unit(15px / @base-font-size-px, em);
     margin-bottom: unit(5px / @base-font-size-px, em);
     background-color: var(--black);
   }
 
-  &_summary,
-  &_summary.column-well_content {
+  &__summary,
+  &__summary.column-well__content {
     padding-top: unit(20px / @base-font-size-px, em);
     padding-right: (@grid_gutter-width / 2);
     padding-bottom: unit(20px / @base-font-size-px, em);
@@ -407,75 +407,75 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      padding-top: 0;
-      padding-right: @grid_gutter-width;
-      padding-bottom: 0;
-      padding-left: @grid_gutter-width;
-      margin-top: 0;
-      margin-right: 0;
-      margin-left: 0;
-    });
+         padding-top: 0;
+         padding-right: @grid_gutter-width;
+         padding-bottom: 0;
+         padding-left: @grid_gutter-width;
+         margin-top: 0;
+         margin-right: 0;
+         margin-left: 0;
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      margin-right: -@grid_gutter-width;
-      margin-left: -@grid_gutter-width;
-    });
+         margin-right: -@grid_gutter-width;
+         margin-left: -@grid_gutter-width;
+       });
   }
 
-  &_summary-heading {
+  &__summary-heading {
     padding-bottom: unit(5px / @font-size, em);
     border-bottom: 1px solid var(--black);
     .heading-4();
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .heading-5();
-    });
+         .heading-5();
+       });
   }
 
-  &_definition {
+  &__definition {
     font-size: unit(@small-font-size-px / @base-font-size-px, em);
   }
 
-  &_group-header {
+  &__group-header {
     margin-bottom: unit(20px / @base-font-size-px, em);
 
     .respond-to-min(@bp-lg-min, {
-      margin-left: unit(-@aid-form-left-inset / @base-font-size-px, em);
-    });
+         margin-left: unit(-@aid-form-left-inset / @base-font-size-px, em);
+       });
   }
 
-  &_inline-subtotal {
+  &__inline-subtotal {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      display: none;
-    });
+         display: none;
+       });
   }
 
   .form-group + .form-group {
     margin-top: unit(60px / @base-font-size-px, em);
   }
 
-  .form-group_item {
+  .form-group__item {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
   }
 
-  .form-group_item + .form-group_item {
+  .form-group__item + .form-group__item {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-top: unit(20px / @base-font-size-px, em);
-    });
+         margin-top: unit(20px / @base-font-size-px, em);
+       });
   }
 
   .form-label {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      margin-top: unit(4px / @base-font-size-px, em);
-    });
+         margin-top: unit(4px / @base-font-size-px, em);
+       });
   }
 
   .form-label-header {
@@ -490,12 +490,12 @@
     padding-bottom: unit(5px / @small-font-size-px, em);
     border-bottom: 1px solid var(--gray-40);
 
-    & + .aid-form_definition {
+    & + .aid-form__definition {
       margin-top: unit(-5px / @small-font-size-px, em);
     }
   }
 
-  .form-label + .aid-form_definition {
+  .form-label + .aid-form__definition {
     margin-top: unit(-5px / @small-font-size-px, em);
   }
 }
@@ -507,64 +507,64 @@
   margin-bottom: unit(15px / @font-size, em);
   .heading-4();
 
-  &_sign {
+  &__sign {
     display: inline-block;
     margin-right: unit(5px / @line-item-font-size, em);
     font-size: unit(@line-item-font-size / @font-size, em);
   }
 
-  &_currency {
+  &__currency {
     position: absolute;
     right: unit(88px / @font-size, em);
   }
 
-  &_explanation {
+  &__explanation {
     display: block;
     margin-top: unit(5px / @line-item-font-size, em);
     font-size: unit(14px / @line-item-font-size, em);
   }
 
-  &_title {
+  &__title {
     .grid__column(7);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(8);
-    });
+         .grid__column(8);
+       });
   }
 
-  &_value {
+  &__value {
     .grid__column(5);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(5);
-    });
+         .grid__column(5);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(4);
-    });
+         .grid__column(4);
+       });
   }
 
-  &_amount {
+  &__amount {
     float: right;
   }
 
-  &__total {
+  &--total {
     margin-bottom: 0;
   }
 
@@ -574,136 +574,136 @@
 }
 
 /* ==========================================================================
-   Review your first year offer
-   ========================================================================== */
+      Review your first year offer
+      ========================================================================== */
 
 .review {
   margin-top: unit(45px / @base-font-size-px, em);
 
-  &_wrapper {
+  &__wrapper {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
 
     & + .criteria {
       margin-top: unit(30px / @base-font-size-px, em);
     }
   }
 
-  &_intro {
+  &__intro {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
   }
 }
 
 .offer-part {
   /* padding-top, z-index, and background color need to be set here to make
-     sticky sidebars work correctly */
+        sticky sidebars work correctly */
   padding-top: unit(45px / @base-font-size-px, em);
   z-index: 200;
   background-color: #fff;
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    .grid__nested-col-group();
-    padding-bottom: unit(30px / @base-font-size-px, em);
-  });
+       .grid__nested-col-group();
+       padding-bottom: unit(30px / @base-font-size-px, em);
+     });
 
-  &_intro {
+  &__intro {
     margin-bottom: unit(15px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(12);
-    });
+         .grid__column(12);
+       });
   }
 
-  &_intro-wrapper {
+  &__intro-wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
   }
 
-  &_intro-content {
+  &__intro-content {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(12);
-    });
+         .grid__column(12);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     .respond-to-min(@bp-lg-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
   }
 
-  &_heading {
+  &__heading {
     .heading-3();
   }
 
-  &_form-wrapper {
+  &__form-wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
   }
 
-  &_summary-wrapper {
+  &__summary-wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-      padding-top: unit(30px / @base-font-size-px, em);
-      margin-top: 0;
-    });
+         .grid__column(6);
+         padding-top: unit(30px / @base-font-size-px, em);
+         margin-top: 0;
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(4);
-      .grid__push(1);
+         .grid__column(4);
+         .grid__push(1);
 
-      &.is_stuck {
-        .grid__column(4);
-        .grid__push(7);
-        margin-left: -20px;
-      }
+         &.is__stuck {
+           .grid__column(4);
+           .grid__push(7);
+           margin-left: -20px;
+         }
 
-      &.is_stuck.is_bottomed {
-        margin-left: 0;
-      }
-    });
+         &.is__stuck.is__bottomed {
+           margin-left: 0;
+         }
+       });
 
     .line-item {
       .respond-to-range(@bp-sm-min, @bp-inline-sign-min, {
-        font-size: unit(16px / @base-font-size-px, em);
-      });
+           font-size: unit(16px / @base-font-size-px, em);
+         });
     }
   }
 
-  &_terms {
+  &__terms {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(12);
-    });
+         .grid__column(12);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(15,24);
-      margin-top: unit(-15px / @base-font-size-px, em);
-    });
+         .grid__column(15,24);
+         margin-top: unit(-15px / @base-font-size-px, em);
+       });
   }
 
-  &_term {
+  &__term {
     margin-top: unit(15px / @base-font-size-px, em);
     margin-bottom: unit(5px / @base-font-size-px, em);
   }
@@ -721,12 +721,12 @@
     padding-bottom: 0;
   }
 
-  .aid-form_summary {
+  .aid-form__summary {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      padding-top: unit(30px / @base-font-size-px, em);
-      padding-bottom: unit(30px / @base-font-size-px, em);
-    });
+         padding-top: unit(30px / @base-font-size-px, em);
+         padding-bottom: unit(30px / @base-font-size-px, em);
+       });
   }
 }
 
@@ -739,8 +739,8 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      display: block;
-    });
+         display: block;
+       });
   }
 
   .column-well::after {
@@ -749,17 +749,17 @@
 }
 
 .future {
-  .aid-form_summary.debt-summary {
+  .aid-form__summary.debt-summary {
     margin-top: 0;
     background-color: var(--gold-40);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      padding-bottom: 0;
-    });
+         padding-bottom: 0;
+       });
   }
 
-  .aid-form_summary.big-picture {
+  .aid-form__summary.big-picture {
     background-color: var(--gold-20);
   }
 
@@ -769,7 +769,7 @@
 }
 
 .loans {
-  &_line {
+  &__line {
     border-top: 1px dotted var(--gray-40);
     margin-top: unit(30px / @base-font-size-px, em);
     margin-bottom: unit(15px / @base-font-size-px, em);
@@ -777,8 +777,8 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-top: unit(15px / @base-font-size-px, em);
-    });
+         margin-top: unit(15px / @base-font-size-px, em);
+       });
   }
 }
 
@@ -786,18 +786,18 @@
   border-bottom: 1px dotted var(--gray-40);
   margin-bottom: unit(15px / @base-font-size-px, em);
 
-  &_heading {
+  &__heading {
     border-bottom: 1px solid var(--gray-40);
     margin-bottom: unit(15px / @base-font-size-px, em);
     position: relative;
   }
 
-  &_heading-text {
+  &__heading-text {
     .heading-4();
   }
 
-  &_remove-btn,
-  &_add-btn {
+  &__remove-btn,
+  &__add-btn {
     border-bottom: none;
     font-size: 1em;
 
@@ -808,14 +808,14 @@
     }
   }
 
-  &_remove-btn {
+  &__remove-btn {
     position: absolute;
     top: unit(-8px / @base-font-size-px, em);
     right: 0;
     font-size: 1em;
   }
 
-  &_add-btn {
+  &__add-btn {
     margin-top: unit(20px / @base-font-size-px, em);
     margin-right: 0;
     margin-bottom: unit(30px / @base-font-size-px, em);
@@ -823,49 +823,49 @@
     text-align: left;
   }
 
-  &_loan + &_loan {
+  &__loan + &__loan {
     margin-top: unit(45px / @base-font-size-px, em);
   }
 }
 
 .debt-summary {
-  .aid-form_summary-heading {
+  .aid-form__summary-heading {
     .heading-3();
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .heading-5();
-    });
+         .heading-5();
+       });
   }
 }
 
 /* ==========================================================================
-   Evaluating your offer
-   ========================================================================== */
+      Evaluating your offer
+      ========================================================================== */
 
 .evaluate {
   margin-top: unit(45px / @base-font-size-px, em);
 
-  &_wrapper {
+  &__wrapper {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
 
     & + .criteria {
       margin-top: unit(30px / @base-font-size-px, em);
     }
   }
 
-  &_intro {
+  &__intro {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
   }
 }
 
@@ -873,40 +873,40 @@
   margin-top: unit(30px / @base-font-size-px, em);
 
   .respond-to-min(@bp-graph-cols-min, {
-    margin-top: unit(45px / @base-font-size-px, em);
-  });
+       margin-top: unit(45px / @base-font-size-px, em);
+     });
 
-  &_heading {
+  &__heading {
     .heading-3();
   }
 
-  &_wrapper {
+  &__wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
 
     &::after {
       .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-        display: none;
-      });
+           display: none;
+         });
     }
   }
 
-  &_intro {
+  &__intro {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-graph-cols-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(5);
-    });
+         .grid__column(5);
+       });
   }
 
   & + & {
@@ -914,127 +914,127 @@
     border-top: 1px solid var(--gray-20);
 
     .respond-to-min(@bp-graph-cols-min, {
-      padding-top: 0;
-      border-top: none;
-    });
+         padding-top: 0;
+         border-top: none;
+       });
   }
 }
 
 .metric {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    .grid__column(10);
-  });
+       .grid__column(10);
+     });
 
   .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-    padding-bottom: 0;
-  });
+       padding-bottom: 0;
+     });
 
   .respond-to-min(@bp-graph-cols-min, {
-    .grid__column(6);
-    padding-top: unit(30px / @base-font-size-px, em);
-  });
+       .grid__column(6);
+       padding-top: unit(30px / @base-font-size-px, em);
+     });
 
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .grid__column(4);
-    .grid__push(2);
-  });
+       .grid__column(4);
+       .grid__push(2);
+     });
 
-  &_heading {
+  &__heading {
     .heading-4();
   }
 
-  &_explanation {
+  &__explanation {
     margin-bottom: unit(15px / 14px, em);
     font-size: unit(14px / @base-font-size-px, em);
   }
 
-  &_notification {
+  &__notification {
     margin-bottom: unit(15px / @base-font-size-px, em);
 
-    .cf-notification_text,
-    .cf-notification_icon {
+    .cf-notification__text,
+    .cf-notification__icon {
       display: none;
     }
 
-    &__no-you,
-    &__no-average,
-    &__no-data {
+    &--no-you,
+    &--no-average,
+    &--no-data {
       padding-left: 11px;
     }
 
-    &__better .metric_notification_text__better,
-    &__same .metric_notification_text__same,
-    &__worse .metric_notification_text__worse,
-    &__no-you .metric_notification_text__no-you,
-    &__no-average .metric_notification_text__no-average,
-    &__no-data .metric_notification_text__no-data {
+    &--better .metric__notification-text-better,
+    &--same .metric__notification-text-same,
+    &--worse .metric__notification-text-worse,
+    &--no-you .metric__notification-text-no-you,
+    &--no-average .metric__notification-text-no-average,
+    &--no-data .metric__notification-text-no-data {
       display: block;
     }
 
-    &.cf-notification .cf-notification_icon {
+    &.cf-notification .cf-notification__icon {
       display: inline-block;
     }
 
-    p + .cf-notification_text {
+    p + .cf-notification__text {
       margin-top: 0;
     }
   }
 
-  &_link {
+  &__link {
     border-top: 1px solid var(--gray-40);
     margin-top: 30px;
     padding-top: 30px;
   }
 
-  &.column-well__not-stacked {
+  &.column-well--not-stacked {
     .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-      padding-top: 0;
-    });
+         padding-top: 0;
+       });
   }
 
-  &.column-well__not-stacked::after {
+  &.column-well--not-stacked::after {
     .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-      display: none;
-    });
+         display: none;
+       });
   }
 
-  .column-well_content {
+  .column-well__content {
     .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-      padding-right: 0;
-      padding-left: 0;
-    });
+         padding-right: 0;
+         padding-left: 0;
+       });
   }
 }
 
 .salary-and-debt {
   @salary-and-debt-font-size: 18px;
 
-  &_projection {
+  &__projection {
     .grid__nested-col-group();
     max-width: unit(380px / @base-font-size-px, em);
     margin-bottom: unit(20px / @base-font-size-px, em);
   }
 
-  &_projection-name {
+  &__projection-name {
     .grid__column(7);
     .heading-4();
   }
 
-  &_projection-value {
+  &__projection-value {
     .grid__column(5);
     .heading-4();
     text-align: right;
   }
 
-  &_explanation {
+  &__explanation {
     display: block;
     margin-top: unit(5px / @salary-and-debt-font-size, em);
     font-size: unit(14px / @salary-and-debt-font-size, em);
   }
 
-  &_payment-term {
+  &__payment-term {
     margin-bottom: unit(30px / @base-font-size-px, em);
 
     label {
@@ -1046,33 +1046,33 @@
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        margin-left: 0;
-      });
+           margin-left: 0;
+         });
 
       .respond-to-min(@bp-lg-min, {
-        line-height: normal;
-      });
+           line-height: normal;
+         });
     }
   }
 }
 
 .debt-burden {
-  &_projection {
+  &__projection {
     .grid__nested-col-group();
     max-width: unit(380px / @base-font-size-px, em);
     margin-bottom: unit(20px / @base-font-size-px, em);
   }
 
-  &_projection-name {
+  &__projection-name {
     .grid__column(7);
   }
 
-  &_projection-value {
+  &__projection-value {
     .grid__column(5);
     text-align: right;
   }
 
-  &_payment-term {
+  &__payment-term {
     margin-bottom: unit(30px / @base-font-size-px, em);
 
     label {
@@ -1084,12 +1084,12 @@
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        margin-left: 0;
-      });
+           margin-left: 0;
+         });
 
       .respond-to-min(@bp-lg-min, {
-        line-height: normal;
-      });
+           line-height: normal;
+         });
     }
   }
 }
@@ -1099,23 +1099,23 @@
   padding-top: unit(10px / @base-font-size-px, em);
   margin-bottom: unit(30px / @base-font-size-px, em);
 
-  &_part {
+  &__part {
     float: left;
   }
 
-  &_part__loan {
+  &__part--loan {
     width: 25%;
   }
 
-  &_part__income {
+  &__part--income {
     width: 25%;
   }
 
-  &_part__percent {
+  &__part--percent {
     width: 20%;
   }
 
-  &_symbol {
+  &__symbol {
     @symbol-font-size-px: 36px;
     margin-top: unit(3px / @symbol-font-size-px, em);
     width: 15%;
@@ -1124,7 +1124,7 @@
     text-align: center;
   }
 
-  &_number {
+  &__number {
     font-size: unit(18px / @base-font-size-px, em);
   }
 }
@@ -1150,45 +1150,45 @@
   margin-bottom: unit(10px / @base-font-size-px, em);
   position: relative;
 
-  &_point {
+  &__point {
     width: 100%;
     position: absolute;
   }
 
-  &_label,
-  &_value {
+  &__label,
+  &__value {
     position: absolute;
     top: 0;
     background-color: var(--white);
 
     .respond-to-min(@bp-graph-cols-min, {
-      background-color: var(--gray-5);
-    });
+         background-color: var(--gray-5);
+       });
   }
 
-  &_label {
+  &__label {
     width: @bar-graph-label-width;
     left: 0;
     z-index: 10;
   }
 
-  &_value {
+  &__value {
     min-width: @bar-graph-value-min-width;
     padding-left: 8px;
     right: 0;
   }
 
-  &_line {
+  &__line {
     width: 100%;
     border-top-width: 3px;
     position: absolute;
   }
 
-  &_number {
+  &__number {
     display: inline-block;
   }
 
-  &_bar {
+  &__bar {
     width: @bar-graph-width;
     height: @bar-graph-height;
     margin-left: -@bar-graph-line-overhang;
@@ -1198,26 +1198,26 @@
     background-color: var(--gray-10);
 
     .respond-to-range(@bp-graph-cols-min, @bp-med-max, {
-      width: @bar-graph-width-sm;
-      border-right: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
-      border-left: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
-    });
+         width: @bar-graph-width-sm;
+         border-right: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
+         border-left: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
+       });
 
     // Graph bars need to get really skinny at some screen sizes
     .respond-to-range(@bp-graph-cols-min, 759px, {
-      width: @bar-graph-width-xs;
-      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-    });
+         width: @bar-graph-width-xs;
+         border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+         border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+       });
 
     .respond-to-range(901px, 929px, {
-      width: @bar-graph-width-xs;
-      border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-      border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-    });
+         width: @bar-graph-width-xs;
+         border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+         border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
+       });
   }
 
-  &_top-label {
+  &__top-label {
     width: @bar-graph-top-label-width;
     margin-left: -(@bar-graph-top-label-width - @bar-graph-width) / 2 - @bar-graph-line-overhang;
     position: absolute;
@@ -1228,20 +1228,20 @@
     text-align: center;
   }
 
-  &_point__you {
+  &__point--you {
     font-size: unit(@bar-graph-you-font-size / @base-font-size-px, em);
 
-    .bar-graph_line {
+    .bar-graph__line {
       border-top-color: var(--black);
       border-top-style: solid;
       top: unit((@bar-graph-you-font-size + @bar-graph-line-top-cheat) / 2, px);
     }
   }
 
-  &_point__average {
+  &__point--average {
     color: var(--gray-dark);
 
-    .bar-graph_line {
+    .bar-graph__line {
       border-top-color: var(--gray-dark);
       border-top-style: dotted;
       top: unit(
@@ -1251,19 +1251,19 @@
     }
   }
 
-  &__equal &_point__average {
+  &--equal &__point--average {
     display: none;
   }
 
-  &__missing-you {
+  &--missing-you {
     display: none;
   }
 
-  &__missing-average &_point__average {
+  &--missing-average &__point--average {
     display: none;
   }
 
-  &__high-point &_top-label {
+  &--high-point &__top-label {
     display: none;
   }
 
@@ -1274,18 +1274,18 @@
   }
 }
 
-#content_expenses-nat-salary {
+#content__expenses-nat-salary {
   display: none;
 }
 
 /* ==========================================================================
-   Estimated monthly expenses
-   ========================================================================== */
+      Estimated monthly expenses
+      ========================================================================== */
 
-.debt-burden .column-well_content {
+.debt-burden .column-well__content {
   .respond-to-min(@bp-graph-cols-min, {
-    position: absolute;
-  });
+       position: absolute;
+     });
 }
 
 .estimated-expenses {
@@ -1297,108 +1297,108 @@
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    .grid__column(10);
-    padding-bottom: 0;
-    border-top: 1px solid var(--gray-40);
-  });
+       .grid__column(10);
+       padding-bottom: 0;
+       border-top: 1px solid var(--gray-40);
+     });
 
   .respond-to-min(@bp-graph-cols-min, {
-    .grid__column(6);
-    padding-top: 0;
-    border-top: none;
-    margin-top: unit(15px / @base-font-size-px, em);
-    margin-bottom: unit(45px / @base-font-size-px, em);
-  });
-
-  &_region {
+       .grid__column(6);
+       padding-top: 0;
+       border-top: none;
+       margin-top: unit(15px / @base-font-size-px, em);
+       margin-bottom: unit(45px / @base-font-size-px, em);
+     });
+
+  &__region {
     margin-bottom: unit(20px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-      border-width: 0;
-    });
+         .grid__column(6);
+         border-width: 0;
+       });
   }
 
   .aid-form {
     margin-top: 0;
 
-    &_heading {
+    &__heading {
       .respond-to-range(@bp-sm-min, @bp-graph-cols-min, {
-        border-bottom: none;
-      });
+           border-bottom: none;
+         });
     }
 
-    .form-label_text-wrapper {
+    .form-label__text-wrapper {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        .grid__column(12);
-      });
+           .grid__column(12);
+         });
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        .grid__column(12,24);
-      });
+           .grid__column(12,24);
+         });
     }
 
-    &_input-wrapper {
+    &__input-wrapper {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        .grid__column(12);
-      });
+           .grid__column(12);
+         });
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        .grid__column(12,24);
-      });
+           .grid__column(12,24);
+         });
     }
 
-    &_sign {
+    &__sign {
       .grid__column(3,24);
       border-width: 0;
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        .grid__column(3);
-        border-width: 0px;
-      });
+           .grid__column(3);
+           border-width: 0px;
+         });
     }
 
-    &_input {
+    &__input {
       max-width: none;
       width: 80%;
 
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        width: 85%;
-      });
+           width: 85%;
+         });
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        width: 75%;
-      });
+           width: 75%;
+         });
     }
 
-    &_summary {
+    &__summary {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        padding-left: 0;
-        margin-top: unit(30px / @base-font-size-px, em);
-        margin-left: 0;
-        background-color: transparent;
-      });
+           padding-left: 0;
+           margin-top: unit(30px / @base-font-size-px, em);
+           margin-left: 0;
+           background-color: transparent;
+         });
 
       // Tablet only.
       .respond-to-range(@bp-sm-min, @bp-sm-max, {
-        padding-right: 0;
-      });
+           padding-right: 0;
+         });
 
       .respond-to-min(@bp-lg-min, {
-        padding-left: unit(40px / @base-font-size-px, em);
-      });
+           padding-left: unit(40px / @base-font-size-px, em);
+         });
     }
 
-    &_summary-heading {
+    &__summary-heading {
       .heading-4();
       margin-bottom: unit(10px / @font-size, em);
       text-transform: none;
@@ -1406,21 +1406,21 @@
   }
 
   .line-item {
-    &_title {
+    &__title {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        .grid__column(8);
-      });
+           .grid__column(8);
+         });
     }
 
-    &_value {
+    &__value {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        .grid__column(4);
-      });
+           .grid__column(4);
+         });
     }
 
-    &_sign {
+    &__sign {
       position: absolute;
       right: unit(100px / @base-font-size-px, em);
     }
@@ -1439,13 +1439,13 @@
 
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    top: -100em;
-  });
+       top: -100em;
+     });
 }
 
 /* ==========================================================================
-   Continue to step 2, and the big question
-   ========================================================================== */
+      Continue to step 2, and the big question
+      ========================================================================== */
 
 .continue,
 .question {
@@ -1456,84 +1456,84 @@
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    padding-top: unit(30px / @base-font-size-px, em);
-    padding-bottom: unit(15px / @base-font-size-px, em);
-    margin-top: unit(45px / @base-font-size-px, em);
-  });
+       padding-top: unit(30px / @base-font-size-px, em);
+       padding-bottom: unit(15px / @base-font-size-px, em);
+       margin-top: unit(45px / @base-font-size-px, em);
+     });
 
-  &_wrapper {
+  &__wrapper {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
   }
 
-  &_content {
+  &__content {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(8);
-    });
+         .grid__column(8);
+       });
   }
 
-  &_answers,
-  &_controls {
+  &__answers,
+  &__controls {
     margin-top: unit(20px / @base-font-size-px, em);
     margin-bottom: unit(20px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-top: unit(30px / @base-font-size-px, em);
-      margin-bottom: unit(30px / @base-font-size-px, em);
-    });
+         margin-top: unit(30px / @base-font-size-px, em);
+         margin-bottom: unit(30px / @base-font-size-px, em);
+       });
   }
 }
 
 /* ==========================================================================
-   You have options
-   ========================================================================== */
+      You have options
+      ========================================================================== */
 
 .get-options {
   margin-top: unit(45px / @base-font-size-px, em);
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    padding-bottom: unit(30px / @base-font-size-px, em);
-  });
+       padding-bottom: unit(30px / @base-font-size-px, em);
+     });
 
-  &_wrapper {
+  &__wrapper {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
   }
 
-  &_wrapper + &_wrapper {
+  &__wrapper + &__wrapper {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
   }
 
-  &_intro {
+  &__intro {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(8);
-    });
+         .grid__column(8);
+       });
   }
 
-  .step_intro {
+  .step__intro {
     margin-bottom: 0;
   }
 
-  .step_intro + p {
+  .step__intro + p {
     margin-top: unit(20px / @base-font-size-px, em);
   }
 
@@ -1542,34 +1542,34 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      display: block;
-    });
+         display: block;
+       });
   }
 
-  &__settlement {
+  &--settlement {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(8);
-    });
+         .grid__column(8);
+       });
   }
 
-  &__sidebar {
+  &--sidebar {
     margin-top: unit(60px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__column(6);
-    });
+         .grid__column(6);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(4);
-    });
+         .grid__column(4);
+       });
   }
 }
 
@@ -1578,228 +1578,228 @@
 
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .grid__column(4);
-  });
-
-  &__maximize-grants,
-  &__reduce-costs,
-  &__different-program,
-  &__transfer-credits,
-  &__work-while-studying,
-  &__explore-schools {
+       .grid__column(4);
+     });
+
+  &--maximize-grants,
+  &--reduce-costs,
+  &--different-program,
+  &--transfer-credits,
+  &--work-while-studying,
+  &--explore-schools {
     background-position: center 30px;
     background-size: 150px;
     background-repeat: no-repeat;
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      background-position: center 60px;
-    });
+         background-position: center 60px;
+       });
   }
 
-  &__maximize-grants {
-    background-image: url('/static/apps/paying-for-college/img/maximize-grants_150.png');
+  &--maximize-grants {
+    background-image: url('/static/apps/paying-for-college/img/maximize-grants__150.png');
   }
 
-  &__reduce-costs {
-    background-image: url('/static/apps/paying-for-college/img/reduce-costs_150.png');
+  &--reduce-costs {
+    background-image: url('/static/apps/paying-for-college/img/reduce-costs__150.png');
   }
 
-  &__different-program {
-    background-image: url('/static/apps/paying-for-college/img/different-program_150.png');
+  &--different-program {
+    background-image: url('/static/apps/paying-for-college/img/different-program__150.png');
   }
 
-  &__transfer-credits {
-    background-image: url('/static/apps/paying-for-college/img/transfer-credits_150.png');
+  &--transfer-credits {
+    background-image: url('/static/apps/paying-for-college/img/transfer-credits__150.png');
   }
 
-  &__explore-schools {
-    background-image: url('/static/apps/paying-for-college/img/explore-schools_150.png');
+  &--explore-schools {
+    background-image: url('/static/apps/paying-for-college/img/explore-schools__150.png');
   }
 
-  &__work-while-studying {
-    background-image: url('/static/apps/paying-for-college/img/work-while-studying_150.png');
+  &--work-while-studying {
+    background-image: url('/static/apps/paying-for-college/img/work-while-studying__150.png');
   }
 
   @media (min-resolution: 192dpi) {
-    &__maximize-grants {
-      background-image: url('/static/apps/paying-for-college/img/maximize-grants_300.png');
+    &--maximize-grants {
+      background-image: url('/static/apps/paying-for-college/img/maximize-grants__300.png');
     }
 
-    &__reduce-costs {
-      background-image: url('/static/apps/paying-for-college/img/reduce-costs_300.png');
+    &--reduce-costs {
+      background-image: url('/static/apps/paying-for-college/img/reduce-costs__300.png');
     }
 
-    &__different-program {
-      background-image: url('/static/apps/paying-for-college/img/different-program_300.png');
+    &--different-program {
+      background-image: url('/static/apps/paying-for-college/img/different-program__300.png');
     }
 
-    &__transfer-credits {
-      background-image: url('/static/apps/paying-for-college/img/transfer-credits_300.png');
+    &--transfer-credits {
+      background-image: url('/static/apps/paying-for-college/img/transfer-credits__300.png');
     }
 
-    &__explore-schools {
-      background-image: url('/static/apps/paying-for-college/img/explore-schools_300.png');
+    &--explore-schools {
+      background-image: url('/static/apps/paying-for-college/img/explore-schools__300.png');
     }
 
-    &__work-while-studying {
-      background-image: url('/static/apps/paying-for-college/img/work-while-studying_300.png');
+    &--work-while-studying {
+      background-image: url('/static/apps/paying-for-college/img/work-while-studying__300.png');
     }
   }
 
   // Add padding on top of the heading for the 150px illustration
   // X-small and small screens: 150px + 30px padding above and below the image
   // Meidum and larger screens: 150px + 60px padding above and below the image
-  &_heading {
+  &__heading {
     padding-top: unit(210px / @font-size, em);
     .heading-4();
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      padding-top: unit(270px / @font-size, em);
-    });
+         padding-top: unit(270px / @font-size, em);
+       });
   }
 
-  &__take-action-header {
+  &--take-action-header {
     .heading-3();
   }
 
   // Top borders on all but the first option on small screens and only the second row of options on larger screens
-  & + & &_heading {
+  & + & &__heading {
     border-top: 1px solid var(--gray-40);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      border-top: none;
-    });
+         border-top: none;
+       });
   }
 
-  & + & + & &_heading {
+  & + & + & &__heading {
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      border-top: 1px solid var(--gray-40);
-    });
+         border-top: 1px solid var(--gray-40);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      border-top: none;
-    });
+         border-top: none;
+       });
   }
 
-  & + & + & + & &_heading {
+  & + & + & + & &__heading {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      border-top: 1px solid var(--gray-40);
-    });
+         border-top: 1px solid var(--gray-40);
+       });
   }
 
   // Settlement school modifications
-  &__settlement {
+  &--settlement {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(1, 2);
-    });
+         .grid__column(1, 2);
+       });
 
     // Top borders on all but the first option on small screens and only the second row of options on larger screens
-    & + & .option_heading {
+    & + & .option__heading {
       border-top: 1px solid var(--gray-40);
 
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        border-top: none;
-      });
+           border-top: none;
+         });
     }
 
-    & + & + & .option_heading {
+    & + & + & .option__heading {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
-        border-top: 1px solid var(--gray-40);
-      });
+           border-top: 1px solid var(--gray-40);
+         });
     }
 
-    & + & + & + & .option_heading {
+    & + & + & + & .option__heading {
       // Desktop and above.
       .respond-to-min(@bp-med-min, {
-        border-top: 1px solid var(--gray-40);
-      });
+           border-top: 1px solid var(--gray-40);
+         });
     }
   }
 }
 
 /* ==========================================================================
-   Next steps
-   ========================================================================== */
+      Next steps
+      ========================================================================== */
 
 .next-steps {
   padding-bottom: unit(30px / @base-font-size-px, em);
 
-  &_wrapper {
+  &__wrapper {
     margin-top: unit(30px / @base-font-size-px, em);
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      margin-top: unit(45px / @base-font-size-px, em);
-      .grid__nested-col-group();
-    });
+         margin-top: unit(45px / @base-font-size-px, em);
+         .grid__nested-col-group();
+       });
   }
 
-  &_intro {
+  &__intro {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(10);
-    });
+         .grid__column(10);
+       });
 
     .respond-to-min(@bp-xl-min, {
-      .grid__column(7);
-    });
+         .grid__column(7);
+       });
   }
 
-  &_list {
+  &__list {
     margin-top: unit(45px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      .grid__nested-col-group();
-    });
+         .grid__nested-col-group();
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      margin-top: unit(60px / @base-font-size-px, em);
-    });
+         margin-top: unit(60px / @base-font-size-px, em);
+       });
   }
 
-  &_list-item {
+  &__list-item {
     margin-top: unit(30px / @base-font-size-px, em);
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-top: 0;
-      .grid__column(9);
-    });
+         margin-top: 0;
+         .grid__column(9);
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      .grid__column(4);
-    });
+         .grid__column(4);
+       });
   }
 
-  &_list-intro {
+  &__list-intro {
     .heading-4();
   }
 
-  &_controls {
+  &__controls {
     margin-top: unit(20px / @base-font-size-px, em);
     margin-left: -2.5em;
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      margin-left: 0;
-    });
+         margin-left: 0;
+       });
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      margin-top: unit(30px / @base-font-size-px, em);
-    });
+         margin-top: unit(30px / @base-font-size-px, em);
+       });
   }
 
   .content__line {
@@ -1807,8 +1807,8 @@
 
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
-      display: block;
-    });
+         display: block;
+       });
   }
 }
 
@@ -1817,13 +1817,13 @@
 
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    padding-left: 2em;
-  });
+       padding-left: 2em;
+     });
 }
 
 /* ==========================================================================
-   Scripted Elements
-   ========================================================================== */
+      Scripted Elements
+      ========================================================================== */
 
 [data-multi_year='false'] {
   display: none;
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/CostsGroup.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/CostsGroup.js
index 06975c3ec0e..f81fe25dd56 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/CostsGroup.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/CostsGroup.js
@@ -20,8 +20,8 @@ const BASE_CLASS = 'o-costs-group';
  */
 function CostsGroup(element) {
   const _dom = checkDom(element, BASE_CLASS);
-  const _contentDom = _dom.querySelector(`.${BASE_CLASS}_content`);
-  const _targetDom = _dom.querySelector(`.${BASE_CLASS}_header`);
+  const _contentDom = _dom.querySelector(`.${BASE_CLASS}__content`);
+  const _targetDom = _dom.querySelector(`.${BASE_CLASS}__header`);
   let _transition;
   let _flyout;
 
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 c98c7391992..2d384746838 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
@@ -110,7 +110,7 @@ const appView = {
    */
   init: () => {
     appView._actionPlanChoices = document.querySelectorAll(
-      '.action-plan_choices .m-form-field input.a-radio',
+      '.action-plan__choices .m-form-field input.a-radio',
     );
     appView._didThisHelpChoices = document.querySelectorAll(
       '[data-impact] .m-form-field input.a-radio',
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/financial-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/financial-view.js
index f2dc19f3d3f..c739b3a21bc 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/financial-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/financial-view.js
@@ -31,7 +31,7 @@ const financialView = {
   _handleSeeStepsClick: function () {
     // TODO - This could all be written better.
     const selected = document.querySelector(
-      '.action-plan_choices .highlighted input[checked="true"]',
+      '.action-plan__choices .highlighted input[checked="true"]',
     );
     document.querySelectorAll('[data-action-plan]').forEach((elem) => {
       elem.classList.remove('active');
@@ -40,7 +40,7 @@ const financialView = {
       .querySelector('[data-action-plan="' + selected.value + '"]')
       .classList.add('active');
     document
-      .querySelector('.action-plan .action-plan_feeling-gauge')
+      .querySelector('.action-plan .action-plan__feeling-gauge')
       .classList.add('active');
   },
 
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 212950d708f..b837e9a53d0 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');
       });
@@ -80,7 +80,7 @@ const navigationView = {
    */
   _showAndHideSections: function (activeName) {
     const query =
-      '.college-costs_tool-section[data-tool-section="' + activeName + '"]';
+      '.college-costs__tool-section[data-tool-section="' + activeName + '"]';
     const activeSection = document.querySelector(query);
 
     this._sections.forEach((elem) => {
@@ -131,15 +131,15 @@ const navigationView = {
     this._navListItems = body.querySelectorAll('.o-secondary-nav li');
     this._navItems = body.querySelectorAll('[data-nav_item]');
     this._nextButton = body.querySelector(
-      '.college-costs_tool-section_buttons .btn__next-step',
+      '.college-costs__tool-section-buttons .btn__next-step',
     );
     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',
+      '.college-costs__intro-segment .btn__get-started',
     );
-    this._appSegment = body.querySelector('.college-costs_app-segment');
-    this._sections = body.querySelectorAll('.college-costs_tool-section');
+    this._appSegment = body.querySelector('.college-costs__app-segment');
+    this._sections = body.querySelectorAll('.college-costs__tool-section');
     this._stateDomElem = document.querySelector('main.college-costs');
     this._affordingChoices = document.querySelectorAll(
       '.affording-loans-choices .m-form-field',
@@ -235,7 +235,7 @@ function _handleNextButtonClick() {
     );
     updateState.nextSection();
     window.scrollTo(0, document.querySelector('.college-costs').offsetTop);
-    document.querySelector('.college-costs_tool-section.active h2').focus();
+    document.querySelector('.college-costs__tool-section.active h2').focus();
   }
 }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/school-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/school-view.js
index aba1e915fbc..898c6220369 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/school-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/school-view.js
@@ -136,7 +136,7 @@ const schoolView = {
   init: (body) => {
     // Set up nodeLists
     schoolView._searchSection = body.querySelector(
-      '#college-costs_school-search',
+      '#college-costs__school-search',
     );
     schoolView._searchBox = body.querySelector('#search__school-input');
     schoolView._searchResults = body.querySelector('#search-results');
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js
index 2d3ea4718b1..7ba1f567091 100755
--- a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js
@@ -84,7 +84,7 @@ const app = {
             // Update expenses model bases on region and salary
             const region = schoolValues.BLSAverage.slice(0, 2);
             $('#bls-region-select').val(region).change();
-            $step2.removeClass('a-btn__disabled');
+            $step2.removeClass('a-btn--disabled');
             $step2.find('svg').remove();
             $step2.elements[0].removeAttribute('disabled');
           });
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
index 695dd3905c6..6928982cbf6 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
@@ -37,14 +37,14 @@
 }
 
 .prepaid-agreements-search {
-  .o-multiselect_label {
+  .o-multiselect__label {
     word-break: break-word;
   }
 
   padding-top: 0 !important;
 
   .filters {
-    &_applied {
+    &__applied {
       padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
     }
     .o-multiselect__choices {
@@ -62,7 +62,7 @@
     }
   });
 
-  .search_wrapper {
+  .search__wrapper {
     label.h2 {
       display: block;
       max-width: none;
@@ -70,14 +70,14 @@
     }
   }
 
-  .search_results {
+  .search__results {
     .content__sidebar {
       .o-expandable:nth-child(4n) {
         border-bottom: none;
       }
     }
 
-    .results_item {
+    .results__item {
       h4 {
         max-width: none;
       }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
index 3f5fea95962..028804faf70 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
@@ -1,18 +1,18 @@
-.search_wrapper {
+.search__wrapper {
   &.o-well {
     max-width: 100%;
   }
 }
 
-.filters_applied,
-.filters_tags {
+.filters__applied,
+.filters__tags {
   display: flex;
   gap: 15px;
   align-items: baseline;
   flex-wrap: wrap;
 }
 
-.filters_applied {
+.filters__applied {
   padding: 30px 15px;
   border-bottom: 1px solid var(--gray-40);
 
@@ -21,7 +21,7 @@
   }
 }
 
-.search_results {
+.search__results {
   .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
@@ -62,7 +62,7 @@
     border-top: 1px solid var(--gray-40);
     padding-top: 0;
   }
-  .results_count {
+  .results__count {
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
@@ -74,16 +74,16 @@
       padding-bottom: 15px;
     }
   }
-  .results_list {
+  .results__list {
     padding: unit(@grid_gutter-width / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     li {
       list-style-type: none;
     }
   }
-  .results_item {
+  .results__item {
     margin: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    & + .results_item {
+    & + .results__item {
       margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
       h4 {
         padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
@@ -91,7 +91,7 @@
       }
     }
   }
-  .results_paginator {
+  .results__paginator {
     margin: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     padding: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     max-width: 41.875rem;
@@ -100,14 +100,14 @@
 
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
-  .search_results {
+  .search__results {
     .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .results_count {
+    .results__count {
       border-left: 1px solid var(--gray-40);
     }
   }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
index 3302b964a55..d670368f1a5 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
@@ -21,12 +21,12 @@
   });
 
   // TODO - this will be updated to data-open='true' in newer expandables.
-  .o-expandable_target__expanded {
+  .o-expandable__target--expanded {
     .o-expandable__cue-close {
       display: block;
     }
   }
-  .o-expandable_target__collapsed {
+  .o-expandable__target--collapsed {
     .o-expandable__cue-open {
       display: block;
     }
@@ -79,7 +79,7 @@
     unit( 15px / @base-font-size-px, em );
   });
 
-  .o-regs3k-navigation_header {
+  .o-regs3k-navigation__header {
     display: none;
 
     // Tablet and below.
@@ -99,11 +99,11 @@
 .o-secondary-nav__link {
   color: var(--pacific);
 
-  &__current {
+  &--current {
     color: var(--black);
   }
 
-  &__parent {
+  &--parent {
     .heading-4();
     font-size: 1em;
     font-weight: 300;
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
index a49e812fbf3..dd8d599a62b 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
@@ -5,21 +5,21 @@
 
 /* Search page */
 
-.search_wrapper {
+.search__wrapper {
   &.o-well {
     max-width: 100%;
   }
 }
 
-.filters_applied,
-.filters_tags {
+.filters__applied,
+.filters__tags {
   display: flex;
   gap: 15px;
   align-items: baseline;
   flex-wrap: wrap;
 }
 
-.filters_applied {
+.filters__applied {
   padding: 30px 15px;
   border-bottom: 1px solid var(--gray-40);
 
@@ -28,7 +28,7 @@
   }
 }
 
-.search_results {
+.search__results {
   .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
@@ -58,7 +58,7 @@
       &:nth-child(3n) {
         border-bottom: none;
       }
-      &_label {
+      &__label {
         .h4;
         margin-bottom: 0;
       }
@@ -75,7 +75,7 @@
     border-top: 1px solid var(--gray-40);
     padding-top: 0;
   }
-  .results_count {
+  .results__count {
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
@@ -87,16 +87,16 @@
       padding-bottom: 15px;
     }
   }
-  .results_list {
+  .results__list {
     padding: unit(@grid_gutter-width / @base-font-size-px, em)
       unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     li {
       list-style-type: none;
     }
   }
-  .results_item {
+  .results__item {
     margin: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    & + .results_item {
+    & + .results__item {
       margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
       h4 {
         padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
@@ -104,7 +104,7 @@
       }
     }
   }
-  .results_paginator {
+  .results__paginator {
     margin: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     padding: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
     max-width: 41.875rem;
@@ -113,14 +113,14 @@
 
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
-  .search_results {
+  .search__results {
     .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .results_count {
+    .results__count {
       border-left: 1px solid var(--gray-40);
     }
   }
@@ -145,7 +145,7 @@
     display: block;
   }
   .a-tag .cf-icon-svg,
-  .a-btn.filters_clear {
+  .a-btn.filters__clear {
     display: none;
   }
 }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
index 1e13712529d..fe6847d6c5e 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
@@ -22,17 +22,17 @@
   padding-top: @regs-wayfinder-padding-top;
   padding-bottom: unit(15px / @base-font-size-px, rem);
 
-  &_link {
+  &__link {
     display: inline-block;
     margin-bottom: 0;
   }
 
-  &_link:visited {
+  &__link:visited {
     border-color: @link-underline;
     color: @link-text;
   }
 
-  &_sidebar {
+  &__sidebar {
     display: none;
   }
 
@@ -44,14 +44,14 @@
 
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    &_wrapper {
+    &__wrapper {
       display: grid;
       grid-template-columns: 1fr 3fr;
       max-width: 1170px;
       margin: 0 auto;
     }
 
-    &_sidebar {
+    &__sidebar {
       display: inline-block;
       position: relative;
 
@@ -65,13 +65,13 @@
       }
     }
 
-    &_content {
+    &__content {
       padding-left: unit(30px / @base-font-size-px, rem);
       display: flex;
       justify-content: space-between;
     }
 
-    &_version {
+    &__version {
       text-align: right;
     }
   });
diff --git a/cfgov/unprocessed/apps/regulations3k/js/analytics.js b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
index c16ae6a059c..1012d19c544 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/analytics.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
@@ -34,7 +34,7 @@ const getExpandable = (event) => {
  */
 const getExpandableState = (expandable) => {
   let state = 'close';
-  if (expandable.classList.contains('o-expandable_target__expanded')) {
+  if (expandable.classList.contains('o-expandable__target--expanded')) {
     state = 'open';
   }
   return state;
diff --git a/cfgov/unprocessed/apps/regulations3k/js/index.js b/cfgov/unprocessed/apps/regulations3k/js/index.js
index 882b033eb5b..a5eddb7b8fb 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/index.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/index.js
@@ -9,8 +9,8 @@ const regContent = document.querySelector('.regulations3k #content__main');
  * toggleSecondaryNav - Show/hide the secondary nav on smaller screens
  */
 const toggleSecondaryNav = () => {
-  navHeader.classList.toggle('o-expandable_target__collapsed');
-  navHeader.classList.toggle('o-expandable_target__expanded');
+  navHeader.classList.toggle('o-expandable__target--collapsed');
+  navHeader.classList.toggle('o-expandable__target--expanded');
   navItems.classList.toggle('u-hide-on-stacked');
 };
 
@@ -41,7 +41,7 @@ const init = () => {
       });
   }
   if (navHeader) {
-    navHeader.classList.add('o-expandable_target__collapsed');
+    navHeader.classList.add('o-expandable__target--collapsed');
     navItems.classList.add('u-hide-on-stacked');
     bindSecondaryNav();
     bindAnalytics();
diff --git a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
index afd1899d68c..8b459e4d396 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
@@ -197,7 +197,7 @@ const updateWayfinder = function (scroll, wayfinder, mainContent) {
     let sectionFormattedTitle;
     let wayfinderInfo;
     const wayfinderLink = wayfinder.querySelector(
-      '.o-regulations-wayfinder_link',
+      '.o-regulations-wayfinder__link',
     );
     const currentParagraph = getCurrentParagraph(
       scrollY() + wayfinderOffset,
@@ -224,9 +224,9 @@ const updateWayfinder = function (scroll, wayfinder, mainContent) {
     }
 
     wayfinder.querySelector(
-      '.o-regulations-wayfinder_section-title',
+      '.o-regulations-wayfinder__section-title',
     ).textContent = sectionFormattedTitle;
-    wayfinder.querySelector('.o-regulations-wayfinder_marker').textContent =
+    wayfinder.querySelector('.o-regulations-wayfinder__marker').textContent =
       paragraphMarker;
 
     if (scroll === true && window.location.hash.slice(1) !== '') {
diff --git a/cfgov/unprocessed/apps/regulations3k/js/permalinks.js b/cfgov/unprocessed/apps/regulations3k/js/permalinks.js
index 3058828d72b..a64ae402e37 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/permalinks.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/permalinks.js
@@ -19,7 +19,7 @@ import {
   updateWayfinder,
 } from './permalinks-utils.js';
 
-const wayfinderLink = document.querySelector('.o-regulations-wayfinder_link');
+const wayfinderLink = document.querySelector('.o-regulations-wayfinder__link');
 
 /**
  * init - Initialize the permalink functionality by cataloging all paragraph
diff --git a/cfgov/unprocessed/apps/retirement/css/claiming.less b/cfgov/unprocessed/apps/retirement/css/claiming.less
index 6ec0f4eaf35..339d6893f32 100644
--- a/cfgov/unprocessed/apps/retirement/css/claiming.less
+++ b/cfgov/unprocessed/apps/retirement/css/claiming.less
@@ -1,5 +1,5 @@
 #claiming-social-security {
-  .input-labels_block .cf-icon-svg {
+  .input-labels__block .cf-icon-svg {
     margin-top: 1px;
   }
 
@@ -69,7 +69,7 @@
     margin-bottom: 30px;
   }
 
-  .step-one label.input-labels .input-labels_block {
+  .step-one label.input-labels .input-labels__block {
     display: block;
     margin-bottom: 8px;
   }
@@ -133,7 +133,7 @@
       left: 0;
     }
 
-    .graph_slider {
+    .graph__slider {
       width: 100%;
       position: absolute;
       bottom: 0;
@@ -167,7 +167,7 @@
   }
 
   .claim-canvas__no-slider {
-    .graph_slider {
+    .graph__slider {
       display: none;
     }
 
@@ -315,11 +315,11 @@
     height: 100%;
   }
 
-  .step-two .lifestyle-question_container {
+  .step-two .lifestyle-question__container {
     margin-bottom: 30px;
   }
 
-  .step-two .lifestyle-question_container hr {
+  .step-two .lifestyle-question__container hr {
     margin-top: 0;
   }
 
@@ -503,7 +503,7 @@
       width: 200px !important;
     }
 
-    .step-two .lifestyle-question_container,
+    .step-two .lifestyle-question__container,
     .step-two .lifestyle-response {
       margin-left: 230px;
     }
@@ -567,7 +567,7 @@
       padding-bottom: 30px;
     }
 
-    .graph_slider {
+    .graph__slider {
       bottom: -35px;
     }
 
@@ -623,11 +623,11 @@
       padding-bottom: 30px;
     }
 
-    .step-two .lifestyle-question_container {
+    .step-two .lifestyle-question__container {
       margin-bottom: 0;
     }
 
-    .lifestyle-question_container hr {
+    .lifestyle-question__container hr {
       display: none;
     }
 
@@ -655,7 +655,7 @@
       padding-bottom: 0;
     }
 
-    .question-longevity .lifestyle-question_container {
+    .question-longevity .lifestyle-question__container {
       margin-bottom: 0;
     }
 
diff --git a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
index a729c600c82..e8cbaf62b17 100644
--- a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
+++ b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
@@ -182,9 +182,9 @@ function checkEstimateReady() {
   const s = $('#salary-input').val() !== '';
 
   if (m && d && y && s) {
-    $button.attr('disabled', false).removeClass('a-btn__disabled');
+    $button.attr('disabled', false).removeClass('a-btn--disabled');
   } else {
-    $button.attr('disabled', true).addClass('a-btn__disabled');
+    $button.attr('disabled', true).addClass('a-btn--disabled');
   }
 }
 
@@ -192,7 +192,7 @@ function checkEstimateReady() {
  * Initializes the listener on the slider indicator
  */
 function initIndicator() {
-  const $indicator = $('#graph_slider-input');
+  const $indicator = $('#graph__slider-input');
 
   /* Need both onchange and oninput to work in all browsers
       https://www.impressivewebs.com/onchange-vs-oninput-for-range-sliders/ */
@@ -449,7 +449,7 @@ function setTextByAge() {
  * @param {number} indicatorValue - Value of the range slider.
  */
 function setAgeWithIndicator(indicatorValue) {
-  const $indicator = $('#graph_slider-input');
+  const $indicator = $('#graph__slider-input');
   selectedAge = indicatorValue;
   textlets.selectedAge = gettext(selectedAge);
   // Don't let the user select an age younger than they are now
@@ -468,7 +468,7 @@ function setAgeWithIndicator(indicatorValue) {
  * @param {number} age - The age for the indicator to be set to.
  */
 function moveIndicatorToAge(age) {
-  const indicatorDom = document.querySelector('#graph_slider-input');
+  const indicatorDom = document.querySelector('#graph__slider-input');
   if (age < benefits.currentAge) {
     age = benefits.currentAge;
   }
@@ -522,7 +522,7 @@ function setGraphDimensions() {
 
   $('#claim-canvas, .x-axis-label').width(graphWidth);
   $('#claim-canvas').height(graphHeight);
-  $('#graph_slider-input').width(barWidth * 9 + gutterWidth * 8 + 8);
+  $('#graph__slider-input').width(barWidth * 9 + gutterWidth * 8 + 8);
 }
 
 /**
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 7dfeec18558..c573e3582c4 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
@@ -44,10 +44,10 @@
 }
 
 // Result counts.
-#results-total .ruralCnt,
-#results-total .notRuralCnt,
-#results-total .notFoundCnt,
-#results-total .duplicateCnt {
+#results-total .rural-cnt,
+#results-total .not-rural-cnt,
+#results-total .not-found-cnt,
+#results-total .duplicate-cnt {
   font-size: 3rem;
 }
 
@@ -59,13 +59,13 @@
 // TODO: Overrides to cf-tables should be incorporated into the available
 //       cf-tables styles.
 
-// Override .o-table-wrapper__scrolling table added border.
+// Override .o-table-wrapper--scrolling table added border.
 .o-table table {
   border: none;
   width: 100%;
 }
 // Override zebra-striping of table rows.
-.o-table-wrapper__scrolling table > tbody > tr:nth-child(even) > td {
+.o-table-wrapper--scrolling table > tbody > tr:nth-child(even) > td {
   background: #fff;
 }
 
@@ -80,7 +80,7 @@ tr.data + tr[class=''] {
 }
 
 // Prevent clicking of the SVG in "Show map" from blocking clicks of the toggle.
-.jsLoadMap svg {
+.js-load-map svg {
   pointer-events: none;
 }
 
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/js/address-utils.js b/cfgov/unprocessed/apps/rural-or-underserved-tool/js/address-utils.js
index 6a959586ba8..20da9a2d8ec 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/js/address-utils.js
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/js/address-utils.js
@@ -103,7 +103,7 @@ function render(result) {
   if (rural !== '-') {
     rowHTML = `${rowHTML}
       <a href="#"
-         class="no-decoration hide-print jsLoadMap right"
+         class="no-decoration hide-print js-load-map right"
          data-map="false"
          data-lat="${result.x}"
          data-lon="${result.y}"
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/js/show-map.js b/cfgov/unprocessed/apps/rural-or-underserved-tool/js/show-map.js
index d1900149ffd..f9ac6b783e9 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/js/show-map.js
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/js/show-map.js
@@ -53,16 +53,16 @@ function initializeMap() {
   window.L.mapbox.accessToken = window.cfpbMapboxAccessToken;
 }
 
-// when a.jsLoadMap is clicked
+// when a.js-load-map is clicked
 const resultsMapDom = document.querySelector('#results');
 resultsMapDom.addEventListener('click', function (evt) {
   const target = evt.target;
   let toggleMapLink = target;
-  if (hasClass(target.parentNode, 'jsLoadMap')) {
+  if (hasClass(target.parentNode, 'js-load-map')) {
     toggleMapLink = target.parentNode;
   }
 
-  if (hasClass(toggleMapLink, 'jsLoadMap')) {
+  if (hasClass(toggleMapLink, 'js-load-map')) {
     evt.preventDefault();
 
     // setup vars (data attributes)
diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
index f3fcadea738..a2be1435994 100644
--- a/cfgov/unprocessed/apps/tccp/css/main.less
+++ b/cfgov/unprocessed/apps/tccp/css/main.less
@@ -2,14 +2,14 @@
 @import (reference) 'cfpb-buttons.less';
 
 .respond-to-min(@bp-sm-min, {
-  .o-form_group {
+  .o-form__group {
     max-width: unit((380px / @base-font-size-px), rem);
   }
 });
 
 // @TODO refactor and remove this override
 // See https://github.com/cfpb/consumerfinance.gov/pull/8247
-.o-form_fieldset {
+.o-form__fieldset {
   ul {
     list-style: none;
     padding-left: 0;
@@ -38,11 +38,11 @@
   }
 }
 
-.a-checkbox + .a-label > .a-label_helper {
+.a-checkbox + .a-label > .a-label__helper {
   display: none;
 }
 
-.a-checkbox:checked + .a-label > .a-label_helper {
+.a-checkbox:checked + .a-label > .a-label__helper {
   display: grid;
   grid-column-start: 1;
   grid-column-end: 3;
@@ -50,15 +50,15 @@
   margin-bottom: 1em;
 }
 
-.a-label_helper .m-list {
+.a-label__helper .m-list {
   list-style: square;
   padding-left: 1.125em;
 
-  .m-list_item {
+  .m-list__item {
     margin-left: unit((15px / @base-font-size-px), rem);
   }
 
-  .m-list_item__has-icon {
+  .m-list__item--has-icon {
     display: flex;
     margin-left: 0;
 
@@ -75,7 +75,7 @@
 }
 
 .tool-features {
-  .cf-icon-svg__credit-card-round {
+  .cf-icon-svg--credit-card-round {
     color: var(--gold);
   }
 
@@ -300,7 +300,7 @@
 // "Show more results" functionality for JS users
 // Only show the first 10 results
 html.js .o-filterable-list-results__partial {
-  .o-card-group_cards {
+  .o-card-group__cards {
     .m-card:nth-child(10) {
       border-bottom: 1px solid @table-border;
       margin-bottom: unit((10px / @base-font-size-px), rem);
@@ -477,7 +477,7 @@ html.js .o-filterable-list-results__partial {
 
 // Hide form submit button for htmx users
 html.js form[hx-boost] {
-  .o-form_group:last-child {
+  .o-form__group:last-child {
     margin-bottom: 0;
   }
 
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less
index 0d0b7635e4c..9fb1581a50b 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less
@@ -2,7 +2,7 @@
 // Custom Form fields styling
 //
 
-.m-form-field__checkbox {
+.m-form-field--checkbox {
   .a-checkbox + .a-label.indeterminate {
     &::before {
       background-image: url('/static/apps/teachers-digital-platform/img/square-gray.png');
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 1098fad3fd7..1849e83fc58 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
@@ -12,10 +12,10 @@
 // Theme variables
 //
 
-// .o-expandable_label
+// .o-expandable__label
 @expandable__label-text: var(--black);
 
-// .o-expandable_cues
+// .o-expandable__cues
 @expandable__cues-text: var(--pacific);
 
 // .o-expandable modifiers
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 fbc8da6f679..9e4fae80e9a 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
@@ -33,7 +33,7 @@
     width: initial;
   }
 
-  .skip-filters__hidden {
+  .skip-filters--hidden {
     display: none;
   }
 
@@ -71,7 +71,7 @@
       margin-bottom: 2px;
     }
 
-    .m-list__unstyled .m-list__unstyled {
+    .m-list--unstyled .m-list--unstyled {
       margin-left: unit(27px / @base-font-size-px, em);
     }
 
@@ -90,7 +90,7 @@
       margin-bottom: 0;
     }
 
-    .m-form-field__checkbox .a-btn__link {
+    .m-form-field--checkbox .a-btn--link {
       border: 0;
     }
   }
@@ -104,7 +104,7 @@
   }
 
   .input-contains-label {
-    &_after:not(.u-hidden) {
+    &__after:not(.u-hidden) {
       // Tablet and above.
       .respond-to-min(@bp-sm-min, {
         display: initial;
@@ -116,7 +116,7 @@
     padding-top: 0;
   }
 
-  .results_count {
+  .results__count {
     padding: unit(15px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em) 0 unit(15px / @base-font-size-px, em);
     border: 1px solid var(--gray-40);
@@ -130,20 +130,20 @@
     });
   }
 
-  .results_count__empty {
+  .results__count--empty {
     background-color: var(--red-20);
     border-left: 1px solid var(--gray-40);
   }
 
-  .results_filters,
-  .results_filters-tags {
+  .results__filters,
+  .results__filters-tags {
     display: flex;
     gap: 15px;
     align-items: baseline;
     flex-wrap: wrap;
   }
 
-  .results_filters {
+  .results__filters {
     padding-top: unit(15px / @base-font-size-px, em);
 
     // Desktop and above.
@@ -154,13 +154,13 @@
     });
   }
 
-  .results_filters-label {
+  .results__filters-label {
     flex-shrink: 0;
     line-height: 2.25;
     font-weight: 600;
   }
 
-  .results_list {
+  .results__list {
     padding: unit(15px / @base-font-size-px, em) 0;
 
     // Desktop and above.
@@ -173,7 +173,7 @@
     }
   }
 
-  .results_footer {
+  .results__footer {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       padding-left: unit( 30px / @base-font-size-px, em );
@@ -206,11 +206,11 @@
     }
   }
 
-  .activity_for {
+  .activity__for {
     font-weight: 500;
   }
 
-  .activity_meta-wrapper {
+  .activity__meta-wrapper {
     justify-content: space-between;
     overflow: auto;
 
@@ -238,7 +238,7 @@
     });
   }
 
-  .activity_meta-key {
+  .activity__meta-key {
     font-size: unit(@base-font-size-px / 16 * 100, %);
     margin: 0;
     text-transform: none;
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js
index 998d00d70f4..14a53bfa1bc 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/ClearableInput.js
@@ -13,7 +13,7 @@ const BASE_CLASS = 'input-contains-label';
 function ClearableInput(element) {
   const _dom = checkDom(element, BASE_CLASS);
   const _inputDom = _dom.querySelector('input');
-  const _clearBtnDom = _dom.querySelector('.' + BASE_CLASS + '_after__clear');
+  const _clearBtnDom = _dom.querySelector(`.${BASE_CLASS}__after--clear`);
 
   let _isClearShowing = true;
 
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
index 8fae1bb7270..a15cc952e27 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
@@ -123,8 +123,8 @@ const Expandable = AtomicComponent.extend({
   },
 
   classes: {
-    targetExpanded: 'o-expandable_target__expanded',
-    targetCollapsed: 'o-expandable_target__collapsed',
+    targetExpanded: 'o-expandable__target--expanded',
+    targetCollapsed: 'o-expandable__target--collapsed',
     group: 'o-expandable-group',
     groupAccordion: 'o-expandable-group__accordion',
   },
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableFacetTransition.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableFacetTransition.js
index c5f1453cf68..375b7f87dcb 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableFacetTransition.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableFacetTransition.js
@@ -4,10 +4,10 @@ import { EventObserver } from '@cfpb/cfpb-atomic-component';
 // Exported constants.
 const CLASSES = {
   CSS_PROPERTY: 'max-height',
-  BASE_CLASS: 'o-expandable-facets_content__transition',
-  EXPANDED: 'o-expandable-facets_content__expanded',
-  COLLAPSED: 'o-expandable-facets_content__collapsed',
-  OPEN_DEFAULT: 'o-expandable-facets_content__onload-open',
+  BASE_CLASS: 'o-expandable-facets__content--transition',
+  EXPANDED: 'o-expandable-facets__content--expanded',
+  COLLAPSED: 'o-expandable-facets__content--collapsed',
+  OPEN_DEFAULT: 'o-expandable-facets__content--onload-open',
 };
 
 /**
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
index e81858f1635..49a7f4d23b3 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 dde50abbd7a..2724e89e7a9 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
@@ -8,11 +8,11 @@ import ExpandableFacetTransition from './ExpandableFacetTransition.js';
 const ExpandableFacets = AtomicComponent.extend({
   ui: {
     base: '.o-expandable-facets',
-    target: '.o-expandable-facets_target',
-    content: '.o-expandable-facets_content',
+    target: '.o-expandable-facets__target',
+    content: '.o-expandable-facets__content',
     header: '.o-expandable__header',
-    facetCheckbox: '.o-expandable-facets_checkbox',
-    facetLabel: '.o-expandable-facets_checkbox ~ .a-label',
+    facetCheckbox: '.o-expandable-facets__checkbox',
+    facetLabel: '.o-expandable-facets__checkbox ~ .a-label',
   },
 
   classes: {
@@ -22,7 +22,7 @@ const ExpandableFacets = AtomicComponent.extend({
   },
 
   events: {
-    'click .o-expandable-facets_target': 'expandableClickHandler',
+    'click .o-expandable-facets__target': 'expandableClickHandler',
   },
 
   transition: null,
@@ -37,10 +37,10 @@ const ExpandableFacets = AtomicComponent.extend({
  */
 function initialize() {
   const customClasses = {
-    BASE_CLASS: 'o-expandable-facets_content__transition',
-    EXPANDED: 'o-expandable-facets_content__expanded',
-    COLLAPSED: 'o-expandable-facets_content__collapsed',
-    OPEN_DEFAULT: 'o-expandable-facets_content__onload-open',
+    BASE_CLASS: 'o-expandable-facets__content--transition',
+    EXPANDED: 'o-expandable-facets__content--expanded',
+    COLLAPSED: 'o-expandable-facets__content--collapsed',
+    OPEN_DEFAULT: 'o-expandable-facets__content--onload-open',
   };
 
   const transition = new ExpandableFacetTransition(
@@ -92,5 +92,5 @@ export default ExpandableFacets;
 
 /**
  * Find .o-expandable-facets, add `is-open` class.
- * Find .o-expandable-facets_target and add a click handler to toggle classes on .o-expandable-facets between `is-open` and `is-closed`.
+ * Find .o-expandable-facets__target and add a click handler to toggle classes on .o-expandable-facets between `is-open` and `is-closed`.
  */
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 1dd3a70303b..909bb41c5c3 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
@@ -19,12 +19,12 @@ let sendEvent = (payload) => {
  */
 const getExpandable = (event) => {
   let el = event.target.closest('.o-expandable__header');
-  el = el ? el : event.target.closest('.o-expandable-facets_target');
+  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-facets_target')
+    el.classList.contains('o-expandable-facets__target')
   ) {
     return el;
   }
@@ -39,7 +39,7 @@ const getExpandable = (event) => {
 const getExpandableState = (expandable) => {
   let state = 'collapse';
   if (
-    expandable.classList.contains('o-expandable_target__expanded') ||
+    expandable.classList.contains('o-expandable__target--expanded') ||
     expandable.classList.contains('is-open')
   ) {
     state = 'expand';
@@ -111,7 +111,7 @@ const handleFilterClick = (event) => {
  * @returns {object|undefined} Event data.
  */
 const handleClearFilterClick = (event) => {
-  const tags = event.currentTarget.querySelector('.results_filters-tags');
+  const tags = event.currentTarget.querySelector('.results__filters-tags');
   if (!tags) return;
   const tag = tags.closest('.a-tag') || event.target;
   if (!tag.classList.contains('a-tag')) {
@@ -150,7 +150,7 @@ const handlePaginationClick = (event) => {
   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');
+  const isDisabled = paginator.classList.contains('a-btn--disabled');
 
   if (isDisabled || (!isNextButton && !isPrevButton && !isGoButton)) {
     return;
@@ -244,7 +244,7 @@ const handleFetchSearchResults = (searchTerm) => {
   }
 
   // Send the keywords that return 0 results to Analytics.
-  const resultsCountBlock = searchContent.querySelector('.results_count');
+  const resultsCountBlock = searchContent.querySelector('.results__count');
   if (resultsCountBlock) {
     const resultsCount = resultsCountBlock.getAttribute('data-results-count');
 
diff --git a/cfgov/unprocessed/css/atoms/partially-styled-link.less b/cfgov/unprocessed/css/atoms/partially-styled-link.less
index 735971224c1..ac15be09f4d 100644
--- a/cfgov/unprocessed/css/atoms/partially-styled-link.less
+++ b/cfgov/unprocessed/css/atoms/partially-styled-link.less
@@ -1,16 +1,16 @@
-.a-link__partially-styled {
+.a-link--partially-styled {
   border-bottom-width: 0;
 
-  &_plain {
+  .a-link__plain {
     color: var(--black);
     border-bottom: 1px dotted transparent;
   }
 
-  &_underlined {
+  .a-link__underlined {
     border-bottom: 1px dotted @link-underline;
   }
 
-  &:visited &_underlined {
+  &:visited .a-link__underlined {
     border-bottom: 1px dotted @link-underline-visited;
   }
 
diff --git a/cfgov/unprocessed/css/enhancements/forms.less b/cfgov/unprocessed/css/enhancements/forms.less
index 24e5309e37b..65e2ad34225 100644
--- a/cfgov/unprocessed/css/enhancements/forms.less
+++ b/cfgov/unprocessed/css/enhancements/forms.less
@@ -6,27 +6,27 @@
     width: 100%;
   }
 
-  &_before ~ .a-text-input {
+  &__before ~ .a-text-input {
     padding-left: unit(30px / @btn-font-size, em);
   }
 
-  &_after ~ .a-text-input {
+  &__after ~ .a-text-input {
     padding-right: unit(30px / @btn-font-size, em);
   }
 
-  &_before,
-  &_after {
+  &__before,
+  &__after {
     position: absolute;
     top: unit(8px / @btn-font-size, em);
     cursor: pointer;
     font-size: unit(@btn-font-size / @base-font-size-px, em);
   }
 
-  &_before {
+  &__before {
     left: unit(12px / @btn-font-size, em);
   }
 
-  &_after {
+  &__after {
     right: unit(14px / @btn-font-size, em);
 
     // Tablet and above.
@@ -36,7 +36,7 @@
   }
 }
 
-// TODO: Move to the DM and update existing o-form__input-w-btn in CF
+// TODO: Move to the DM and update existing o-form--input-w-btn in CF
 
 input {
   .input-with-btn & {
@@ -55,12 +55,12 @@ input {
 
 /*
  * Removes top margin from text input when it follows
- * .a-label__heading, which applies a 10px bottom margin.
+ * .a-label--heading, which applies a 10px bottom margin.
  *
  * TODO: standardize form input spacing so margin is
  * consistently applied to either the label or the input
  */
-.m-form-field .a-label__heading + .a-text-input {
+.m-form-field .a-label--heading + .a-text-input {
   margin-top: 0;
 }
 
diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less
index bde9a3cc298..f534d4807ed 100644
--- a/cfgov/unprocessed/css/enhancements/layout-1-3.less
+++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less
@@ -14,7 +14,7 @@
       .u-layout-grid {
         &__secondary-nav {
           // Hide this element when it has a secondary nav DOM.
-          &:has(nav.o-secondary-nav__no-children) {
+          &:has(nav.o-secondary-nav--no-children) {
             display: none !important;
           }
         }
diff --git a/cfgov/unprocessed/css/enhancements/layout.less b/cfgov/unprocessed/css/enhancements/layout.less
index d2f5f4b9c0c..49907411733 100644
--- a/cfgov/unprocessed/css/enhancements/layout.less
+++ b/cfgov/unprocessed/css/enhancements/layout.less
@@ -2,7 +2,7 @@
 @import (less) './layout-2-1.less';
 @import (less) './layout-1-3.less';
 
-.wrapper__match-content {
+.wrapper--match-content {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
     max-width: @grid_wrapper-width - ( @grid_gutter-width * 2 );
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
index cae6749d028..bbf72b035c8 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.less
@@ -1,8 +1,8 @@
 // TODO: Move the theme variables to /enhancements/ for CF.
 
-@margin__em: unit(@grid_gutter-width / @base-font-size-px, em);
-@margin_half__em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-@mobile_trigger_ht__px: 54px;
+@margin-em: unit(@grid_gutter-width / @base-font-size-px, em);
+@margin-half-em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+@mobile-trigger-ht-px: 54px;
 
 .m-global-search {
   &__trigger {
@@ -64,13 +64,13 @@
   .respond-to-max(@bp-sm-max, {
 
     &__fallback {
-      margin: @margin_half__em;
+      margin: @margin-half-em;
     }
 
     &__trigger {
       padding-top: 5px;
-      height: @mobile_trigger_ht__px;
-      min-width: @mobile_trigger_ht__px;
+      height: @mobile-trigger-ht-px;
+      min-width: @mobile-trigger-ht-px;
 
       &[aria-expanded="true"] {
         background: var(--gray-10);
@@ -105,7 +105,7 @@
 
         box-sizing: border-box;
         width: 100%;
-        padding: @margin__em @margin_half__em @margin_half__em;
+        padding: @margin-em @margin-half-em @margin-half-em;
 
         left: 0;
         z-index: 10;
@@ -136,7 +136,7 @@
     padding-top: 6px;
     padding-bottom: 5px;
     // Match CTA offset from divider.
-    padding-right: @margin_half__em;
+    padding-right: @margin-half-em;
     position: relative;
 
     overflow: hidden;
@@ -154,7 +154,7 @@
     }
 
     &__content {
-      right: @margin_half__em;
+      right: @margin-half-em;
       width: auto;
       // Add margin so that the focus rectangle is not cropped by
       // the hidden overflow of the search container element.
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.less b/cfgov/unprocessed/css/molecules/related-metadata.less
index a06d69eae30..cb48908dd2f 100644
--- a/cfgov/unprocessed/css/molecules/related-metadata.less
+++ b/cfgov/unprocessed/css/molecules/related-metadata.less
@@ -1,4 +1,4 @@
-@margin_half__em: unit(15px / @base-font-size-px, em);
+@margin-half-em: unit(15px / @base-font-size-px, em);
 
 @bullet-font-size__em: unit(15px / @base-font-size-px, em);
 
@@ -9,14 +9,14 @@
 
   // Tablet only.
   .respond-to-range(@bp-sm-min, @bp-sm-max, {
-    border-left: @margin_half__em solid transparent;
-    border-right: @margin_half__em solid transparent;
+    border-left: @margin-half-em solid transparent;
+    border-right: @margin-half-em solid transparent;
   });
 }
 
 .m-related-metadata__item-container {
   &:not(:last-child) {
-    margin-bottom: @margin_half__em * 2;
+    margin-bottom: @margin-half-em * 2;
   }
 
   .status-definitions {
diff --git a/cfgov/unprocessed/css/molecules/tags.less b/cfgov/unprocessed/css/molecules/tags.less
index 866e7954b40..b1468252e77 100755
--- a/cfgov/unprocessed/css/molecules/tags.less
+++ b/cfgov/unprocessed/css/molecules/tags.less
@@ -51,7 +51,7 @@
   }
 
   // Negate the border of the sibling when hovering.
-  &_item:hover + &__item {
+  &__item:hover + &__item {
     a.m-tags--tag {
       border-top: none;
     }
diff --git a/cfgov/unprocessed/css/on-demand/ask.less b/cfgov/unprocessed/css/on-demand/ask.less
index d53cd12df70..691ce9dc52a 100644
--- a/cfgov/unprocessed/css/on-demand/ask.less
+++ b/cfgov/unprocessed/css/on-demand/ask.less
@@ -72,7 +72,7 @@
           margin-top: 0;
         }
 
-        .a-btn__link {
+        .a-btn--link {
           flex-shrink: 0;
           margin-top: 0.5em;
         }
@@ -123,7 +123,7 @@
 
 /* Answer page */
 
-.ask-cfpb-page__answer {
+.ask-cfpb-page--answer {
   .m-notification {
     max-width: 41.875rem;
   }
@@ -174,11 +174,11 @@
     font-weight: 500;
   }
 
-  .m-list__item__last {
+  .m-list__item--last {
     padding-top: unit(7px / @base-font-size-px, em);
   }
 
-  .o-search-bar_input {
+  .o-search-bar__input {
     max-width: 500px;
   }
 
@@ -240,7 +240,7 @@
 
 /* Landing page */
 
-.ask-cfpb-page__landing {
+.ask-cfpb-page--landing {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
     .m-hero {
@@ -255,7 +255,7 @@
     });
   }
 
-  .o-search-bar_input {
+  .o-search-bar__input {
     max-width: 31.25rem;
   }
 
@@ -291,12 +291,12 @@
     max-width: 41.875rem;
   }
 
-  .question_summary {
+  .question__summary {
     border-bottom: 1px solid @block--border-bottom;
   }
 }
 
-.ask-cfpb-page__search {
+.ask-cfpb-page--search {
   .o-search-bar {
     max-width: 41.875rem;
     .a-text-input {
@@ -307,7 +307,7 @@
     }
   }
 
-  .question_summary {
+  .question__summary {
     padding: unit((@grid_gutter-width / 2) / @base-font-size-px, em) 0;
 
     // Desktop and above.
@@ -315,7 +315,7 @@
       padding:  unit( @grid_gutter-width / @base-font-size-px, em ) 0;
     });
 
-    .question_title a {
+    .question__title a {
       font-size: @size-iv;
       border-width: 0;
     }
diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.less b/cfgov/unprocessed/css/on-demand/simple-chart.less
index c3da2474147..4d257f9602b 100644
--- a/cfgov/unprocessed/css/on-demand/simple-chart.less
+++ b/cfgov/unprocessed/css/on-demand/simple-chart.less
@@ -214,7 +214,7 @@
       font-weight: 500;
     }
   }
-  .o-simple-chart_tilemap__legend {
+  .o-simple-chart__tilemap--legend {
     display: none;
     width: 100%;
     height: 60px;
@@ -286,7 +286,7 @@
   transition: fill 0ms;
 }
 
-.highcharts-plot-line.zeroLine {
+.highcharts-plot-line.zero-line {
   fill: unset;
   stroke: black;
   stroke-width: 2px;
diff --git a/cfgov/unprocessed/css/organisms/footer.less b/cfgov/unprocessed/css/organisms/footer.less
index 688b73df796..65708878074 100644
--- a/cfgov/unprocessed/css/organisms/footer.less
+++ b/cfgov/unprocessed/css/organisms/footer.less
@@ -10,7 +10,7 @@
   border-top: 5px solid var(--green);
   background: var(--gray-5);
 
-  &_nav-list {
+  &__nav-list {
     .m-list--links();
 
     .m-list__link {
@@ -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.
@@ -41,7 +41,7 @@
     }
   }
 
-  &_list {
+  &__list {
     .m-list--links();
 
     .m-list__link {
@@ -49,7 +49,7 @@
     }
   }
 
-  &_pre {
+  &__pre {
     position: relative;
     margin-bottom: unit(45px / @base-font-size-px, em);
 
diff --git a/cfgov/unprocessed/css/organisms/full-width-text-group.less b/cfgov/unprocessed/css/organisms/full-width-text-group.less
index 93fd33cbdd3..3ff12045dd5 100644
--- a/cfgov/unprocessed/css/organisms/full-width-text-group.less
+++ b/cfgov/unprocessed/css/organisms/full-width-text-group.less
@@ -48,7 +48,7 @@
       }
     }
 
-    .m-inset__left {
+    .m-inset--left {
       margin-right: unit( @grid_gutter-width / @base-font-size-px, em );
       margin-bottom: unit( 20px / @base-font-size-px, em );
       margin-left: 0;
diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.less
index 8cb28174716..befde640327 100644
--- a/cfgov/unprocessed/css/organisms/header.less
+++ b/cfgov/unprocessed/css/organisms/header.less
@@ -1,5 +1,5 @@
-@margin_half__em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-@mobile_trigger_ht__px: 54px;
+@margin-half-em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+@mobile-trigger-ht-px: 54px;
 @min_app_width__px: 320px;
 
 .o-header {
@@ -12,7 +12,8 @@
   .respond-to-min(@bp-lg-min, {
     min-width: @bp-lg-min;
   });
-  &_content {
+
+  &__content {
     position: relative;
 
     > .wrapper {
@@ -73,10 +74,10 @@
     });
   }
 
-  &_logo {
+  &__logo {
     &-img {
       // Size is to fit 320px minimum width for older iPhones, etc.
-      height: @mobile_trigger_ht__px - 20px;
+      height: @mobile-trigger-ht-px - 20px;
       width: auto;
       // Margin is to bring height to menu trigger's 60px (40 + 10 + 10).
       margin-top: 10px;
@@ -101,7 +102,7 @@
     });
   }
 
-  &__mega-menu &_logo {
+  &__mega-menu &__logo {
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
       .js & {
@@ -109,7 +110,7 @@
         // The margin-left starts inside the 15px padding of the page
         // page already, so a value that matches the width of the trigger
         // will give it the desired spacing to the right of the trigger.
-        margin-left: @mobile_trigger_ht__px;
+        margin-left: @mobile-trigger-ht-px;
       }
     });
   }
diff --git a/cfgov/unprocessed/css/organisms/item-introduction.less b/cfgov/unprocessed/css/organisms/item-introduction.less
index 91c82f63db7..4c49c134d49 100644
--- a/cfgov/unprocessed/css/organisms/item-introduction.less
+++ b/cfgov/unprocessed/css/organisms/item-introduction.less
@@ -1,7 +1,7 @@
 .o-item-introduction {
   margin-bottom: unit(@grid_gutter-width * 2 / @base-font-size-px, rem);
 
-  &_intro {
+  &__intro {
     padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
   }
 
diff --git a/cfgov/unprocessed/css/organisms/mega-menu.less b/cfgov/unprocessed/css/organisms/mega-menu.less
index 19c6d8b19e5..a116b849024 100644
--- a/cfgov/unprocessed/css/organisms/mega-menu.less
+++ b/cfgov/unprocessed/css/organisms/mega-menu.less
@@ -4,7 +4,7 @@
 
 // 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;
+@mobile-trigger-ht-px: 54px;
 
 // TODO: Reduce global scope and reign it in to the menu only if possible.
 body {
@@ -14,8 +14,8 @@ body {
   });
 }
 
-@menu_max_width_px: 1200px;
-@menu_link_hover_bar_px: 5px;
+@menu-max-width-px: 1200px;
+@menu-link-hover-bar-px: 5px;
 
 //
 // ELEMENT STATES
@@ -26,7 +26,10 @@ body {
 //
 
 // Create a bar for hover purposes to the left of an item.
-.u-bar-left( @color, @position: -@menu_link_hover_bar_px - 10px ) {
+// Ignore style linting on the name, because it's not smart enough for mixins.
+/* stylelint-disable selector-class-pattern */
+.u-bar-left( @color, @position: -@menu-link-hover-bar-px - 10px ) {
+  /* stylelint-enable */
   position: relative;
 
   &::before {
@@ -35,7 +38,7 @@ body {
     top: 0;
     content: '';
     background: @color;
-    width: @menu_link_hover_bar_px;
+    width: @menu-link-hover-bar-px;
     height: 100%;
   }
 }
@@ -86,7 +89,7 @@ body {
 // Adjustments for links with icons, desktop.
 .u-hover-link-icon-desktop() {
   &:hover {
-    .u-bar-left( var(--green), -@menu_link_hover_bar_px - 8px );
+    .u-bar-left( var(--green), -@menu-link-hover-bar-px - 8px );
 
     .cf-icon-svg {
       fill: var(--black);
@@ -131,8 +134,8 @@ body {
   .u-focus-rectangle();
 
   &::after {
-    left: -@menu_link_hover_bar_px - 9px;
-    width: calc(100% + @menu_link_hover_bar_px + 6px);
+    left: -@menu-link-hover-bar-px - 9px;
+    width: calc(100% + @menu-link-hover-bar-px + 6px);
   }
 }
 
@@ -141,8 +144,8 @@ body {
   .u-focus-rectangle();
 
   &::after {
-    left: -@menu_link_hover_bar_px - 9px;
-    width: calc(100% + @menu_link_hover_bar_px + 9px);
+    left: -@menu-link-hover-bar-px - 9px;
+    width: calc(100% + @menu-link-hover-bar-px + 9px);
   }
 }
 
@@ -151,8 +154,8 @@ body {
   .u-focus-rectangle();
 
   &::after {
-    left: -@menu_link_hover_bar_px - 7px;
-    width: calc(100% + @menu_link_hover_bar_px + 6px);
+    left: -@menu-link-hover-bar-px - 7px;
+    width: calc(100% + @menu-link-hover-bar-px + 6px);
   }
 }
 
@@ -161,8 +164,8 @@ body {
   .u-focus-rectangle();
 
   &::after {
-    left: -@menu_link_hover_bar_px;
-    width: calc(100% + @menu_link_hover_bar_px + 5px);
+    left: -@menu-link-hover-bar-px;
+    width: calc(100% + @menu-link-hover-bar-px + 5px);
   }
 }
 
@@ -171,8 +174,8 @@ body {
   .u-focus-rectangle();
 
   &::after {
-    left: -@menu_link_hover_bar_px - 9px;
-    width: calc(100% + @menu_link_hover_bar_px + 14px);
+    left: -@menu-link-hover-bar-px - 9px;
+    width: calc(100% + @menu-link-hover-bar-px + 14px);
   }
 }
 
@@ -196,7 +199,7 @@ body {
 .u-current-link-icon-desktop() {
   &,
   &:hover {
-    .u-bar-left( var(--black), -@menu_link_hover_bar_px - 8px );
+    .u-bar-left( var(--black), -@menu-link-hover-bar-px - 8px );
   }
 }
 
@@ -222,7 +225,7 @@ body {
     margin-bottom: 0;
   }
 
-  &_content {
+  &__content {
     &-overview-heading {
       margin-bottom: 0;
       font-size: unit(18px / @base-font-size-px, rem);
@@ -230,7 +233,7 @@ body {
     }
 
     // …however, show the icons in featured links.
-    &-item__has-icon {
+    &-item--has-icon {
       .cf-icon-svg {
         display: inline-block;
       }
@@ -246,7 +249,7 @@ body {
     }
 
     // Featured menu content is link items with icons.
-    &-item__has-icon {
+    &-item--has-icon {
       // Align the icon and text.
       display: flex;
       align-items: baseline;
@@ -265,7 +268,7 @@ body {
   }
 
   // 1st-level menu.
-  &_content-1 {
+  &__content-1 {
     &-link {
       // Colors for :link, :visited, :hover, :focus, :active.
       .u-link--colors( var(--black) );
@@ -275,8 +278,8 @@ body {
   }
 
   // 2nd and 3rd-level menus.
-  &_content-2,
-  &_content-3 {
+  &__content-2,
+  &__content-3 {
     &-overview {
       display: block;
       border-bottom: 1px solid var(--gray-40);
@@ -296,24 +299,24 @@ body {
 
   // Mobile only.
   .respond-to-max(@bp-xs-max, {
-    &_trigger {
+    &__trigger {
       margin-left: -15px;
     }
   });
 
   // Tablet only.
   .respond-to-range(@bp-sm-min, @bp-sm-max, {
-    &_trigger {
+    &__trigger {
       margin-left: -30px;
     }
   });
 
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
-    &_trigger {
+    &__trigger {
       display: none;
-      height: @mobile_trigger_ht__px;
-      min-width: @mobile_trigger_ht__px;
+      height: @mobile-trigger-ht-px;
+      min-width: @mobile-trigger-ht-px;
       padding-top: 14px;
       padding-bottom: 14px;
 
@@ -368,7 +371,7 @@ body {
 
     // Menu flyout.
     // All menus - Tablet/Mobile.
-    &_content {
+    &__content {
       .u-drop-shadow-after();
 
       display: none;
@@ -457,7 +460,7 @@ body {
           display: none;
         }
 
-        &__has-children &-icon-post {
+        &--has-children &-icon-post {
           display: block;
 
           position: absolute;
@@ -473,19 +476,19 @@ body {
         .u-hover-link-mobile();
         .u-focus-link-mobile();
 
-        &__current {
+        &--current {
           .u-current-link-mobile();
         }
       }
     }
 
     // 1st-level menu - Tablet/Mobile.
-    &_content-1 {
+    &__content-1 {
       display: block;
 
       .js & {
         // Offset for height of trigger button.
-        top: @mobile_trigger_ht__px;
+        top: @mobile-trigger-ht-px;
       }
 
       &-list-group {
@@ -495,7 +498,7 @@ body {
     }
 
     // 2nd-level menu - Tablet/Mobile.
-    &_content-2 {
+    &__content-2 {
 
       // Remove final border line of last list item.
       &-lists &-list-group:last-child &-list:last-child &-item:last-child {
@@ -504,7 +507,7 @@ body {
     }
 
     // 3rd-level menu - Tablet/Mobile.
-    &_content-3 {
+    &__content-3 {
       // TODO: There is similar code set on all three menus.
       //       Investigate if it can be combined.
       // Remove final border line of last list item.
@@ -516,8 +519,8 @@ body {
     }
 
     // Submenus - Tablet/Mobile.
-    &_content-2,
-    &_content-3 {
+    &__content-2,
+    &__content-3 {
       .u-move-right();
       position: absolute;
       left: 0;
@@ -531,16 +534,16 @@ body {
     }
 
     // Group heading - Tablet/Mobile
-    &_group-heading {
+    &__group-heading {
       // !important is used to override a highly specific ul+.h5 rule in base.less
       margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, rem ) !important;
 
-      &__hidden {
+      &--hidden {
         .u-visually-hidden();
       }
 
       // add border between title and following list
-      &:not(&__hidden) + ul {
+      &:not(&--hidden) + ul {
         border-top: 1px solid var(--gray-40);
       }
     }
@@ -567,17 +570,17 @@ body {
       box-shadow: 0px 1px 0px 0px var(--gray-40);
     }
 
-    &_trigger {
+    &__trigger {
       display: none;
     }
 
     // Hide the  >  icon next to menu items on desktop…
-    &_content-link-icon-post {
+    &__content-link-icon-post {
       display: none;
     }
 
     // 1st-level menu - Desktop.
-    &_content-1 {
+    &__content-1 {
       &[data-open="true"] {
         .o-mega-menu__content-1-wrapper {
           display: block;
@@ -729,32 +732,32 @@ body {
         }
 
         // Add padding to accommodate caret.
-        &__has-children {
+        &--has-children {
           // Remove 4px to accommodate longer titles.
           padding-right: unit( ( @grid_gutter-width - 4px ) / @base-font-size-px, em );
         }
 
-        &__current {
+        &--current {
           // Change the selection bar to black.
           &:after {
             background-color: var(--black);
           }
         }
 
-        &__current[aria-expanded="true"]:after,
-        &__current:active:after {
+        &--current[aria-expanded="true"]:after,
+        &--current:active:after {
           background-color: transparent;
         }
       }
     }
 
     // Hide last columns headings at desktop sizes.
-    &_content-2-lists &_content-2-list-group:last-child &_group-heading {
+    &__content-2-lists &__content-2-list-group:last-child &__group-heading {
       display: none;
     }
 
     // 2nd-level menu - Desktop.
-    &_content-2 {
+    &__content-2 {
       overflow: hidden;
       position: absolute;
       left: 0;
@@ -815,7 +818,7 @@ body {
       // Move the first link in each mega menu list group up a bit so that
       // it aligns with the featured links box. We do this instead of
       // removing the top padding to preserve the link hover state.
-      &-list:not( &-list__featured ) &-item:first-child &-link {
+      &-list:not( &-list--featured ) &-item:first-child &-link {
         margin-top: unit( -12px / @base-font-size-px, em );
       }
 
@@ -827,7 +830,7 @@ body {
 
         .u-hover-link-desktop();
 
-        &__current {
+        &--current {
           .u-current-link-desktop();
         }
       }
@@ -844,7 +847,7 @@ body {
       }
 
       // Featured item has a highlight box around it.
-      &-list__featured ul {
+      &-list--featured ul {
         // Style the featured item box.
         padding-right: unit( 13px / @base-font-size-px, em );
         padding-top: unit( 30px / @base-font-size-px, em );
@@ -855,7 +858,7 @@ body {
         box-sizing: border-box;
       }
 
-      &-list__featured &-link {
+      &-list--featured &-link {
         display: flex;
         padding: 0;
         left: 0;
@@ -868,7 +871,7 @@ body {
         }
       }
 
-      &-list__featured &-item {
+      &-list--featured &-item {
         margin-bottom: unit( 15px / @base-font-size-px, em );
 
         &:last-child {
@@ -876,43 +879,43 @@ body {
         }
       }
 
-      &-item__has-icon {
+      &-item--has-icon {
         // Pad in featured items from their icons.
         padding-left: unit( 13px / @base-font-size-px, em );
       }
 
       // Set up hover state for link with an icon.
-      &-item__has-icon &-link {
+      &-item--has-icon &-link {
         .u-hover-link-icon-desktop();
         .u-focus-link-icon-desktop();
 
-        &__current {
+        &--current {
           .u-current-link-icon-desktop();
         }
       }
 
       // Remove hover bar for featured item link.
-      &-list__featured &-link {
+      &-list--featured &-link {
         .u-hover-link-featured-desktop();
         .u-focus-link-featured-desktop();
       }
     }
 
     // 3rd-level menu - Desktop.
-    &_content-3 {
+    &__content-3 {
       display: none;
     }
 
-    &_group-heading {
+    &__group-heading {
       margin-bottom: unit( 30px / @base-font-size-px, em );
 
-      &__hidden {
+      &--hidden {
         visibility: hidden;
       }
     }
 
     // Hide global header CTA container and eyebrow at desktop size.
-    &_content-1-item:first-child,
+    &__content-1-item:first-child,
     .m-global-eyebrow {
       display: none;
     }
@@ -924,18 +927,18 @@ body {
 
   // Xtra-Large desktop size. 1261px.
   .respond-to-min(@bp-xl-min + @grid_gutter-width, {
-    width: @menu_max_width_px;
+    width: @menu-max-width-px;
 
     // Horizontal rule to overlay on top of header rule so that
     // rule is not hidden when menu opens.
     &:after {
       left: -@grid_gutter-width;
-      width: @menu_max_width_px + ( @grid_gutter-width * 2 );
+      width: @menu-max-width-px + ( @grid_gutter-width * 2 );
     }
 
-    &_content-2 {
+    &__content-2 {
       left: -@grid_gutter-width;
-      width: @menu_max_width_px + ( @grid_gutter-width * 2 );
+      width: @menu-max-width-px + ( @grid_gutter-width * 2 );
     }
 
   });
@@ -943,7 +946,7 @@ body {
   // Normalize second level width between 901px and 1260px
   .respond-to-range(@bp-med-min, @bp-lg-max + @grid_gutter-width, {
 
-    &_content-2 {
+    &__content-2 {
       width: 100%;
     }
 
@@ -970,11 +973,11 @@ 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);
diff --git a/cfgov/unprocessed/css/organisms/post-preview.less b/cfgov/unprocessed/css/organisms/post-preview.less
index 81d284dc792..5729574fd3a 100644
--- a/cfgov/unprocessed/css/organisms/post-preview.less
+++ b/cfgov/unprocessed/css/organisms/post-preview.less
@@ -20,7 +20,7 @@
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
   }
 
-  &_content {
+  &__content {
     grid-area: content;
     padding-right: unit(@grid_gutter-width / @base-font-size-px, em);
 
@@ -31,11 +31,11 @@
     }
   }
 
-  &_description {
+  &__description {
     margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   }
 
-  &_image-container {
+  &__image-container {
     position: relative;
     grid-area: image;
 
@@ -50,23 +50,23 @@
     });
   }
 
-  &_image {
+  &__image {
     display: block;
     width: 100%;
   }
 
-  &_title a {
+  &__title a {
     .u-link--colors( var(--black), var(--pacific-80) );
   }
 
-  &_subtitle {
+  &__subtitle {
     .heading-6();
 
     // margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em);
     clear: both;
   }
 
-  &_byline-group,
+  &__byline-group,
   .m-tags {
     display: block;
     margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less
index e8bb3591a14..5f0ba09d726 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.less
@@ -2,7 +2,7 @@
   //
   // Header
   //
-  &_header {
+  &__header {
     display: flex;
     justify-content: space-between;
     border: 0;
@@ -37,7 +37,7 @@
     text-align: left;
   }
 
-  &_cues {
+  &__cues {
     min-width: 60px;
     text-align: right;
     color: var(--pacific);
@@ -45,7 +45,7 @@
     line-height: unit((@base-line-height-px / @btn-font-size));
   }
 
-  &_label {
+  &__label {
     // Grow to available width.
     flex-grow: 1;
 
@@ -58,15 +58,15 @@
     margin-bottom: 0;
   }
 
-  &_content {
+  &__content {
     padding: unit((15px / @base-font-size-px), em);
     padding-top: 0;
 
-    // The divider between _header and _content.
+    // The divider between __header and __content.
     &::before {
       content: '';
       display: block;
-      border-top: 1px solid var(--gray-40);
+      border-top: 1px solid @expandable--border;
       padding-top: unit((15px / @base-font-size-px), em);
     }
 
@@ -76,7 +76,7 @@
     }
   }
 
-  &_list {
+  &__list {
     padding-left: 0;
     list-style: none;
 
@@ -85,7 +85,7 @@
     }
   }
 
-  &_list__children {
+  &__list--children {
     margin-left: unit((@grid_gutter-width / 2 / @base-font-size-px), em);
 
     // Desktop and above.
@@ -95,7 +95,7 @@
     });
   }
 
-  &_link {
+  &__link {
     display: inline-block;
 
     // Break the menu word when it is too wide to fit in the sidebar area.
@@ -121,12 +121,12 @@
       padding-left: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
     });
 
-    &__current {
+    &--current {
       .u-link--colors( var(--black), var(--black), var(--black), var(--black), var(--black),
       var(--black), var(--black), var(--black), var(--black), var(--black) );
     }
 
-    &__parent {
+    &--parent {
       .heading-4();
 
       margin-bottom: inherit;
@@ -141,11 +141,11 @@
     // Add drop-shadow.
     box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
 
-    &__no-children {
+    &--no-children {
       display: none;
     }
 
-    &_list__parents {
+    &__list--parents {
       li[data-nav-is-active='False']{
         display: none;
       }
@@ -157,11 +157,11 @@
     .o-secondary-nav {
       background: none;
 
-      &_header {
+      &__header {
         display: none;
       }
 
-      &_content {
+      &__content {
         // These two !important values override basic expandable styling,
         // because these do not function like expandables on med+ screens.
         display: block !important;
@@ -188,26 +188,26 @@ html[lang='ar'] {
       text-align: right;
     }
 
-    &_cues {
+    &__cues {
       text-align: left;
     }
 
-    &_list__parents {
+    &__list--parents {
       padding-right: 0;
     }
 
-    &_link {
+    &__link {
       border-left-width: 0;
       border-right-width: 5px;
     }
 
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
-      &_link {
+      &__link {
         padding-right: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
       }
 
-      &_list__parents {
+      &__list--parents {
         padding-right: unit((@grid_gutter-width / 2 / @base-font-size-px), em);
       }
     });
diff --git a/cfgov/unprocessed/css/organisms/sidebar-breakout.less b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
index 725b66f393d..05358e7add5 100644
--- a/cfgov/unprocessed/css/organisms/sidebar-breakout.less
+++ b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
@@ -1,9 +1,9 @@
-@margin__em: unit(@grid_gutter-width / @base-font-size-px, em);
+@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 {
+  &__img {
     background-repeat: no-repeat;
     background-size: contain;
 
@@ -11,12 +11,12 @@
     padding-top: 56.25%;
   }
 
-  &_img-container {
+  &__img-container {
     max-width: @o-sidebar-breakout__img-width;
     max-height: @o-sidebar-breakout__img-height;
   }
 
-  &_img-container__round {
+  &__img-container--round {
     width: auto;
 
     .o-sidebar-breakout__img {
@@ -26,29 +26,29 @@
     }
   }
 
-  &_text-body {
-    margin-bottom: @margin__em;
+  &__text-body {
+    margin-bottom: @margin-em;
   }
 
-  &_text-heading {
-    margin-top: @margin__em;
-    margin-bottom: @margin__em / 2;
+  &__text-heading {
+    margin-top: @margin-em;
+    margin-bottom: @margin-em / 2;
   }
 }
 
 .respond-to-max(@bp-xs-max, {
   .o-sidebar-breakout {
 
-    margin-bottom: @margin__em;
+    margin-bottom: @margin-em;
 
-    &_col {
+    &__col {
       width: 100%;
       &:last-child {
         margin-top: unit( (@grid_gutter-width * 2) / @base-font-size-px, em );
       }
     }
 
-    &_img-container {
+    &__img-container {
       margin-left: auto;
       margin-right: auto;
       text-align: center;
@@ -59,24 +59,24 @@
 // Desktop and above.
 .respond-to-min(@bp-med-min, {
   .o-sidebar-breakout__col:last-child {
-    padding-left: @margin__em;
+    padding-left: @margin-em;
   }
 });
 
 // Tablet only.
 .respond-to-range( @bp-sm-min, @bp-sm-max, {
   .o-sidebar-breakout {
-    &_img-container {
+    &__img-container {
       float: left;
       width: @o-sidebar-breakout__img-width / @bp-sm-max * 100%;
-      margin-right: @margin__em;
+      margin-right: @margin-em;
     }
 
-    &_text-container {
+    &__text-container {
       overflow: auto;
     }
 
-    &_text-heading {
+    &__text-heading {
       margin-top: 0;
     }
   }
diff --git a/cfgov/unprocessed/css/organisms/video-player.less b/cfgov/unprocessed/css/organisms/video-player.less
index a3772b44a47..3903d0e0d24 100644
--- a/cfgov/unprocessed/css/organisms/video-player.less
+++ b/cfgov/unprocessed/css/organisms/video-player.less
@@ -1,11 +1,11 @@
 // Variable used to set the size of the play button.
-@play-btn-size__px: 60px;
+@play-btn-size-px: 60px;
 
 // Variable used to set the size of the play button's SVG icon.
 @play-btn-icon-size: 30px;
 
 // Magic number: height of standard button.
-@standard-btn-height__px: 36px;
+@standard-btn-height-px: 36px;
 
 .o-video-player {
   overflow: hidden;
@@ -16,12 +16,12 @@
     border: 1px solid var(--gray-40);
   }
 
-  &_iframe-container {
+  &__iframe-container {
     height: 100%;
     margin: 0;
   }
 
-  &_iframe {
+  &__iframe {
     border: 0;
   }
 }
@@ -81,7 +81,7 @@
   align-self: center;
 
   // Using the default CFPB cover card image.
-  &[src^='/static/img/cfpb_video_cover_card_954x200'] {
+  &[src^='/static/img/cfpb__video__cover__card__954x200'] {
     padding: unit(60px / @base-font-size-px, em);
     box-sizing: border-box;
 
@@ -97,7 +97,7 @@
 
   .no-js &,
   &-loaded,
-  &__thumbnail {
+  &--thumbnail {
     opacity: 1;
   }
 }
@@ -118,8 +118,8 @@
 
 .o-video-player__play-btn {
   box-sizing: border-box;
-  width: @play-btn-size__px;
-  height: @play-btn-size__px;
+  width: @play-btn-size-px;
+  height: @play-btn-size-px;
   // !important is needed for when this is applied to a link.
   border: 2px solid var(--gray-5) !important;
   border-radius: 100%;
@@ -145,19 +145,19 @@
     ) !important; // Pacific (#0072ce) at 80% opacity
   }
 
-  &__center {
+  &--center {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
 
-  &__bottom-right {
+  &--bottom-right {
     right: unit(@grid_gutter-width / 2 / @play-btn-icon-size, em);
     bottom: unit(@grid_gutter-width / 2 / @play-btn-icon-size, em);
   }
 
-  &__center,
-  &__bottom-right {
+  &--center,
+  &--bottom-right {
     &:focus-visible,
     &:focus {
       outline: none;
@@ -199,11 +199,11 @@
 }
 
 button.o-video-player__play-btn,
-.o-video-player__loaded a.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;
 }
 
@@ -250,7 +250,7 @@ button.o-video-player__play-btn,
   height: 100%;
 }
 
-.o-video-player__video-container__flexible {
+.o-video-player__video-container--flexible {
   .o-video-player__iframe-container {
     width: auto;
     .u-flexible-container-mixin();
@@ -322,7 +322,7 @@ button.o-video-player__play-btn,
     margin: 0;
     padding: 0;
     // Magic number: height of standard button and 1px border around FCM.
-    top: (@standard-btn-height__px + 1px) * -1;
+    top: (@standard-btn-height-px + 1px) * -1;
   }
 
   .o-video-player__close-btn {
@@ -330,7 +330,7 @@ button.o-video-player__play-btn,
     border-bottom-left-radius: 0;
     display: block;
     // Pushes button out of masked window when not playing.
-    margin-top: @standard-btn-height__px;
+    margin-top: @standard-btn-height-px;
   }
 }
 
diff --git a/cfgov/unprocessed/css/print.less b/cfgov/unprocessed/css/print.less
index 405cdb7d448..83cfafbf3ee 100644
--- a/cfgov/unprocessed/css/print.less
+++ b/cfgov/unprocessed/css/print.less
@@ -57,7 +57,7 @@
     }
   }
 
-  a.a-link__jump,
+  a.a-link--jump,
   a.m-list__link {
     // These pseudo-classes are needed to guarantee specificity
     &:link,
diff --git a/cfgov/unprocessed/js/molecules/Autocomplete.js b/cfgov/unprocessed/js/molecules/Autocomplete.js
index 8fa4f5f8b16..4f35ec5b718 100644
--- a/cfgov/unprocessed/js/molecules/Autocomplete.js
+++ b/cfgov/unprocessed/js/molecules/Autocomplete.js
@@ -10,7 +10,7 @@ const BASE_CLASS = 'm-autocomplete';
 const HIDDEN_CLASS = 'u-hidden';
 const AUTOCOMPLETE_CLASS = 'm-autocomplete__results';
 const SELECTED_CLASS = 'm-autocomplete__selected';
-const ERROR_CLASS = 'a-text-input__error';
+const ERROR_CLASS = 'a-text-input--error';
 
 // Key constants
 // See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
diff --git a/cfgov/unprocessed/js/molecules/GlobalSearch.js b/cfgov/unprocessed/js/molecules/GlobalSearch.js
index a35fd71771c..4caa5b17a00 100644
--- a/cfgov/unprocessed/js/molecules/GlobalSearch.js
+++ b/cfgov/unprocessed/js/molecules/GlobalSearch.js
@@ -20,10 +20,10 @@ const BASE_CLASS = 'm-global-search';
  */
 function GlobalSearch(element) {
   const _dom = checkDom(element, BASE_CLASS);
-  const _contentDom = _dom.querySelector(`.${BASE_CLASS}_content`);
-  const _triggerDom = _dom.querySelector(`.${BASE_CLASS}_trigger`);
+  const _contentDom = _dom.querySelector(`.${BASE_CLASS}__content`);
+  const _triggerDom = _dom.querySelector(`.${BASE_CLASS}__trigger`);
   const _triggerOpenLabelText = _triggerDom
-    .querySelector(`.${BASE_CLASS}_trigger-open-label`)
+    .querySelector(`.${BASE_CLASS}__trigger-open-label`)
     .innerText.trim();
   const _flyout = new FlyoutMenu(_dom, false);
   let _searchInputDom;
@@ -54,7 +54,7 @@ function GlobalSearch(element) {
 
     _contentDom.classList.remove('u-hidden');
 
-    const inputContainsLabelSel = `.${BASE_CLASS}_content-form .input-contains-label`;
+    const inputContainsLabelSel = `.${BASE_CLASS}__content-form .input-contains-label`;
     const searchBtnSel = `.${BASE_CLASS} .o-form--input-w-btn__btn-container button`;
 
     const inputContainsLabel = _contentDom.querySelector(inputContainsLabelSel);
diff --git a/cfgov/unprocessed/js/molecules/Notification.js b/cfgov/unprocessed/js/molecules/Notification.js
index d25c6281542..64bede1fdd6 100644
--- a/cfgov/unprocessed/js/molecules/Notification.js
+++ b/cfgov/unprocessed/js/molecules/Notification.js
@@ -17,7 +17,7 @@ ICON[ERROR] = ERROR_ICON;
 
 const BASE_CLASS = 'm-notification';
 // Constants for the Notification modifiers.
-const MODIFIER_VISIBLE = `${BASE_CLASS}__visible`;
+const MODIFIER_VISIBLE = `${BASE_CLASS}--visible`;
 
 /**
  * Notification
@@ -29,7 +29,7 @@ const MODIFIER_VISIBLE = `${BASE_CLASS}__visible`;
  */
 function Notification(element) {
   const _dom = checkDom(element, BASE_CLASS);
-  const _contentDom = _dom.querySelector('.' + BASE_CLASS + '_content');
+  const _contentDom = _dom.querySelector(`.${BASE_CLASS}__content`);
 
   let _currentType;
 
@@ -43,11 +43,11 @@ function Notification(element) {
 
     // Check and set default type of notification.
     const classList = _dom.classList;
-    if (classList.contains(`${BASE_CLASS}__${SUCCESS}`)) {
+    if (classList.contains(`${BASE_CLASS}--${SUCCESS}`)) {
       _currentType = SUCCESS;
-    } else if (classList.contains(`${BASE_CLASS}__${WARNING}`)) {
+    } else if (classList.contains(`${BASE_CLASS}--${WARNING}`)) {
       _currentType = WARNING;
-    } else if (classList.contains(`${BASE_CLASS}__${ERROR}`)) {
+    } else if (classList.contains(`${BASE_CLASS}--${ERROR}`)) {
       _currentType = ERROR;
     }
 
@@ -106,8 +106,8 @@ function Notification(element) {
     }
 
     const classList = _dom.classList;
-    classList.remove(BASE_CLASS + '__' + _currentType);
-    classList.add(`${BASE_CLASS}__${type}`);
+    classList.remove(BASE_CLASS + '--' + _currentType);
+    classList.add(`${BASE_CLASS}--${type}`);
     _currentType = type;
 
     // Replace <svg> element with contents of type_ICON.
diff --git a/cfgov/unprocessed/js/organisms/Header.js b/cfgov/unprocessed/js/organisms/Header.js
index 5953f916647..a85aee79e87 100644
--- a/cfgov/unprocessed/js/organisms/Header.js
+++ b/cfgov/unprocessed/js/organisms/Header.js
@@ -37,7 +37,7 @@ function Header(element) {
     _globalSearch = new GlobalSearch(_dom);
 
     // Don't initialize the mega menu if it isn't on the page.
-    if (_dom.classList.contains(`${BASE_CLASS}__mega-menu`)) {
+    if (_dom.classList.contains(`${BASE_CLASS}___mega-menu`)) {
       _megaMenu = new MegaMenu(_dom);
       _megaMenu.addEventListener('rootexpandbegin', _megaMenuExpandBegin);
       _megaMenu.addEventListener('rootcollapseend', _megaMenuCollapseEnd);
diff --git a/cfgov/unprocessed/js/organisms/MegaMenu.js b/cfgov/unprocessed/js/organisms/MegaMenu.js
index 1cb9b30be03..6cf53001b98 100644
--- a/cfgov/unprocessed/js/organisms/MegaMenu.js
+++ b/cfgov/unprocessed/js/organisms/MegaMenu.js
@@ -52,7 +52,7 @@ function MegaMenu(element) {
 
     // DOM selectors.
     const rootMenuDom = _dom;
-    const rootContentDom = rootMenuDom.querySelector(`.${BASE_CLASS}_content`);
+    const rootContentDom = rootMenuDom.querySelector(`.${BASE_CLASS}__content`);
 
     // Create model.
     _menus = new Tree();
diff --git a/cfgov/unprocessed/js/organisms/MegaMenuDesktop.js b/cfgov/unprocessed/js/organisms/MegaMenuDesktop.js
index 921042dbbe6..e4aa149bfce 100644
--- a/cfgov/unprocessed/js/organisms/MegaMenuDesktop.js
+++ b/cfgov/unprocessed/js/organisms/MegaMenuDesktop.js
@@ -186,7 +186,7 @@ function MegaMenuDesktop(baseClass, menus) {
     const menu = node.data;
 
     if (nLevel === 1) {
-      const wrapperSel = `.${baseClass}_content-2-wrapper`;
+      const wrapperSel = `.${baseClass}__content-2-wrapper`;
       const contentDom = menu.getDom().content;
       const wrapperDom = contentDom.querySelector(wrapperSel);
 
diff --git a/cfgov/unprocessed/js/organisms/MortgagePerformanceTrends/apps/map.js b/cfgov/unprocessed/js/organisms/MortgagePerformanceTrends/apps/map.js
index 1c4e2c9109b..9ce321ac9e3 100644
--- a/cfgov/unprocessed/js/organisms/MortgagePerformanceTrends/apps/map.js
+++ b/cfgov/unprocessed/js/organisms/MortgagePerformanceTrends/apps/map.js
@@ -152,10 +152,10 @@ MortgagePerformanceMap.prototype.renderChart = function (prevState, state) {
   const currId = state.geo.id;
   let zoomLevel;
   if (!utils.isDateValid(state.date, this.endDate)) {
-    this.$notification.classList.add('m-notification__visible');
+    this.$notification.classList.add('m-notification--visible');
     return;
   }
-  this.$notification.classList.remove('m-notification__visible');
+  this.$notification.classList.remove('m-notification--visible');
   if (prevId && prevId !== currId) {
     this.chart.highchart.chart.get(prevId).select(false);
   }
diff --git a/cfgov/unprocessed/js/organisms/SecondaryNav.js b/cfgov/unprocessed/js/organisms/SecondaryNav.js
index 7ca14039cf7..9b3aef97397 100644
--- a/cfgov/unprocessed/js/organisms/SecondaryNav.js
+++ b/cfgov/unprocessed/js/organisms/SecondaryNav.js
@@ -41,8 +41,8 @@ function SecondaryNav(element) {
       return this;
     }
 
-    _targetDom = _dom.querySelector(`.${BASE_CLASS}_header`);
-    _contentDom = _dom.querySelector(`.${BASE_CLASS}_content`);
+    _targetDom = _dom.querySelector(`.${BASE_CLASS}__header`);
+    _contentDom = _dom.querySelector(`.${BASE_CLASS}__content`);
 
     // Add behavior hooks.
     addDataHook(_dom, 'behavior_flyout-menu');
diff --git a/cfgov/unprocessed/js/organisms/VideoPlayer.js b/cfgov/unprocessed/js/organisms/VideoPlayer.js
index 4fae253223a..9c5f7c21e2f 100644
--- a/cfgov/unprocessed/js/organisms/VideoPlayer.js
+++ b/cfgov/unprocessed/js/organisms/VideoPlayer.js
@@ -26,12 +26,12 @@ function VideoPlayer(element) {
   const _videoId = _dom.getAttribute('data-id');
   const _showCustomThumbnail = _dom.hasAttribute('data-custom-thumbnail');
 
-  const _iframeDom = _dom.querySelector(`.${BASE_CLASS}_iframe`);
-  const _imageDom = _dom.querySelector(`.${BASE_CLASS}_image`);
-  const _closeBtnDom = _dom.querySelector(`button.${BASE_CLASS}_close-btn`);
-  const _playBtnDom = _dom.querySelector(`button.${BASE_CLASS}_play-btn`);
-  const _playLinkDom = _dom.querySelector(`a.${BASE_CLASS}_play-btn`);
-  const _durationDom = _dom.querySelector(`.${BASE_CLASS}_duration`);
+  const _iframeDom = _dom.querySelector(`.${BASE_CLASS}__iframe`);
+  const _imageDom = _dom.querySelector(`.${BASE_CLASS}__image`);
+  const _closeBtnDom = _dom.querySelector(`button.${BASE_CLASS}__close-btn`);
+  const _playBtnDom = _dom.querySelector(`button.${BASE_CLASS}__play-btn`);
+  const _playLinkDom = _dom.querySelector(`a.${BASE_CLASS}__play-btn`);
+  const _durationDom = _dom.querySelector(`.${BASE_CLASS}__duration`);
 
   const _defaultThumbnailURL = _imageDom.src;
 
@@ -96,7 +96,7 @@ function VideoPlayer(element) {
     _closeBtnDom.addEventListener('click', _closeBtnClickedHandler.bind(this));
 
     // The video has loaded.
-    _dom.classList.add(`${BASE_CLASS}__loaded`);
+    _dom.classList.add(`${BASE_CLASS}___loaded`);
   }
 
   /**
@@ -166,7 +166,7 @@ function VideoPlayer(element) {
    * Show the image by adding a class that changes its opacity.
    */
   function _imageShow() {
-    _imageDom.classList.add(`${BASE_CLASS}_image-loaded`);
+    _imageDom.classList.add(`${BASE_CLASS}__image-loaded`);
   }
 
   /**
diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js
index b42e7876e30..8be6bba14ce 100644
--- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js
+++ b/cfgov/unprocessed/js/routes/on-demand/simple-chart/data-filters.js
@@ -49,7 +49,7 @@ function makeSelectFilterDOM(options, chartNode, filter) {
   wrapper.className = 'filter-wrapper m-form-field m-form-field__select';
 
   const label = document.createElement('label');
-  label.className = 'a-label a-label__heading';
+  label.className = 'a-label a-label--heading';
   label.innerText = filter.label ? filter.label : 'Select ' + filter.key;
   label.htmlFor = id;
 
@@ -125,7 +125,7 @@ function makeRadioFilterDOM(buckets, chartNode, filter) {
   function makeRadioGroup(bucket, i) {
     const id = Math.random() + bucket;
     const radioWrapper = document.createElement('div');
-    radioWrapper.className = 'm-form-field m-form-field__radio u-mb5';
+    radioWrapper.className = 'm-form-field m-form-field--radio u-mb5';
     let radioGroupName = document.querySelectorAll('.filter-wrapper').length;
     radioGroupName = 'radio-group_' + radioGroupName;
 
diff --git a/cfgov/unprocessed/js/routes/on-demand/simple-chart/datetime-styles.js b/cfgov/unprocessed/js/routes/on-demand/simple-chart/datetime-styles.js
index da1c3832b61..b0d8dbe411d 100644
--- a/cfgov/unprocessed/js/routes/on-demand/simple-chart/datetime-styles.js
+++ b/cfgov/unprocessed/js/routes/on-demand/simple-chart/datetime-styles.js
@@ -35,7 +35,7 @@ const datetime = {
     ...styles.yAxis,
     plotLines: [
       {
-        className: 'zeroLine',
+        className: 'zero-line',
         value: 0,
         width: 2,
       },
diff --git a/cfgov/unprocessed/js/routes/on-demand/youth-employment-programs/buying-a-car/templates/checkbox.js b/cfgov/unprocessed/js/routes/on-demand/youth-employment-programs/buying-a-car/templates/checkbox.js
index b9347ef39db..ec2278b7424 100644
--- a/cfgov/unprocessed/js/routes/on-demand/youth-employment-programs/buying-a-car/templates/checkbox.js
+++ b/cfgov/unprocessed/js/routes/on-demand/youth-employment-programs/buying-a-car/templates/checkbox.js
@@ -4,7 +4,7 @@
  */
 function checkbox(id) {
   return `
-    <div class="m-form-field m-form-field__checkbox">
+    <div class="m-form-field m-form-field--checkbox">
       <input class="a-checkbox" type="checkbox" id="${id}" name="${id}">
       <label class="a-label" for="${id}">
         <span>${id}</span>
diff --git a/cfgov/v1/jinja2/v1/activity-log/index.html b/cfgov/v1/jinja2/v1/activity-log/index.html
index 46fdf0b0d65..93e483f7929 100644
--- a/cfgov/v1/jinja2/v1/activity-log/index.html
+++ b/cfgov/v1/jinja2/v1/activity-log/index.html
@@ -2,7 +2,7 @@
 
 {% block content_main %}
 
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Recent updates</h1>
         <p class="lead-paragraph">
             Find the latest CFPB activities and publications here. Use the filters
@@ -12,7 +12,7 @@ <h1>Recent updates</h1>
 
     {% for block in page.content %}
         {% if 'filter_controls' in block.block_type %}
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 {% include_block block %}
             </div>
         {% else %}
diff --git a/cfgov/v1/jinja2/v1/blog/blog_page.html b/cfgov/v1/jinja2/v1/blog/blog_page.html
index 423dff38e95..fff8d4245c0 100644
--- a/cfgov/v1/jinja2/v1/blog/blog_page.html
+++ b/cfgov/v1/jinja2/v1/blog/blog_page.html
@@ -19,8 +19,8 @@
     {% include 'v1/includes/article.html' %}
     {% block post_article_content %}
         <div class="block
-                    block__flush-top
-                    block__padded-top
+                    block--flush-top
+                    block--padded-top
                     join-the-conversation">
             <p>
                 {% set twitter_url = _("https://twitter.com/CFPB") %}
diff --git a/cfgov/v1/jinja2/v1/browse-basic/index.html b/cfgov/v1/jinja2/v1/browse-basic/index.html
index 6ae4062dcc8..f371875d0db 100644
--- a/cfgov/v1/jinja2/v1/browse-basic/index.html
+++ b/cfgov/v1/jinja2/v1/browse-basic/index.html
@@ -8,7 +8,7 @@
         {% if 'featured_content' in block.block_type %}
             <div class="block
                         {{ 'u-mt0' if loop.first }}">
-                        {# u-mt0 is used instead of block__flush-top to keep top border #}
+                        {# u-mt0 is used instead of block--flush-top to keep top border #}
                 {% include_block block %}
             </div>
         {% else %}
@@ -18,7 +18,7 @@
 
     {% if page.share_and_print %}
         {% import "v1/includes/molecules/social-media.html" as social_media with context -%}
-        <div class="block block__flush-top block__flush-bottom block__padded-bottom">
+        <div class="block block--flush-top block--flush-bottom block--padded-bottom">
             {{ social_media.render(
                 {
                     'is_share_view': true,
diff --git a/cfgov/v1/jinja2/v1/browse-filterable/index.html b/cfgov/v1/jinja2/v1/browse-filterable/index.html
index e40d5759ebc..e0525f40e9e 100644
--- a/cfgov/v1/jinja2/v1/browse-filterable/index.html
+++ b/cfgov/v1/jinja2/v1/browse-filterable/index.html
@@ -8,7 +8,7 @@
         {% if 'featured_content' in block.block_type %}
             <div class="block
                         {{ 'u-mt0' if loop.first }}">
-                        {# u-mt0 is used instead of block__flush-top to keep top border #}
+                        {# u-mt0 is used instead of block--flush-top to keep top border #}
                 {% include_block block %}
             </div>
         {% else %}
@@ -17,7 +17,7 @@
     {% endfor %}
     {% for block in page.content %}
         {% if 'filter_controls' in block.block_type %}
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 {% include_block block %}
             </div>
         {% else %}
diff --git a/cfgov/v1/jinja2/v1/document-detail/index.html b/cfgov/v1/jinja2/v1/document-detail/index.html
index 898b193d80c..b53e2f34b8d 100644
--- a/cfgov/v1/jinja2/v1/document-detail/index.html
+++ b/cfgov/v1/jinja2/v1/document-detail/index.html
@@ -10,7 +10,7 @@
             {{ item_introduction.render(block.value) }}
         {% else %}
             <div class="block
-                        block__flush-top">
+                        block--flush-top">
                 {% include_block block %}
             </div>
         {% endif %}
diff --git a/cfgov/v1/jinja2/v1/enforcement-action/index.html b/cfgov/v1/jinja2/v1/enforcement-action/index.html
index 1b209af8482..9dc5a6bf28c 100644
--- a/cfgov/v1/jinja2/v1/enforcement-action/index.html
+++ b/cfgov/v1/jinja2/v1/enforcement-action/index.html
@@ -11,7 +11,7 @@
             {{ item_introduction.render(block.value) }}
         {% else %}
             <div class="block
-                        block__flush-top">
+                        block--flush-top">
                 {% include_block block %}
             </div>
         {% endif %}
diff --git a/cfgov/v1/jinja2/v1/events/_macros.html b/cfgov/v1/jinja2/v1/events/_macros.html
index 10ef9458868..464422eeaa4 100644
--- a/cfgov/v1/jinja2/v1/events/_macros.html
+++ b/cfgov/v1/jinja2/v1/events/_macros.html
@@ -188,7 +188,7 @@ <h2 class="event-venue_heading">
     <h2>Agenda</h2>
     <table class="o-table
                   event-agenda_table
-                  o-table__stack-on-small
+                  o-table--stack-on-small
                   u-w100pct
                   block
                   block--flush-top">
diff --git a/cfgov/v1/jinja2/v1/home_page/home_page.html b/cfgov/v1/jinja2/v1/home_page/home_page.html
index 5137898147e..439e3f8f6a3 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 %}
@@ -65,11 +65,11 @@ <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 o-card-group--flow">
                 <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 -%}
+                    <article class="m-card m-card--topic
+                        {%- if loop.last %}  m-card--topic-action{% endif -%}
                     ">
                       <a href="{{ card.url }}">
                           <div class="m-card__icon">
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 8db916b1560..b5ebdc9da21 100644
--- a/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
+++ b/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
@@ -11,7 +11,7 @@
     <style>
         /* Swap the homepage hero's white text to black on small screens */
         @media only all and (max-width: 37.5625em) {
-            .m-hero__knockout {
+            .m-hero--knockout {
                 /* CFPB Black #101820 */
                 color: #101820;
             }
@@ -28,11 +28,11 @@
 
     {% with value = hardcoded.features %}
         <section class="wrapper
-                        wrapper__match-content
+                        wrapper--match-content
                         block
-                        block__bg
-                        block__border
-                        block__flush-top
+                        block--bg
+                        block--border
+                        block--flush-top
                         u-mb0"
         >
             {% include "v1/includes/organisms/info-unit-group-2.html" with context %}
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/checkbox.html b/cfgov/v1/jinja2/v1/includes/atoms/checkbox.html
index 4fb35207246..2d3dc35d132 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/checkbox.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/checkbox.html
@@ -36,7 +36,7 @@
 {%- set behavior = 'data-js-hook=behavior_' ~ value.behavior if value.behavior else '' -%}
 {%- set checked = 'checked' if value.selected else '' -%}
 
-<{{ el }} class="m-form-field m-form-field__checkbox {{ value.class if value.class else '' }}">
+<{{ el }} class="m-form-field m-form-field--checkbox {{ value.class if value.class else '' }}">
     <input class="a-checkbox"
            type="checkbox"
            value="{{ val }}"
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
index 3b450392fbf..a34024ee627 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
@@ -17,7 +17,7 @@
    value.aria_label: An aria-label for the link, if the text is not descriptive.
 
    ========================================================================== #}
-<a class="a-link a-link__jump"
+<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">
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/partially-styled-link.html b/cfgov/v1/jinja2/v1/includes/atoms/partially-styled-link.html
index 11e9bd109cf..230db3a8e38 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/partially-styled-link.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/partially-styled-link.html
@@ -20,9 +20,9 @@
 
 {% macro render(value) -%}
 
-<a href="{{ value.url }}" class="a_link a-link__partially-styled"> 
-	<span class="a-link__partially-styled_plain">{{ value.plain_text|safe }} </span>
-	<span class="a-link__partially-styled_underlined">{{ value.underlined_text }}</span>
+<a href="{{ value.url }}" class="a_link a-link--partially-styled">
+	<span class="a-link__plain">{{ value.plain_text|safe }} </span>
+	<span class="a-link__underlined">{{ value.underlined_text }}</span>
 </a>
 
 {%- endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/radio-button.html b/cfgov/v1/jinja2/v1/includes/atoms/radio-button.html
index e3f7a783c23..a1f9012e4b9 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/radio-button.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/radio-button.html
@@ -33,7 +33,7 @@
 {%- set name = value.name if value.name else id -%}
 {%- set checked = 'checked' if value.selected else '' -%}
 
-<{{ el }} class="m-form-field m-form-field__radio {{ value.class if value.class else '' }}">
+<{{ el }} class="m-form-field m-form-field--radio {{ value.class if value.class else '' }}">
     <input class="a-radio"
            type="radio"
            value="{{ val }}"
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
index afafe0a368e..c124dc0c736 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
@@ -14,7 +14,7 @@
    ========================================================================== #}
 
 {% macro render( is_large ) %}
-<div class="a-tagline{{ ' a-tagline__large' if is_large else '' }}"
+<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">
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
index c44b5c6c59e..758b436da55 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
@@ -62,10 +62,10 @@ <h2 class="{{ 'm-slug-header__heading' if value.default_heading else 'h3' }} ">
         {{ notification.render( 'information', false, '' ) }}
 
         <div class="m-form-field">
-            <label class="a-label a-label__heading" for="{{ 'email_' ~ form_id }}">
+            <label class="a-label a-label--heading" for="{{ 'email_' ~ form_id }}">
                 {{ _('Email address') }}
             </label>
-            <input class="a-text-input a-text-input__full"
+            <input class="a-text-input a-text-input--full"
                    id="{{ 'email_' ~ form_id }}"
                    name="email"
                    type="email"
@@ -75,7 +75,7 @@ <h2 class="{{ 'm-slug-header__heading' if value.default_heading else 'h3' }} ">
 
         <div class="o-email-signup__buttons">
             <button class="a-btn">{{ _('Sign up') }}</button>
-            <a class="a-btn a-btn__link a-btn__secondary"
+            <a class="a-btn a-btn--link a-btn--secondary"
                href="{{ pageurl(value.disclaimer_page) if value.disclaimer_page else disclaimer_url }}"
                target="_blank"
                rel="noopener noreferrer">
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 2433f46d0f0..e1068dd0ea9 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
@@ -39,7 +39,7 @@ <h2 class="m-slug-header__heading">
     {% endif %}
 
     {% if value.button.url and value.button.text %}
-    <a class="a-btn a-btn__full-on-xs"
+    <a class="a-btn a-btn--full-on-xs"
        href="{{ value.button.url }}"
        {% if value.button.aria_label %}
        aria-label="{{ value.button.aria_label }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/card.html b/cfgov/v1/jinja2/v1/includes/molecules/card.html
index 7cf96f0b6f1..6dbadfc572b 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/card.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/card.html
@@ -29,10 +29,10 @@
 {% macro render( value ) %}
 {# We want to make the whole card clickable. #}
 <article class="m-card
-                {% if value.card_type == 'topic' %} m-card__topic {% endif %}
-                {% if value.card_type == 'topic-action' %} m-card__topic m-card__topic-action {% endif %}
+                {% if value.card_type == 'topic' %} m-card--topic {% endif %}
+                {% if value.card_type == 'topic-action' %} m-card--topic m-card--topic-action {% endif %}
                 {% if value.card_type  == 'highlight' %} m-card__highlight {% endif %}
-                {% if value.card_type  == 'breakout' %} m-card__breakout {% endif %}
+                {% if value.card_type  == 'breakout' %} m-card--breakout {% endif %}
                 {% if value.card_type  == 'featured' %} m-card__featured {% endif %}">
     <a href="{{ value.link_url }}">
         {% if value.heading or value.icon %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
index df24b54df85..7b40bea44be 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
@@ -22,7 +22,7 @@
                 m-global-eyebrow__{{ 'horizontal' if is_horizontal
                                       else 'list' }}">
         <div class="wrapper
-                    {{ 'wrapper__match-content' if is_horizontal else '' }}">
+                    {{ 'wrapper--match-content' if is_horizontal else '' }}">
             {% if is_horizontal -%}
                 {{ tagline.render() }}
             {%- endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
index 5558c2e67ea..ba68b34fa34 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
@@ -59,12 +59,12 @@
                    name="affiliate"
                    value="{{ search_gov_affiliate() }}">
 
-            <div class="o-form__input-w-btn">
+            <div class="o-form--input-w-btn">
                <div class="o-form--input-w-btn__input-container m-form-field">
-                   <div class="a-text-input__full input-contains-label">
+                   <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">
+                                     input-contains-label__before--search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">{{ _('Search') }}</span>
                        </label>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/hero.html b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
index ad63a714580..4b7af476532 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/hero.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
@@ -59,11 +59,11 @@
 {% endif %}
 
 <section class="m-hero
-                {{- ' m-hero__knockout' if value.is_white_text else '' }}
-                {{- ' m-hero__bleeding' if value.is_bleeding else '' }}
-                {{- ' 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 '' }}">
+                {{- ' m-hero--knockout' if value.is_white_text else '' }}
+                {{- ' m-hero--bleeding' if value.is_bleeding else '' }}
+                {{- ' 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 }}
@@ -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 2a7fcf935c0..00ed077cfe1 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
@@ -86,7 +86,7 @@
         {% endif -%}
 
         <img class="m-info-unit__image
-                    {{- ' m-info-unit__image__square' if img.is_square }}
+                    {{- ' 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 }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
index 1e5b2eb6802..f569a851770 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
@@ -62,14 +62,14 @@
         {% endif %}
         {% if value.image.is_decorative %}
         <div class="m-info-unit__image
-                    {{ 'm-info-unit__image__square' if value.image.is_square else '' }}"
+                    {{ '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 '' }}">
+                    {{ 'm-info-unit__image--square' if value.image.is_square else '' }}">
         {% endif %}
         {% if link_image_and_heading %}
             </a>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/notification.html b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
index b1132773091..da43d386406 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/notification.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
@@ -35,11 +35,11 @@
   {# Lookup table for the CSS class and icon for each notification type. #}
   {% set type_lookup = {
         'information': ['', 'information-round'],
-        'success':     [' m-notification__success', 'approved-round'],
-        'warning':     [' m-notification__warning', 'warning-round'],
-        'error':       [' m-notification__error', 'error-round'],
-        'money-tips':  [' m-notification__success', 'dollar-round'],
-        'caution':     [' m-notification__error', 'information-round']
+        'success':     [' m-notification--success', 'approved-round'],
+        'warning':     [' m-notification--warning', 'warning-round'],
+        'error':       [' m-notification--error', 'error-round'],
+        'money-tips':  [' m-notification--success', 'dollar-round'],
+        'caution':     [' m-notification--error', 'information-round']
       }
   %}
   {% set icon = type_lookup[type | default( 'information' )][1] %}
@@ -47,7 +47,7 @@
 
   <div class="m-notification
               {{- type -}}
-              {{- ' m-notification__visible' if is_visible else '' -}}">
+              {{- ' m-notification--visible' if is_visible else '' -}}">
       {{ svg_icon(icon) }}
       <div class="m-notification__content"
           {{ 'role="alert"' if type == 'warning' or type == 'error' else '' }}>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
index 71bc0ae203b..a959f62a057 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
@@ -39,7 +39,7 @@
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
-                  a-btn__disabled
+                  a-btn--disabled
                   m-pagination__btn-prev">
         {% endif %}
             <span class="a-btn__icon a-btn__icon--on-left">
@@ -55,7 +55,7 @@
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
-                  a-btn__disabled
+                  a-btn--disabled
                   m-pagination__btn-next">
         {% endif -%}
             {{ _('Next') }}
@@ -94,7 +94,7 @@
                 {{- ' ' ~ _('of') ~ ' ' -}} {{- total_pages -}}
             </span>
             <button class="a-btn
-                           a-btn__link
+                           a-btn--link
                            m-pagination__btn-submit"
                     type="submit">
                 {{ _('Go') }}
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 916d83209d1..dcafd783fa4 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
@@ -146,7 +146,7 @@ <h3 class="h4">
 
 {% macro _list(list, is_related_topics=false) %}
 <ul class="m-list
-           m-list__unstyled
+           m-list--unstyled
            m-list--links
            m-related-metadata__topics">
     {% for item in list %}
@@ -229,7 +229,7 @@ <h3 class="h4">
    ========================================================================== #}
 
 {% macro _categories(categories_check) %}
-    <ul class="m-list m-list__unstyled">
+    <ul class="m-list m-list--unstyled">
     {% for category in page.categories.all() %}
     <li class="m-list__item">
         <span>{{ category.get_name_display() }}</span>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
index da22663c81d..8549a1753b6 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
@@ -82,7 +82,7 @@ <h3 class="h4">
 
 {% macro _list(list, is_related_topics=false) %}
 <ul class="m-list
-           m-list__unstyled
+           m-list--unstyled
            m-list--links
            {{ 'm-related-metadata__topics' if is_related_topics else '' }} ">
     {% for link in list.links %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
index 2c3f6cedb0b..aae552b22ed 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
@@ -18,7 +18,7 @@
     {% if limit %}{% set posts = posts[ :limit | int ] %}{% endif %}
     <ul class="m-related-posts__list
                m-list
-               m-list__unstyled">
+               m-list--unstyled">
         {% for post in posts %}
             {% set post_url = post.url or '' %}
             <li class="m-list__item">
@@ -94,7 +94,7 @@ <h3 class="h4">
         </div>
     {% endfor %}
 
-    <a class="a-link a-link__jump"
+    <a class="a-link a-link--jump"
        href="{{ value.view_more_url }}"
        aria-label="{{ _('View more related posts') }}">
         <span class="a-link__text">
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
index 8762a0adbe1..1ccd25ee438 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
@@ -28,7 +28,7 @@ <h2 class="m-slug-header__heading">
         </h2>
     </header>
     <ul class="m-list
-               m-list__unstyled
+               m-list--unstyled
                m-list--links">
     {% for topic in value.topics %}
     <li class="m-list__item">
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
index 615016765e0..64b9fc88ff4 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
@@ -80,7 +80,7 @@
     {% endif %}
 
     <ul class="m-list
-               m-list__unstyled
+               m-list--unstyled
                m-list--horizontal
                m-social-media__icons">
 
@@ -173,7 +173,7 @@
 
         {% 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"
+                <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/organisms/ask-search.html b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
index 12e98d37ec3..8f078abb57e 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
@@ -49,7 +49,7 @@
         {% endif %}
 
         <div class="o-search-bar_input">
-            <div class="o-form__input-w-btn">
+            <div class="o-form--input-w-btn">
                 <div class="o-form--input-w-btn__input-container">
                     <div class="m-btn-inside-input
                                 input-contains-label
@@ -57,7 +57,7 @@
                          data-language="{{ language }}">
                         <label for="o-search-bar_query"
                                class="input-contains-label__before
-                                      input-contains-label__before__search">
+                                      input-contains-label__before--search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">
                                 {{ _('Search for your question') }}
@@ -72,7 +72,7 @@
                                maxlength="{{ max_length }}"
                                aria-describedby="o-search-bar_error-message">
                     </div>
-                    <div class="a-form-alert a-form-alert__error u-hidden"
+                    <div class="a-form-alert a-form-alert--error u-hidden"
                          id="o-search-bar_error-message"
                          role="alert">
                         {{ svg_icon('error-round') }}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
index fd148243fd0..c7d1dc0d2a9 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
@@ -35,13 +35,13 @@
 
 {% macro render( value ) %}
 <div class="o-card-group
-            {% if value.type_group == 'column-2' %} o-card-group__column-2 {% endif %}
-            {% if value.type_group == 'column-3' %} o-card-group__column-3 {% endif %}
-            {% if value.type_group == 'count-2' %} o-card-group__count-2 {% endif %}
-            {% if value.type_group == 'count-3' %} o-card-group__count-3 {% endif %}
-            {% if value.type_group == 'count-4' %} o-card-group__count-4 {% endif %}
-            {% if value.type_group == 'flow' %} o-card-group__flow {% endif %}
-            {% if value.type_group == 'featured' %} o-card-group__column-3 o-card-group__bg-green {% endif %}">
+            {% if value.type_group == 'column-2' %} o-card-group--column-2 {% endif %}
+            {% if value.type_group == 'column-3' %} o-card-group--column-3 {% endif %}
+            {% if value.type_group == 'count-2' %} o-card-group--count-2 {% endif %}
+            {% if value.type_group == 'count-3' %} o-card-group--count-3 {% endif %}
+            {% if value.type_group == 'count-4' %} o-card-group--count-4 {% endif %}
+            {% if value.type_group == 'flow' %} o-card-group--flow {% endif %}
+            {% if value.type_group == 'featured' %} o-card-group--column-3 o-card-group--bg-green {% endif %}">
     <div class="block u-text-centered">
     {% if value.heading %}<h2 class="h1">{{ value.heading }}</h2>{% endif %}
     </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
index 24dfc6c6c68..9b5b595a71c 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
@@ -34,9 +34,9 @@
 {% macro expandable(value) %}
 
 <div class="o-expandable
-            {{ 'o-expandable__padded' if value.is_expanded_padding else '' }}
-            {{ 'o-expandable__background' if value.is_midtone else '' }}
-            {{ 'o-expandable__border' if value.is_bordered else '' }}
+            {{ 'o-expandable--padded' if value.is_expanded_padding else '' }}
+            {{ 'o-expandable--background' if value.is_midtone else '' }}
+            {{ 'o-expandable--border' if value.is_bordered else '' }}
             {{ 'o-expandable__onload-open' if value.is_expanded else '' }}"
      id="{{ value.group_index_slug if value.group_index_slug else value.label | slugify_unique }}"
      {{ 'itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question"'
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
index 4b4f7c1a8a8..a61a5dfbc5e 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
@@ -33,7 +33,7 @@
    ========================================================================== #}
 
 <section class="o-featured-content-module
-                {{ 'o-featured-content-module__left' if value.layout_left }}">
+                {{ 'o-featured-content-module--left' if value.layout_left }}">
     <div class="o-featured-content-module__text">
         <h2 class="h3">{{ value.heading }}</h2>
 
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 16047163e46..b8c4ebf9af2 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
@@ -37,7 +37,7 @@
                 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"
+                <label class="a-label a-label--heading"
                         for="{{ data.id_for_label }}">
                     {{ label }}
                 </label>
@@ -53,7 +53,7 @@
                     content-l__col-1">
             <div class="o-form__group">
                 <div class="m-form-field">
-                    <label class="a-label a-label__heading"
+                    <label class="a-label a-label--heading"
                            for="{{ form.title.id_for_label }}">
                         Search by keyword(s)
                     </label>
@@ -90,7 +90,7 @@
                     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"
+                    <label class="a-label a-label--heading"
                            for="{{ form.categories.id_for_label }}"
                            data-cy="categories-heading">
                         Category
@@ -146,7 +146,7 @@
                                 <div class="content-l__col
                                             content-l__col-1-2">
                                     <div class="m-form-field">
-                                        <label class="a-label a-label__heading"
+                                        <label class="a-label a-label--heading"
                                                 for="{{ form.from_date.id_for_label }}">
                                             From:
                                         </label>
@@ -156,7 +156,7 @@
                                 <div class="content-l__col
                                             content-l__col-1-2">
                                     <div class="m-form-field">
-                                        <label class="a-label a-label__heading"
+                                        <label class="a-label a-label--heading"
                                                 for="{{ form.to_date.id_for_label }}">
                                             To:
                                         </label>
@@ -182,7 +182,7 @@
                 <button class="a-btn" type="submit">
                     Apply filters
                 </button>
-                <a class="a-btn a-btn__link a-btn__warning"
+                <a class="a-btn a-btn--link a-btn--warning"
                    href="{{ request.path }}">
                     Clear filters
                 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/footer.html b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
index 2f28e7bb382..8696b22af13 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/footer.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
@@ -18,12 +18,12 @@
 {% import 'v1/includes/molecules/social-media.html' as social_media with context %}
 {% import 'v1/includes/atoms/tagline.html' as tagline with context %}
 <footer class="o-footer">
-    <div class="wrapper wrapper__match-content">
+    <div class="wrapper wrapper--match-content">
 
         <div class="o-footer__pre">
 
             <a class="a-btn
-                      a-btn__secondary
+                      a-btn--secondary
                       o-footer__top-button"
                 data-gtm_ignore="true"
                 data-js-hook="behavior_return-to-top"
@@ -201,6 +201,6 @@
             {{ tagline.render( is_large=true ) }}
         </div>{# END .o-footer-post #}
 
-    </div>{# END .wrapper.wrapper__match-content #}
+    </div>{# END .wrapper.wrapper--match-content #}
 </footer>{# END .o-footer #}
 {% endmacro %}
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 1ca887a7657..f7e6b9ee02d 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 a8bf453f4c1..1e6cf983bbf 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/header.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html
@@ -26,7 +26,7 @@
     {% import 'v1/includes/molecules/notification.html' as notification with context %}
     <div class="o-banner">
       <div class="wrapper
-                  wrapper__match-content">
+                  wrapper--match-content">
             {{ notification.render(
                 'warning',
                 true,
@@ -41,7 +41,7 @@
         {% for banner in banners %}
             <div class="o-banner">
                 <div class="wrapper
-                            wrapper__match-content">
+                            wrapper--match-content">
                     {% include_block banner.content %}
                 </div>
             </div>
@@ -69,7 +69,7 @@
 
     <div class="o-header__content">
 
-        <div class="wrapper wrapper__match-content">
+        <div class="wrapper wrapper--match-content">
             {% if language == 'es' %}
             <a class="o-header__logo" href="/es/">
                 <img class="o-header__logo-img"
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
index c43f67facd8..6fd7e17c600 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
@@ -35,20 +35,20 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
             <div id="mp-chart-loading" class="mp-loading"></div>
             <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">
+                <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">
                         <input class="a-radio" id="mp-line-chart_geo-nation" name="mp-line-chart_geo" type="radio" checked="checked"> <label class="a-label" for="mp-line-chart_geo-nation">Nation</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio u-mb10">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-line-chart_geo-state" name="mp-line-chart_geo" type="radio"> <label class="a-label" for="mp-line-chart_geo-state">State</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio u-mb10">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-line-chart_geo-metro" name="mp-line-chart_geo" type="radio"> <label class="a-label" for="mp-line-chart_geo-metro">Metro area</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio u-mb10">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-line-chart_geo-non-metro" name="mp-line-chart_geo" type="radio"> <label class="a-label" for="mp-line-chart_geo-non-metro">Non-metro area by state</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio">
+                    <div class="m-form-field m-form-field--radio">
                         <input class="a-radio" id="mp-line-chart_geo-county" name="mp-line-chart_geo" type="radio"> <label class="a-label" for="mp-line-chart_geo-county">County</label>
                     </div>
                 </div>
@@ -151,7 +151,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
                       target="_blank" rel="noopener noreferrer">Learn why.</a>
                     </p>
                 </div>
-                <div class="m-form-field m-form-field__checkbox u-mt20" id="mp-line-chart-compare-container" style="display:none">
+                <div class="m-form-field m-form-field--checkbox u-mt20" id="mp-line-chart-compare-container" style="display:none">
                     <input class="a-checkbox" id="mp-line-chart-compare" type="checkbox" id="test_checkbox" checked="checked">
                     <label class="a-label" for="mp-line-chart-compare">Compare to national average</label>
                 </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
index 8a700349ee2..ca221e2cd31 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
@@ -30,14 +30,14 @@
             <h3 class="u-mb30">Choose location to display on the map</h3>
             <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">
+                <div class="m-form-field m-form-field--radio" id="mp-map-geo">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-map_geo-state" name="mp-map_geo" type="radio" checked="checked"> <label class="a-label" for="mp-map_geo-state">States</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio u-mb10">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-map_geo-metro" name="mp-map_geo" type="radio"> <label class="a-label" for="mp-map_geo-metro">Metro and non-metro areas</label>
                     </div>
-                    <div class="m-form-field m-form-field__radio u-mb10">
+                    <div class="m-form-field m-form-field--radio u-mb10">
                         <input class="a-radio" id="mp-map_geo-county" name="mp-map_geo" type="radio"> <label class="a-label" for="mp-map_geo-county">Counties</label>
                     </div>
                 </div>
@@ -154,7 +154,7 @@ <h4 class="u-mt30">Select month and year to display</h4>
             </fieldset>
             {# TODO: Look into using the default notification macro #}
             <div class="m-notification
-                        m-notification__warning
+                        m-notification--warning
                         u-mt30"
                   id="mp-map-notification">
                 {{ svg_icon('warning-round') }}
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 063df9fdc13..07096aa7e2b 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
@@ -64,7 +64,7 @@ <h3>Table of contents</h3>
                 {{ _navlink(item.id + ". " + item.header, item.anchor, true) }}
                 {% if item.children %}
                 <ul class="o-secondary-nav__list
-                           o-secondary-nav__list__children">
+                           o-secondary-nav__list--children">
                     {%- for child in item.children %}
                     <li class="m-list__item">
                         {{ _navlink(child.id + ". " + child.header, child.anchor, false) }}
@@ -81,8 +81,8 @@ <h3>Table of contents</h3>
 
 {% 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 '' }}"
+          {{ '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 ecdba831f31..fd2afb676b0 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
@@ -16,7 +16,7 @@
 {%- set any_children = nav_items | map( attribute="children" ) | reject( "undefined" ) | list -%}
 
 <nav class="o-secondary-nav
-            {{ '' if any_children else 'o-secondary-nav__no-children' }}"
+            {{ '' if any_children else 'o-secondary-nav--no-children' }}"
      aria-label="{{ _('Section navigation') }}">
 
     <button class="o-secondary-nav__header" type="button" aria-expanded="false">
@@ -41,7 +41,7 @@
                 {{ _navlink(item.title, item.url, true, item.active) }}
             {%- if item.children -%}
                 <ul class="o-secondary-nav__list
-                           o-secondary-nav__list__children">
+                           o-secondary-nav__list--children">
                 {%- for child in item.children -%}
                     <li>
                         {{ _navlink(child.title, child.url, false, child.active) }}
@@ -58,8 +58,8 @@
 
 {% 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 '' }}"
+          {{ '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/tables/base.html b/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
index 6f855e70f11..d6c5da1e756 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
@@ -51,7 +51,7 @@
 {%- endif %}
 
 <table class="o-table
-    {{- ' o-table__stack-on-small' if stack_on_mobile else '' -}}
+    {{- ' o-table--stack-on-small' if stack_on_mobile else '' -}}
     {{- ' u-w100pct' if is_full_width else '' -}}
 ">
     {% if value.data.columns | selectattr('heading') | list -%}
diff --git a/cfgov/v1/jinja2/v1/layouts/404.html b/cfgov/v1/jinja2/v1/layouts/404.html
index 26441469287..4713950a05b 100644
--- a/cfgov/v1/jinja2/v1/layouts/404.html
+++ b/cfgov/v1/jinja2/v1/layouts/404.html
@@ -22,7 +22,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <header>
             <h1>404: Page not found</h1>
             <p class="lead-paragraph">
@@ -32,13 +32,13 @@ <h1>404: Page not found</h1>
             </p>
         </header>
 
-        <aside class="block block__sub">
+        <aside class="block block--sub">
             <ul class="m-list m-list--horizontal m-list__divider">
                 <li class="m-list__item">
-                    <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
+                    <a href="/" class="a-btn a-btn--full-on-xs">Visit homepage</a>
                 </li>
                 <li class="m-list__item">
-                    <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
+                    <a class="a-btn a-btn--full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
                 </li>
@@ -46,7 +46,7 @@ <h1>404: Page not found</h1>
         </aside>
 
         <p>Are you sure this is the right web address?
-            <a class="a-link a-link__jump"
+            <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>
             </a>
diff --git a/cfgov/v1/jinja2/v1/layouts/500.html b/cfgov/v1/jinja2/v1/layouts/500.html
index b19c658eeda..a0cb4d91ee3 100644
--- a/cfgov/v1/jinja2/v1/layouts/500.html
+++ b/cfgov/v1/jinja2/v1/layouts/500.html
@@ -22,7 +22,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <header>
             <h1>500: Server error</h1>
             <p class="lead-paragraph">
@@ -32,13 +32,13 @@ <h1>500: Server error</h1>
             </p>
         </header>
 
-        <aside class="block block__sub">
+        <aside class="block block--sub">
             <ul class="m-list m-list--horizontal m-list__divider">
                 <li class="m-list__item">
-                    <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
+                    <a href="/" class="a-btn a-btn--full-on-xs">Visit homepage</a>
                 </li>
                 <li class="m-list__item">
-                    <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
+                    <a class="a-btn a-btn--full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
                 </li>
@@ -46,7 +46,7 @@ <h1>500: Server error</h1>
         </aside>
 
         <p>Are you sure this is the right web address?
-            <a class="a-link a-link__jump"
+            <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>
             </a>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
index 950fca69dc0..20bf97c29db 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
@@ -8,7 +8,7 @@
 {%- endblock %}
 
 {% block content scoped %}
-    <main class="u-layout-grid u-layout-grid__1-3
+    <main class="u-layout-grid u-layout-grid--1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
index f45a4477bd4..2527f48ef5b 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
@@ -1,7 +1,7 @@
 {% extends 'v1/layouts/base.html' %}
 
 {% block content scoped %}
-    <main class="u-layout-grid u-layout-grid__2-1
+    <main class="u-layout-grid u-layout-grid--2-1
                  {% block content_modifiers -%}{%- endblock %}"
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
diff --git a/cfgov/v1/jinja2/v1/newsroom/index.html b/cfgov/v1/jinja2/v1/newsroom/index.html
index 3bbd5b15db9..3e0033f412a 100644
--- a/cfgov/v1/jinja2/v1/newsroom/index.html
+++ b/cfgov/v1/jinja2/v1/newsroom/index.html
@@ -7,19 +7,19 @@
         {% if 'featured_content' in block.block_type %}
             <div class="block
                         {{ 'u-mt0' if loop.first }}">
-                        {# u-mt0 is used instead of block__flush-top to keep top border #}
+                        {# u-mt0 is used instead of block--flush-top to keep top border #}
                 {% include_block block %}
             </div>
         {% elif loop.index == 1 %}
         <div class="block
-                    block__flush-top">
+                    block--flush-top">
             {% include_block block %}
         </div>
         {% endif %}
     {% endfor %}
     {% for block in page.content %}
         {% if 'filter_controls' in block.block_type %}
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 {% include_block block %}
             </div>
         {% else %}
@@ -37,13 +37,13 @@
             {{ streamfield_sidefoot.render(page.sidefoot) }}
         {% endif %}
         <div class="block
-                    block__bg
-                    block__flush-sides
-                    block__flush-bottom
-                    block__border-top">
+                    block--bg
+                    block--flush-sides
+                    block--flush-bottom
+                    block--border-top">
             <div class="content-l">
                 <section class="block
-                                block__flush-top
+                                block--flush-top
                                 content-l__col
                                 content-l__col-1-2">
                     {% import 'v1/includes/molecules/related-content.html' as related_links %}
diff --git a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
index 7ad0a95b68e..fe71e7083d2 100644
--- a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
+++ b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
@@ -12,7 +12,7 @@ <h2 class="m-slug-header__heading">
             or have questions about the content,
             please contact the press office.
         </p>
-        <a class="a-link a-link__jump"
+        <a class="a-link a-link--jump"
            href="/about-us/newsroom/press-resources/">
             Go to press resources page
         </a>
diff --git a/cfgov/v1/jinja2/v1/story_page.html b/cfgov/v1/jinja2/v1/story_page.html
index 85040f9a415..7ccb8af3f89 100644
--- a/cfgov/v1/jinja2/v1/story_page.html
+++ b/cfgov/v1/jinja2/v1/story_page.html
@@ -4,11 +4,11 @@
     {% for block in page.header -%}
         {% if block.block_type == 'features' %}
             <section class="wrapper
-                            wrapper__match-content
+                            wrapper--match-content
                             block
-                            block__bg
-                            block__border
-                            block__flush-top
+                            block--bg
+                            block--border
+                            block--flush-top
                             u-mb0">
                 {% include_block block %}
             </section>
@@ -27,7 +27,7 @@
 
 {% block content_main %}
     {% for block in page.content %}
-        <div class="block{{ ' block__flush-top' if loop.first else '' }}">
+        <div class="block{{ ' block--flush-top' if loop.first else '' }}">
             {% include_block block %}
         </div>
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/sublanding-page/index.html b/cfgov/v1/jinja2/v1/sublanding-page/index.html
index 3c4f0c4efc2..e8f6ff392e1 100644
--- a/cfgov/v1/jinja2/v1/sublanding-page/index.html
+++ b/cfgov/v1/jinja2/v1/sublanding-page/index.html
@@ -21,25 +21,25 @@
 {% block content_main %}
     {% if page.has_hero -%}
         {% 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') }}
     {%- endif %}
 
     {% for block in page.content -%}
         {% if block.block_type == 'notification' %}
             <div class="block
-                        block__flush-top
-                        block__flush-bottom
-                        block__padded-bottom">
+                        block--flush-top
+                        block--flush-bottom
+                        block--padded-bottom">
                 {% include_block block %}
             </div>
         {% elif 'featured_content' 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 'post_preview_snapshot' in block.block_type %}
             {% include_block block %}
         {% elif 'filter_controls' in block.block_type %}
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 {% include_block block %}
             </div>
         {% elif 'text_introduction' not in block.block_type %}
diff --git a/cfgov/v1/jinja2/v1/template_debug.html b/cfgov/v1/jinja2/v1/template_debug.html
index 5794fcfab4f..45b607b507f 100644
--- a/cfgov/v1/jinja2/v1/template_debug.html
+++ b/cfgov/v1/jinja2/v1/template_debug.html
@@ -29,7 +29,7 @@
 {% block header %}{% endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>{{ debug_template_name }}</h1>
 
         {% if debug_test_cases %}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
index 94dd0cc652e..de2b9df02de 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
@@ -1,5 +1,5 @@
 <div class="m-notification
-            m-notification__error
+            m-notification--error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
     <div class="m-notification__content">
diff --git a/cfgov/wellbeing/jinja2/wellbeing/about.html b/cfgov/wellbeing/jinja2/wellbeing/about.html
index 1a5deb0c8ae..14ee406b828 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/about.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/about.html
@@ -82,7 +82,7 @@ <h2>{{ _('Why doesn’t this questionnaire ask about financial details?') }}</h2
         <li>{{ _('Are on track to meet your financial goals') }}</li>
         <li>{{ _('Have the financial freedom to make the choices that allow you to enjoy life') }}</li>
     </ul>
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <p>
             {{ _('That’s why people with the same income, financial experiences, or education can have very different levels of financial well-being.') }}
         </p>
@@ -91,7 +91,7 @@ <h2>{{ _('Why doesn’t this questionnaire ask about financial details?') }}</h2
 
 {% block content_sidebar %}
     {% if (current_language == 'en') %}
-        <div class="block block__flush-top">
+        <div class="block block--flush-top">
             <header class="m-slug-header">
                 <h2 class="m-slug-header__heading">
                     For further reading and research
@@ -134,20 +134,20 @@ <h2 class="m-slug-header__heading">
                 or connection with an entity or activity.
                 Please refer to our
                 <a class="a-link
-                        a-link__icon
-                        a-link__icon-after-text"
+                        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>
                     {{ svg_icon('external-link') -}}
                 </a>.
             </p>
-            <a class="a-link__jump"
+            <a class="a-link--jump"
             href="/data-research/research-reports/financial-well-being-scale/">
                 Download printable versions of the questionnaire in English and Spanish
             </a>
         </div>
     {% else %}
-        <div class="block block__flush-top">
+        <div class="block block--flush-top">
             <header class="m-slug-header">
                 <h2 class="m-slug-header__heading">Recursos Adicionales</h2>
             </header>
diff --git a/cfgov/wellbeing/jinja2/wellbeing/error.html b/cfgov/wellbeing/jinja2/wellbeing/error.html
index e20e9860a2e..1c7ad1f14de 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/error.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/error.html
@@ -18,7 +18,7 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>{{ _('There was a problem with your submission') }}</h1>
 
         {% import 'v1/includes/molecules/translation-links.html' as translation_links with context %}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/home.html b/cfgov/wellbeing/jinja2/wellbeing/home.html
index bfd1aa4d65c..25b6cd0a836 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/home.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/home.html
@@ -90,10 +90,10 @@ <h2>{{ _('Here’s how it works:') }}</h2>
             {{ _('to other U.S. adults from our national survey.') }}
         </p>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
             <div class="m-notification
-                        m-notification__visible
-                        m-notification__warning">
+                        m-notification--visible
+                        m-notification--warning">
                 {{ svg_icon('warning-round') }}
                 <div class="m-notification__content">
                     <p class="m-notification__message">
@@ -121,7 +121,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }}</div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_1-completely"
@@ -134,7 +134,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_1-very-well"
@@ -147,7 +147,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_1-somewhat"
@@ -160,7 +160,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_1-very-little"
@@ -173,7 +173,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_1-not-at-all"
@@ -194,7 +194,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }} </div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_2-completely"
@@ -207,7 +207,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_2-very-well"
@@ -220,7 +220,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_2-somewhat"
@@ -233,7 +233,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_2-very-little"
@@ -246,7 +246,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_2-not-at-all"
@@ -267,7 +267,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }} </div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_3-completely"
@@ -280,7 +280,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_3-very-well"
@@ -293,7 +293,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_3-somewhat"
@@ -306,7 +306,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_3-very-little"
@@ -319,7 +319,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_3-not-at-all"
@@ -340,7 +340,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }} </div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_4-completely"
@@ -353,7 +353,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_4-very-well"
@@ -366,7 +366,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_4-somewhat"
@@ -379,7 +379,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_4-very-little"
@@ -392,7 +392,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_4-not-at-all"
@@ -413,7 +413,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }} </div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_5-completely"
@@ -426,7 +426,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_5-very-well"
@@ -439,7 +439,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_5-somewhat"
@@ -452,7 +452,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_5-very-little"
@@ -465,7 +465,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_5-not-at-all"
@@ -486,7 +486,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement describes me') }} </div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_6-completely"
@@ -499,7 +499,7 @@ <h3 class="a-legend">
                                     {{ _('Completely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_6-very-well"
@@ -512,7 +512,7 @@ <h3 class="a-legend">
                                     {{ _('Very well') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_6-somewhat"
@@ -525,7 +525,7 @@ <h3 class="a-legend">
                                     {{ _('Somewhat') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_6-very-little"
@@ -538,7 +538,7 @@ <h3 class="a-legend">
                                     {{ _('Very little') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_6-not-at-all"
@@ -564,7 +564,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement applies to me') }}</div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_7-always"
@@ -577,7 +577,7 @@ <h3 class="a-legend">
                                     {{ _('Always') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_7-often"
@@ -590,7 +590,7 @@ <h3 class="a-legend">
                                     {{ _('Often') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_7-sometimes"
@@ -603,7 +603,7 @@ <h3 class="a-legend">
                                     {{ _('Sometimes') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_7-rarely"
@@ -616,7 +616,7 @@ <h3 class="a-legend">
                                     {{ _('Rarely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_7-never"
@@ -637,7 +637,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement applies to me') }}</div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_8-always"
@@ -649,7 +649,7 @@ <h3 class="a-legend">
                                     {{ _('Always') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_8-often"
@@ -662,7 +662,7 @@ <h3 class="a-legend">
                                     {{ _('Often') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_8-sometimes"
@@ -675,7 +675,7 @@ <h3 class="a-legend">
                                     {{ _('Sometimes') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_8-rarely"
@@ -688,7 +688,7 @@ <h3 class="a-legend">
                                     {{ _('Rarely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_8-never"
@@ -709,7 +709,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement applies to me') }}</div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_9-always"
@@ -722,7 +722,7 @@ <h3 class="a-legend">
                                     {{ _('Always') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_9-often"
@@ -735,7 +735,7 @@ <h3 class="a-legend">
                                     {{ _('Often') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_9-sometimes"
@@ -748,7 +748,7 @@ <h3 class="a-legend">
                                     {{ _('Sometimes') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_9-rarely"
@@ -761,7 +761,7 @@ <h3 class="a-legend">
                                     {{ _('Rarely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_9-never"
@@ -782,7 +782,7 @@ <h3 class="a-legend">
                         </h3>
                         <div class="o-scale_answer-prefix">{{ _('This statement applies to me') }}</div>
                         <div class="o-scale_answer-options">
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_10-always"
@@ -795,7 +795,7 @@ <h3 class="a-legend">
                                     {{ _('Always') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_10-often"
@@ -808,7 +808,7 @@ <h3 class="a-legend">
                                     {{ _('Often') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_10-sometimes"
@@ -821,7 +821,7 @@ <h3 class="a-legend">
                                     {{ _('Sometimes') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_10-rarely"
@@ -834,7 +834,7 @@ <h3 class="a-legend">
                                     {{ _('Rarely') }}
                                 </label>
                             </div>
-                            <div class="m-form-field m-form-field__radio">
+                            <div class="m-form-field m-form-field--radio">
                                 <input class="a-radio"
                                     type="radio"
                                     id="question_10-never"
@@ -859,9 +859,9 @@ <h2>{{ _('About you') }}</h2>
                             <h3 class="a-legend">
                                 {{ _('Select your age group. This changes the scoring calculation.') }}
                             </h3>
-                            <ul class="m-list m-list__unstyled content-l">
+                            <ul class="m-list m-list--unstyled content-l">
                                 <li class="content-l__col content-l__col-1-2">
-                                    <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                                    <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                                         <input class="a-radio"
                                             type="radio"
                                             name="age"
@@ -876,7 +876,7 @@ <h3 class="a-legend">
                                     </div>
                                 </li>
                                 <li class="content-l__col content-l__col-1-2">
-                                    <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                                    <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                                         <input class="a-radio"
                                             type="radio"
                                             name="age"
@@ -898,9 +898,9 @@ <h3 class="a-legend">
                             <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">
+                            <ul class="m-list m-list--unstyled content-l">
                                 <li class="content-l__col content-l__col-1-2">
-                                    <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                                    <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                                         <input class="a-radio"
                                             type="radio"
                                             name="method"
@@ -916,7 +916,7 @@ <h3 class="a-legend">
                                     </div>
                                 </li>
                                 <li class="content-l__col content-l__col-1-2">
-                                    <div class="m-form-field m-form-field__radio m-form-field__lg-target">
+                                    <div class="m-form-field m-form-field--radio m-form-field--lg-target">
                                         <input class="a-radio"
                                             type="radio"
                                             name="method"
@@ -936,7 +936,7 @@ <h3 class="a-legend">
                 </div>
             </div>
 
-            <div class="block block__flush-top">
+            <div class="block block--flush-top">
                 <div class="o-form__group">
                     <input class="submit-quiz a-btn"
                         id="submit-quiz"
@@ -953,13 +953,13 @@ <h3 class="a-legend">
 {%- endblock %}
 
 {% block content_sidebar -%}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h3>{{ _('About us') }}</h3>
         <p>
             {{ _('We&#39;re the Consumer Financial Protection Bureau (CFPB),') }}
             {{ _('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/">
+        <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>
         </a>
     </div>
@@ -972,7 +972,7 @@ <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
             {{ _('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) }}">
+        <a class="a-link a-link--jump" href="{{ url('fwb_about_' + current_language) }}">
             <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 e6659c9bd89..bc4bc520d38 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/results.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/results.html
@@ -54,7 +54,7 @@ <h1>{{ _('Your financial well-being score') }}</h1>
             {{ _('You’ve taken a good step in understanding your financial picture.') }}
         </p>
     {% elif (current_language == 'en') %}
-        <div class="block block__sub">
+        <div class="block block--sub">
             {{ notification.render(
                 'warning',
                 true,
@@ -64,7 +64,7 @@ <h1>{{ _('Your financial well-being score') }}</h1>
             ) }}
         </div>
     {% else %}
-        <div class="block block__sub">
+        <div class="block block--sub">
             {{ notification.render(
                 'warning',
                 true,
@@ -90,7 +90,7 @@ <h1>{{ _('Your financial well-being score') }}</h1>
         <li class="m-list__item u-js-only">
             <a class="m-list__link
                       a-link
-                      a-link__icon"
+                      a-link--icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
                 <span class="a-link__text">{{ _('Print') }}</span>
@@ -99,7 +99,7 @@ <h1>{{ _('Your financial well-being score') }}</h1>
         <li class="m-list__item">
             <a class="m-list__link
                       a-link
-                      a-link__icon"
+                      a-link--icon"
                href="../../save-as-pdf-instructions/"
                target="_blank"
                rel="noopener noreferrer">
@@ -151,7 +151,7 @@ <h2>{{ _('Your result') }}</h2>
         </p>
     {% if user_score %}
         <div class="o-expandable
-                    o-expandable__border">
+                    o-expandable--border">
             <button class="o-expandable__header">
                 <span class="o-expandable__label">
                     {{ _('Review your answers') }}
@@ -201,14 +201,14 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <b>{{ _('Track where your money goes.') }}</b>
                         {{ _('Fill out the') }}
                         <a class="a-link
-                                  a-link__icon"
+                                  a-link--icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_bill-calendar.pdf">
                             <span class="a-link__text">{{ _('bill calendar') }}</span>
                             {{ svg_icon('download') }}
                         </a>
                         {{ _('and') }}
                         <a class="a-link
-                                  a-link__icon"
+                                  a-link--icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_spending-tracker.pdf">
                             <span class="a-link__text">{{ _('spending tracker') }}</span>
                             {{ svg_icon('download') }}
@@ -220,7 +220,7 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <b>Get a grip on debt.</b>
                         Stay on top of what you owe with our
                         <a class="a-link
-                                  a-link__icon"
+                                  a-link--icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_debt-worksheet.pdf">
                             <span class="a-link__text">debt log</span>
                             {{ svg_icon('download') }}
@@ -259,14 +259,14 @@ <h3>{{ _('Get on track for your financial future') }}</h3>
                         <b>Create an action plan to meet your goals.</b>
                         Use our
                         <a class="a-link
-                                  a-link__icon"
+                                  a-link--icon"
                            href="https://files.consumerfinance.gov/f/documents/201705_cfpb_My-New-Money-Goal.pdf">
                             <span class="a-link__text">worksheet</span>
                             {{ svg_icon('download') }}
                         </a>
                         or
                         <a class="a-link
-                                  a-link__icon"
+                                  a-link--icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_monthly-budget.pdf">
                             <span class="a-link__text">budgeting tool</span>
                             {{ svg_icon('download') }}
@@ -473,7 +473,7 @@ <h4>{{ _('Compare by') }}</h4>
 
 {% block content_sidebar %}
     {% if (current_language == 'en') %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <header class="m-slug-header">
             <h2 class="m-slug-header__heading">Looking for more help?</h2>
         </header>
@@ -510,7 +510,7 @@ <h2 class="m-slug-header__heading">Looking for more help?</h2>
         </ul>
     </div>
     {% endif %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <header class="m-slug-header">
             <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
         </header>
@@ -518,7 +518,7 @@ <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
             {{ _('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) }}">
+        <a class="a-link a-link--jump" href="{{ url('fwb_about_' + current_language) }}">
             <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 c447bf349db..53c84dc84ee 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 bdf5ad5a008..3db44c3efff 100644
--- a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
+++ b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
@@ -19,8 +19,8 @@
 <div class="cbg-checklist">
   <div class="block block--sub u-hidden cbg-checklist-error">
     <div class="m-notification
-                m-notification__visible
-                m-notification__error">
+                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>
diff --git a/docs/atomic-structure.md b/docs/atomic-structure.md
index aab749b3182..7a2c801544c 100644
--- a/docs/atomic-structure.md
+++ b/docs/atomic-structure.md
@@ -53,8 +53,8 @@ Prefixed with `m-` in class names.
 ```html
 <div
   class="m-notification
-         m-notification__visible
-         m-notification__error"
+         m-notification--visible
+         m-notification--error"
 >
   {{ svg_icon('error') }}
   <div class="m-notification__content" role="alert">
@@ -69,7 +69,7 @@ Prefixed with `m-` in class names.
 .m-notification {
     display: none;
     position: relative;
-    padding: @notification-padding__px;
+    padding: @notification-padding-px;
     …
 }
 ```
diff --git a/docs/feature-flags.md b/docs/feature-flags.md
index 3adda21bcdc..d29096c1ab3 100644
--- a/docs/feature-flags.md
+++ b/docs/feature-flags.md
@@ -54,10 +54,10 @@ An example is [the `BETA_NOTICE flag` as implemented in `header.html`](https://g
 {% if flag_enabled('BETA_NOTICE') %}
 <div class="o-banner">
     <div class="wrapper
-                wrapper__match-content">
+                wrapper--match-content">
         <div class="m-notification
-                    m-notification__warning
-                    m-notification__visible">
+                    m-notification--warning
+                    m-notification--visible">
             …
             This beta site is a work in progress.
         </div>
@@ -86,10 +86,10 @@ The `BETA_NOTICE` [Jinja2](#jinja2) example above when implemented with Django t
 {% if beta_flag %}
 <div class="o-banner">
     <div class="wrapper
-                wrapper__match-content">
+                wrapper--match-content">
         <div class="m-notification
-                    m-notification__warning
-                    m-notification__visible">
+                    m-notification--warning
+                    m-notification--visible">
             …
             This beta site is a work in progress.
         </div>
diff --git a/docs/javascript-unit-tests.md b/docs/javascript-unit-tests.md
index d31571aa263..2b8e5ba4b03 100644
--- a/docs/javascript-unit-tests.md
+++ b/docs/javascript-unit-tests.md
@@ -507,11 +507,11 @@ function _setType(type) {
 
   // Remove existing type class
   const classList = _dom.classList;
-  classList.remove(`${BASE_CLASS}__${_currentType}`);
+  classList.remove(`${BASE_CLASS}___${_currentType}`);
 
   if (type === SUCCESS || type === WARNING || type === ERROR) {
     // Add new type class and update the value of _currentType
-    classList.add(`${BASE_CLASS}__${type}`);
+    classList.add(`${BASE_CLASS}___${type}`);
     _currentType = type;
 
     // Replace <svg> element with contents of type_ICON
@@ -602,7 +602,7 @@ describe( 'setTypeAndContent()', () => {
       ''
     );
 
-    expect( notificationElem.classList ).toContain( 'm-notification__success' );
+    expect( notificationElem.classList ).toContain( 'm-notification--success' );
   });
 
   it( 'should update the notification type for the warning state', () => {
@@ -613,7 +613,7 @@ describe( 'setTypeAndContent()', () => {
       ''
     );
 
-    expect( notificationElem.classList ).toContain( 'm-notification__warning' );
+    expect( notificationElem.classList ).toContain( 'm-notification--warning' );
   });
 
   …
diff --git a/find-replace.js b/find-replace.js
new file mode 100755
index 00000000000..41a4ad9a32e
--- /dev/null
+++ b/find-replace.js
@@ -0,0 +1,116 @@
+import * as fs from 'fs';
+import { glob } from 'glob';
+
+async function extractBEM() {
+  let uniqueClasses = [];
+  try {
+    const rawData = await fs.readFileSync(
+      './cfgov/static_built/css/main.css',
+      'utf8',
+    );
+
+    // Strip comments.
+    let data = rawData.replaceAll(/\/\*.*\*\//g, '');
+
+    // Strip URLs.
+    data = data.replaceAll(
+      /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi,
+      '',
+    );
+
+    // Parse out classes.
+    const classes = [
+      ...new Set(
+        data.match(/(?:[\.]{1})([a-zA-Z_]+[\w-_]*)(?:[\s\.\,\{\>#\:]{0})/gim),
+      ),
+    ];
+
+    classes.forEach((clazz) => {
+      // Strip leading period.
+      clazz = clazz.substring(1);
+
+      // Build sets of the old and new BEM.
+      const oldBEM = updateOldBEM(clazz);
+      const newBEM = updateNewBEM(clazz);
+
+      if (oldBEM !== newBEM) {
+        uniqueClasses.push([oldBEM, newBEM]);
+      }
+    });
+  } catch (err) {
+    console.error(err);
+  }
+
+  return uniqueClasses;
+}
+
+function isBEM(clazz) {
+  if (
+    clazz.match(
+      /^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$/gim,
+    ) !== null
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function updateOldBEM(clazz) {
+  if (isBEM(clazz)) {
+    //console.log(clazz);
+    // BEM.
+    clazz = clazz.replaceAll('__', '_');
+    clazz = clazz.replaceAll('--', '__');
+  }
+
+  return clazz;
+}
+
+function updateNewBEM(clazz) {
+  if (!isBEM(clazz)) {
+    // Not BEM.
+    clazz = clazz.replaceAll('__', '--');
+    clazz = clazz.replaceAll('_', '__');
+  }
+
+  return clazz;
+}
+
+/*
+const beforeList = await fs
+  .readFileSync('css-classes-before.txt')
+  .toString()
+  .split('\n');
+
+const afterList = await fs
+  .readFileSync('css-classes-after.txt')
+  .toString()
+  .split('\n');
+*/
+
+async function findAndReplaceBEM() {
+  const filePaths = await glob('**/*.{md,html,js,less,css}', {
+    ignore: ['CHANGELOG.md', 'node_modules/**', 'test/unit-test-coverage/**'],
+  });
+
+  const oldBEMList = await extractBEM();
+
+  let file;
+  let processedFile;
+  filePaths.forEach(async (filePath) => {
+    // A screenshot with a JS extention can be seen as a directory.
+    if (!fs.lstatSync(filePath).isDirectory()) {
+      file = await fs.readFileSync(filePath, 'utf8');
+      processedFile = file;
+      oldBEMList.forEach(async (clazz) => {
+        const oldBEMClass = clazz[0];
+        const newBEMClass = clazz[1];
+        processedFile = processedFile.replaceAll(oldBEMClass, newBEMClass);
+      });
+      await fs.writeFileSync(filePath, processedFile, 'utf8');
+    }
+  });
+}
+
+findAndReplaceBEM();
diff --git a/npm-packages-offline-cache/@isaacs-cliui-8.0.2.tgz b/npm-packages-offline-cache/@isaacs-cliui-8.0.2.tgz
new file mode 100644
index 00000000000..30152c67384
Binary files /dev/null and b/npm-packages-offline-cache/@isaacs-cliui-8.0.2.tgz differ
diff --git a/npm-packages-offline-cache/@pkgjs-parseargs-0.11.0.tgz b/npm-packages-offline-cache/@pkgjs-parseargs-0.11.0.tgz
new file mode 100644
index 00000000000..86044d67ee6
Binary files /dev/null and b/npm-packages-offline-cache/@pkgjs-parseargs-0.11.0.tgz differ
diff --git a/npm-packages-offline-cache/ansi-styles-6.2.1.tgz b/npm-packages-offline-cache/ansi-styles-6.2.1.tgz
new file mode 100644
index 00000000000..bc376b1a017
Binary files /dev/null and b/npm-packages-offline-cache/ansi-styles-6.2.1.tgz differ
diff --git a/npm-packages-offline-cache/brace-expansion-2.0.1.tgz b/npm-packages-offline-cache/brace-expansion-2.0.1.tgz
new file mode 100644
index 00000000000..108642695e8
Binary files /dev/null and b/npm-packages-offline-cache/brace-expansion-2.0.1.tgz differ
diff --git a/npm-packages-offline-cache/eastasianwidth-0.2.0.tgz b/npm-packages-offline-cache/eastasianwidth-0.2.0.tgz
new file mode 100644
index 00000000000..f9fd277f6ed
Binary files /dev/null and b/npm-packages-offline-cache/eastasianwidth-0.2.0.tgz differ
diff --git a/npm-packages-offline-cache/foreground-child-3.1.1.tgz b/npm-packages-offline-cache/foreground-child-3.1.1.tgz
new file mode 100644
index 00000000000..4067ad7d265
Binary files /dev/null and b/npm-packages-offline-cache/foreground-child-3.1.1.tgz differ
diff --git a/npm-packages-offline-cache/glob-10.3.12.tgz b/npm-packages-offline-cache/glob-10.3.12.tgz
new file mode 100644
index 00000000000..03278323763
Binary files /dev/null and b/npm-packages-offline-cache/glob-10.3.12.tgz differ
diff --git a/npm-packages-offline-cache/jackspeak-2.3.6.tgz b/npm-packages-offline-cache/jackspeak-2.3.6.tgz
new file mode 100644
index 00000000000..322b6042fb7
Binary files /dev/null and b/npm-packages-offline-cache/jackspeak-2.3.6.tgz differ
diff --git a/npm-packages-offline-cache/lru-cache-10.2.0.tgz b/npm-packages-offline-cache/lru-cache-10.2.0.tgz
new file mode 100644
index 00000000000..79cd7dc93fa
Binary files /dev/null and b/npm-packages-offline-cache/lru-cache-10.2.0.tgz differ
diff --git a/npm-packages-offline-cache/minimatch-9.0.4.tgz b/npm-packages-offline-cache/minimatch-9.0.4.tgz
new file mode 100644
index 00000000000..c12729e23ad
Binary files /dev/null and b/npm-packages-offline-cache/minimatch-9.0.4.tgz differ
diff --git a/npm-packages-offline-cache/minipass-7.0.4.tgz b/npm-packages-offline-cache/minipass-7.0.4.tgz
new file mode 100644
index 00000000000..f5881aa976d
Binary files /dev/null and b/npm-packages-offline-cache/minipass-7.0.4.tgz differ
diff --git a/npm-packages-offline-cache/path-scurry-1.10.2.tgz b/npm-packages-offline-cache/path-scurry-1.10.2.tgz
new file mode 100644
index 00000000000..82b70c16aa2
Binary files /dev/null and b/npm-packages-offline-cache/path-scurry-1.10.2.tgz differ
diff --git a/npm-packages-offline-cache/string-width-5.1.2.tgz b/npm-packages-offline-cache/string-width-5.1.2.tgz
new file mode 100644
index 00000000000..90687c3121e
Binary files /dev/null and b/npm-packages-offline-cache/string-width-5.1.2.tgz differ
diff --git a/npm-packages-offline-cache/wrap-ansi-8.1.0.tgz b/npm-packages-offline-cache/wrap-ansi-8.1.0.tgz
new file mode 100644
index 00000000000..ffec09d1bab
Binary files /dev/null and b/npm-packages-offline-cache/wrap-ansi-8.1.0.tgz differ
diff --git a/package.json b/package.json
index a33646de221..9d09276d4d5 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "cfpb-chart-builder": "6.5.0",
     "esbuild": "0.20.2",
     "fancy-log": "2.0.0",
+    "glob": "10.3.12",
     "highcharts": "7.2.2",
     "less": "4.2.0",
     "lodash.clonedeep": "4.5.0",
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 3733b4bb57e..8f630b6a271 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/filterable-lists/filter-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
index 8af2a84c7c0..bf845642705 100644
--- a/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
@@ -4,7 +4,7 @@ export class Filter {
   }
 
   clear() {
-    cy.get('.a-btn__warning').click({ force: true });
+    cy.get('.a-btn--warning').click({ force: true });
   }
 
   typeAheadLanguage(name) {
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 43600b6988f..512d9774e4a 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
@@ -118,7 +118,7 @@ export class FilterableListControl {
   }
 
   clearFilters() {
-    cy.get('.a-btn__warning').click({ force: true });
+    cy.get('.a-btn--warning').click({ force: true });
   }
 
   showFilters() {
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 dca078bf58a..8c13293e076 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
@@ -16,7 +16,7 @@ export class FilterableList {
   }
 
   clearFilters() {
-    cy.get('.a-btn__warning').click();
+    cy.get('.a-btn--warning').click();
   }
 
   setFromDate(date) {
diff --git a/test/cypress/integration/components/header/header-helpers.cy.js b/test/cypress/integration/components/header/header-helpers.cy.js
index e189ec4b23a..b2d57ba0a21 100644
--- a/test/cypress/integration/components/header/header-helpers.cy.js
+++ b/test/cypress/integration/components/header/header-helpers.cy.js
@@ -22,6 +22,6 @@ export class Header {
   }
 
   globalEyebrowHorizontal() {
-    return cy.get('.m-global-eyebrow__horizontal');
+    return cy.get('.m-global-eyebrow--horizontal');
   }
 }
diff --git a/test/cypress/integration/components/header/mega-menu-helpers.cy.js b/test/cypress/integration/components/header/mega-menu-helpers.cy.js
index 5916c5d21b2..fd8a75fa9fa 100644
--- a/test/cypress/integration/components/header/mega-menu-helpers.cy.js
+++ b/test/cypress/integration/components/header/mega-menu-helpers.cy.js
@@ -2,7 +2,7 @@ const BASE_CLASS = '.o-mega-menu';
 
 export class MegaMenuDesktop {
   tabs() {
-    return cy.get(`${BASE_CLASS}_content-1-link__has-children`);
+    return cy.get(`${BASE_CLASS}__content-1-link__has-children`);
   }
 
   firstTab() {
@@ -11,13 +11,13 @@ export class MegaMenuDesktop {
 
   firstTabOpenIcon() {
     return this.firstTab().find(
-      `${BASE_CLASS}_content-link-icon-open .cf-icon-svg`,
+      `${BASE_CLASS}__content-link-icon-open .cf-icon-svg`,
     );
   }
 
   firstTabCloseIcon() {
     return this.firstTab().find(
-      `${BASE_CLASS}_content-link-icon-closed .cf-icon-svg`,
+      `${BASE_CLASS}__content-link-icon-closed .cf-icon-svg`,
     );
   }
 
@@ -26,36 +26,36 @@ export class MegaMenuDesktop {
   }
 
   firstPanelContainer() {
-    return cy.get(`${BASE_CLASS}_content-2`).first();
+    return cy.get(`${BASE_CLASS}__content-2`).first();
   }
 
   firstPanel() {
-    return cy.get(`${BASE_CLASS}_content-2-wrapper`).first();
+    return cy.get(`${BASE_CLASS}__content-2-wrapper`).first();
   }
 
   secondPanel() {
-    return cy.get(`${BASE_CLASS}_content-2-wrapper`).eq(1);
+    return cy.get(`${BASE_CLASS}__content-2-wrapper`).eq(1);
   }
 }
 
 export class MegaMenuMobile {
   rootTrigger() {
-    return cy.get(`${BASE_CLASS}_trigger`);
+    return cy.get(`${BASE_CLASS}__trigger`);
   }
 
   firstLevelTrigger() {
-    return cy.get(`${BASE_CLASS}_content-1-link__has-children`).first();
+    return cy.get(`${BASE_CLASS}__content-1-link__has-children`).first();
   }
 
   secondLevelFirstBackTrigger() {
-    return cy.get(`${BASE_CLASS}_content-2-alt-trigger`).first();
+    return cy.get(`${BASE_CLASS}__content-2-alt-trigger`).first();
   }
 
   firstPanel() {
-    return cy.get(`${BASE_CLASS}_content-1`).first();
+    return cy.get(`${BASE_CLASS}__content-1`).first();
   }
 
   secondPanel() {
-    return cy.get(`${BASE_CLASS}_content-2`).first();
+    return cy.get(`${BASE_CLASS}__content-2`).first();
   }
 }
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 9681cd53b3d..1e24ef3fec9 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
@@ -36,7 +36,7 @@ describe('Ask CFPB', () => {
       search.enter(search.longTerm());
       search
         .input()
-        .should('contain.class', 'a-text-input__error')
+        .should('contain.class', 'a-text-input--error')
         .and('have.attr', 'maxlength');
       search.maxLengthErrorMessage().should('be.visible');
       search.submitButton().should('be.disabled');
diff --git a/test/cypress/integration/consumer-tools/before-you-claim/before-you-claim.cy.js b/test/cypress/integration/consumer-tools/before-you-claim/before-you-claim.cy.js
index 75e2131e98a..76c0e50861a 100644
--- a/test/cypress/integration/consumer-tools/before-you-claim/before-you-claim.cy.js
+++ b/test/cypress/integration/consumer-tools/before-you-claim/before-you-claim.cy.js
@@ -37,7 +37,7 @@ describe('Planning your Social Security', () => {
       'not.be.visible',
     );
     cy.get(
-      '#claiming-social-security #step-one-form .cf-icon-svg__help-round',
+      '#claiming-social-security #step-one-form .cf-icon-svg--help-round',
     ).click();
     cy.get('#claiming-social-security #tooltip-container').should('be.visible');
   });
@@ -45,7 +45,7 @@ describe('Planning your Social Security', () => {
   it('should show error if user is over the age of 70', () => {
     claim.enterAgeOver70();
     cy.get(
-      '#claiming-social-security #step-one-form .m-notification__warning',
+      '#claiming-social-security #step-one-form .m-notification--warning',
     ).should('be.visible');
   });
 
diff --git a/test/cypress/integration/consumer-tools/find-a-housing-counselor/find-a-housing-counselor-helpers.cy.js b/test/cypress/integration/consumer-tools/find-a-housing-counselor/find-a-housing-counselor-helpers.cy.js
index 038f7e08b2d..36c1ad42dcb 100644
--- a/test/cypress/integration/consumer-tools/find-a-housing-counselor/find-a-housing-counselor-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/find-a-housing-counselor/find-a-housing-counselor-helpers.cy.js
@@ -27,7 +27,7 @@ export class FindAHousingCounselor {
   }
 
   searchZipCode(zipCode) {
-    cy.get('#hud_hca_api_query').type(zipCode);
+    cy.get('#hud-hca-api-query').type(zipCode);
     cy.get('[data-cy=btn-fahc-submit]').click();
   }
 
diff --git a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas.cy.js b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas.cy.js
index 6758138887e..ce21f693d9a 100644
--- a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas.cy.js
+++ b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas.cy.js
@@ -33,7 +33,7 @@ describe('Obtener Respuestas', () => {
       buscar.enter(buscar.longTerm());
       buscar
         .input()
-        .should('contain.class', 'a-text-input__error')
+        .should('contain.class', 'a-text-input--error')
         .and('have.attr', 'maxlength');
       buscar.maxLengthErrorMessage().should('be.visible');
       buscar.submitButton().should('be.disabled');
diff --git a/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js b/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
index 0f368f19c10..b7329f7b72d 100644
--- a/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/tdp-activity-search/tdp-activity-search-helpers.cy.js
@@ -10,7 +10,7 @@ export class ActivitySearch {
   }
 
   clearFilters() {
-    return cy.get('.results_filters-clear');
+    return cy.get('.results__filters-clear');
   }
 
   resultsFilterTag() {
@@ -18,7 +18,7 @@ export class ActivitySearch {
   }
 
   resultsCountEmpty() {
-    return cy.get('.results_count__empty');
+    return cy.get('.results__count--empty');
   }
 
   search(term) {
diff --git a/test/cypress/integration/paying-for-college/your-financial-path-to-graduation/financial-path-helpers.cy.js b/test/cypress/integration/paying-for-college/your-financial-path-to-graduation/financial-path-helpers.cy.js
index 63bc82d0fc3..5e6a5459e6b 100644
--- a/test/cypress/integration/paying-for-college/your-financial-path-to-graduation/financial-path-helpers.cy.js
+++ b/test/cypress/integration/paying-for-college/your-financial-path-to-graduation/financial-path-helpers.cy.js
@@ -43,11 +43,11 @@ export class PfcFinancialPathToGraduation {
   }
 
   affordLoanChoice(name) {
-    cy.get(`#affording-loans-choices_${name}`).check({ force: true });
+    cy.get(`#affording-loans-choices__${name}`).check({ force: true });
   }
 
   actionPlan(name) {
-    cy.get(`#action-plan_${name}`).check({ force: true });
+    cy.get(`#action-plan__${name}`).check({ force: true });
   }
 
   costsQuestionChoice(name) {
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 d5a37f5c38f..6509b13234a 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,9 +1,9 @@
 export default `
-<main class="u-layout-grid u-layout-grid__1-3 o-fig" id="main">
+<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">
             <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">
+                <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>
                 </svg>
                 <a href="/data-research/"> Data &amp; Research </a> / <a href="/data-research/small-business-lending/"> Small Business Lending Database </a> /
@@ -41,11 +41,11 @@ export default `
                         </div>
                         <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">
+                                <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>
@@ -55,8 +55,8 @@ export default `
                                 </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">
+                                <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>
@@ -64,7 +64,7 @@ export default `
                                         <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>
+                                        <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>
@@ -129,8 +129,8 @@ export default `
                                 </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">
+                                <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>
@@ -149,10 +149,10 @@ export default `
                                 </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>
@@ -164,7 +164,7 @@ export default `
             <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">
-                <a class="a-link a-link__icon" href="javascript:window.print()">
+                <a class="a-link a-link--icon" href="javascript:window.print()">
                     <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
@@ -270,10 +270,10 @@ export default `
                 </p>
                 <p data-block-key="cqkhf">Data fields are presented below in the order they are recorded in the register. For a machine-readable view of the data specification, see the following link:</p>
                 <p data-block-key="cvu2g">
-                    <a class="a-link a-link__icon"
+                    <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>
-                        <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
+                        <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>
@@ -372,7 +372,7 @@ export default `
                     </ul>
                     <p>Indicate the means by which the applicant submitted the application by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -423,7 +423,7 @@ export default `
                     </ul>
                     <p>Indicate the application recipient by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -487,7 +487,7 @@ export default `
                     </ul>
                     <p>Indicate the credit product by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -589,7 +589,7 @@ export default `
                         guarantees, including any 'other' guarantee(s) specified in the free-form text field, may be entered.
                     </p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -706,7 +706,7 @@ export default `
                     </ul>
                     <p>Indicate whether 'loan term' is applicable for this application for credit by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -789,7 +789,7 @@ export default `
                     </ul>
                     <p>Indicate the credit purpose(s) by entering up to three of the specified codes. If there is more than one credit purpose, enter each, in any order, separated by a semicolon.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -916,7 +916,7 @@ export default `
                     </ul>
                     <p>Indicate whether 'amount applied for' is provided by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1039,7 +1039,7 @@ export default `
                     </ul>
                     <p>Indicate what action is taken by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1132,7 +1132,7 @@ export default `
                         <li>If Cashflow, enter 4</li>
                         <li>If Cashflow, Collateral, Time in business, and Government loan program criteria, enter 4;5;6;7 or 7;5;6;4 etc.</li>
                     </ul>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1294,7 +1294,7 @@ export default `
                         transaction information, and variable rate transaction information, as applicable.
                     </p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1445,7 +1445,7 @@ export default `
                     </ul>
                     <p>For originated credit and credit that is approved but not accepted, that has a covered variable rate component, indicate the index name by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1667,7 +1667,7 @@ export default `
                     </ul>
                     <p>Indicate whether 'MCA/sales-based: additional cost for merchant cash advances or other sales-based financing' is applicable by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1741,7 +1741,7 @@ export default `
                     </ul>
                     <p>For originated credit and credit that is approved but not accepted, indicate whether a prepayment penalty could be included under current policies and procedures by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1786,7 +1786,7 @@ export default `
                     </ul>
                     <p>For originated credit and credit that is approved but not accepted, indicate whether the terms of the transaction include a prepayment penalty by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1837,7 +1837,7 @@ export default `
                     </ul>
                     <p>Indicate the type of address or location used to determine the census tract by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1917,7 +1917,7 @@ export default `
                     </ul>
                     <p>Indicate whether 'gross annual revenue' is reported by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -1991,7 +1991,7 @@ export default `
                     </ul>
                     <p>Indicate whether NAICS code is provided by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2063,7 +2063,7 @@ export default `
                         principal owners.
                     </p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2138,7 +2138,7 @@ export default `
                     </ul>
                     <p>Indicate whether the applicant provided information on 'time in business' by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2235,7 +2235,7 @@ export default `
                         <li>If women-owned and LGBTQI+-owned, enter 2;3 or 3;2</li>
                         <li>If LGBTQI+-owned and the applicant responded that they did not wish to provide this information, enter 3</li>
                     </ul>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2304,7 +2304,7 @@ export default `
                     </ul>
                     <p>Indicate whether number of principal owners is provided by entering one of the specified codes.</p>
                     <p></p>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2410,7 +2410,7 @@ export default `
                         <li>If Mexican and the applicant responded that they did not wish to provide this information, enter 12</li>
                         <li>If responded Argentinean in the free form-text field but the applicant did not select Other Hispanic or Latino ethnicity, enter 977. May also enter 14.</li>
                     </ul>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2519,7 +2519,7 @@ export default `
                         <li>If Asian and the applicant responded that they did not wish to provide this information, enter 2.</li>
                         <li>If responded Thai in the free form-text field for other Asian race but the applicant did not select Other Asian race, enter 972. May also enter 27.</li>
                     </ul>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -2790,7 +2790,7 @@ export default `
                     <ul>
                         <li>If the applicant responded in free-form text field and also responded that they did not wish to provide this information, enter 1.</li>
                     </ul>
-                    <table class="o-table o-table__stack-on-small">
+                    <table class="o-table o-table--stack-on-small">
                         <thead>
                             <tr>
                                 <th>Valid values</th>
@@ -3424,10 +3424,10 @@ export default `
                     specification in CSV file format, see the following link:
                 </p>
                 <p data-block-key="abnhl">
-                    <a class="a-link a-link__icon"
+                    <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>
-                        <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
+                        <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>
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 f50d17fb52e..240a2178420 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 5ee7e1ca9ce..c2bd9be5413 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
@@ -32,7 +32,7 @@ const HTML_SNIPPET = `
           I could handle a major unexpected expense
         </h3>
         <div class="answer-prefix">This statement describes me</div>
-        <div class="m-form-field m-form-field__radio">
+        <div class="m-form-field m-form-field--radio">
           <input class="a-radio"
                  type="radio"
                  id="question_1-completely"
@@ -45,7 +45,7 @@ const HTML_SNIPPET = `
             Completely
           </label>
         </div>
-        <div class="m-form-field m-form-field__radio">
+        <div class="m-form-field m-form-field--radio">
           <input class="a-radio"
                  type="radio"
                  id="question_1-very-well"
@@ -69,11 +69,11 @@ const HTML_SNIPPET = `
             Select how you completed the questionnaire.
             This changes the scoring calculation.
         </h3>
-        <ul class="m-list m-list__unstyled content-l">
+        <ul class="m-list m-list--unstyled content-l">
           <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
-                        m-form-field__radio
-                        m-form-field__lg-target">
+                        m-form-field--radio
+                        m-form-field--lg-target">
               <input class="a-radio"
                      type="radio"
                      name="method"
@@ -92,8 +92,8 @@ const HTML_SNIPPET = `
           </li>
           <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
-                        m-form-field__radio
-                        m-form-field__lg-target">
+                        m-form-field--radio
+                        m-form-field--lg-target">
               <input class="a-radio"
                      type="radio"
                      name="method"
diff --git a/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChart-spec.js b/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChart-spec.js
index cfd69138f81..04aa3a5a0c1 100644
--- a/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChart-spec.js
+++ b/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChart-spec.js
@@ -85,7 +85,7 @@ describe('explore-rates/RateCheckerChart', () => {
       const chartDom = document.querySelector('#chart');
       const resultAlertDom = document.querySelector('#chart-result-alert');
       expect(chartDom.classList.contains('warning')).toBe(true);
-      expect(resultAlertDom.classList.contains('m-notification__visible')).toBe(
+      expect(resultAlertDom.classList.contains('m-notification--visible')).toBe(
         true,
       );
     });
diff --git a/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChartMenu-spec.js b/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChartMenu-spec.js
index 0cec909b310..cce220dcf77 100644
--- a/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChartMenu-spec.js
+++ b/test/unit_tests/apps/owning-a-home/js/explore-rates/RateCheckerChartMenu-spec.js
@@ -14,13 +14,13 @@ let chartMenuBtnDOM;
 const HTML_SNIPPET = `
 <section id="chart-section" class="chart">
   <div class="chart-menu">
-    <button class="chart-menu_btn
-                    cf-icon
-                    cf-icon__after
-                    cf-icon-download">
+    <button class="chart-menu__btn
+                   cf-icon
+                   cf-icon--after
+                   cf-icon-download">
       Download chart
     </button>
-    <ul class="chart-menu_options">
+    <ul class="chart-menu__options">
       <li>PNG</li>
       <li>SVG</li>
       <li>JPEG</li>
@@ -56,7 +56,7 @@ describe('explore-rates/RateCheckerChartMenu', () => {
 
     chartMenu = new RateCheckerChartMenu(highCharts);
     chartMenuDOM = document.querySelector('.chart-menu');
-    chartMenuBtnDOM = document.querySelector('.chart-menu_btn');
+    chartMenuBtnDOM = document.querySelector('.chart-menu__btn');
   });
 
   describe('new RateCheckerChartMenu()', () => {
diff --git a/test/unit_tests/apps/owning-a-home/js/explore-rates/Slider-spec.js b/test/unit_tests/apps/owning-a-home/js/explore-rates/Slider-spec.js
index 67746938e52..12b01e96fe9 100644
--- a/test/unit_tests/apps/owning-a-home/js/explore-rates/Slider-spec.js
+++ b/test/unit_tests/apps/owning-a-home/js/explore-rates/Slider-spec.js
@@ -4,13 +4,12 @@ let slider;
 
 const HTML_SNIPPET = `
 <div class="a-range">
-  <div class="a-range_labels">
-    <span class="a-range_labels-min"></span>
-    <span class="a-range_labels-max"></span>
+  <div class="a-range__labels">
+    <span class="a-range__labels-min"></span>
+    <span class="a-range__labels-max"></span>
   </div>
-  <input type="range"
-         class="a-range_input">
-  <div class="a-range_text"></div>
+  <input type="range" class="a-range__input">
+  <div class="a-range__text"></div>
 </div>
 `;
 
diff --git a/test/unit_tests/apps/owning-a-home/js/explore-rates/rate-checker-spec.js b/test/unit_tests/apps/owning-a-home/js/explore-rates/rate-checker-spec.js
index dbb2173126b..5cc7bbdf844 100644
--- a/test/unit_tests/apps/owning-a-home/js/explore-rates/rate-checker-spec.js
+++ b/test/unit_tests/apps/owning-a-home/js/explore-rates/rate-checker-spec.js
@@ -57,13 +57,13 @@ const HTML_SNIPPET = `
 
       <section id="credit-score-container">
         <div class="a-range" id="credit-score-range">
-          <div class="a-range_labels">
-            <span class="a-range_labels-min"></span>
-            <span class="a-range_labels-max"></span>
+          <div class="a-range__labels">
+            <span class="a-range__labels-min"></span>
+            <span class="a-range__labels-max"></span>
           </div>
           <input type="range"
-                 class="a-range_input">
-          <div class="a-range_text"></div>
+                 class="a-range__input">
+          <div class="a-range__text"></div>
         </div>
 
         <div id="credit-score-alert"
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 3fa22622e80..69104190f22 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
@@ -21,7 +21,7 @@ export default `
         <section class="verify step content__wrapper">
             <div class="content__main">
 
-                <div class="m-notification m-notification__error verify_content" data-missing-data-error="noSchool">
+                <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>
@@ -35,7 +35,7 @@ export default `
                     </div>
                 </div>
 
-                <div class="m-notification m-notification__error verify_content" data-missing-data-error="noProgram">
+                <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>
@@ -48,7 +48,7 @@ export default `
                         </p>
                     </div>
                 </div>
-                <div class="m-notification m-notification__error verify_content" data-missing-data-error="noOffer">
+                <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>
@@ -162,10 +162,10 @@ export default `
                                 </dd>
                             </dl>
                             <div class="verify_controls">
-                                <a href="#info-right" class="a-btn a-btn__full-on-xs" title="Yes, this information is correct" data-gtm_ignore="true">
+                                <a href="#info-right" class="a-btn a-btn--full-on-xs" title="Yes, this information is correct" data-gtm_ignore="true">
                                     Yes, this is correct
                                 </a>
-                                <a href="#info-wrong" class="a-btn a-btn__full-on-xs a-btn__link
+                                <a href="#info-wrong" class="a-btn a-btn--full-on-xs a-btn--link
                                 verify_wrong-info-btn" title="No, this is not my information" data-gtm_ignore="true">
                                     No, this is not my information
                                 </a>
@@ -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,8 +458,8 @@ 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
-                                                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>
+                                                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>
                                         <div class="aid-form_input-wrapper">
@@ -803,8 +803,8 @@ 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">
-                                                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>
+                                                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>
@@ -956,7 +956,7 @@ export default `
                                                 <div class="private-loans_heading-text">
                                                     Private loan
                                                 </div>
-                                                <button class="a-btn a-btn__link
+                                                <button class="a-btn a-btn--link
                                                 private-loans_remove-btn" type="button" title="Remove this private loan">
                                                     Remove
                                                     <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>
@@ -1024,7 +1024,7 @@ export default `
                                         </div>
 
 
-                                        <button class="a-btn a-btn__link
+                                        <button class="a-btn a-btn--link
                                         private-loans_add-btn" type="button" title="Add another private loan" data-add-loan-button="true">
                                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__plus-round"><path d="M16.416 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-2.958.01a.792.792 0 0 0-.792-.792H9.284V5.42a.792.792 0 1 0-1.583 0V8.8H4.32a.792.792 0 0 0 0 1.584H7.7v3.382a.792.792 0 1 0 1.583 0v-3.382h3.382a.792.792 0 0 0 .792-.791Z"></path></svg>
                                             Add another private loan
@@ -1434,7 +1434,7 @@ export default `
                                     eligibility.
                                 </p>
                                 <div class="continue_controls">
-                                    <button class="a-btn a-btn__full-on-xs" title="Continue to Step 2" type="button">
+                                    <button class="a-btn a-btn--full-on-xs" title="Continue to Step 2" type="button">
                                     Continue to Step 2
                                     </button>
                                 </div>
@@ -1555,7 +1555,7 @@ export default `
                                     <div class="metric_link">
                                         <p>
                                             Curious about the graduation rate
-                                            for the entire school? <a href="https://collegescorecard.ed.gov/school/?133465#graduation" target="_blank" rel="noopener noreferrer" class="graduation-link a-link a-link__icon">See
+                                            for the entire school? <a href="https://collegescorecard.ed.gov/school/?133465#graduation" target="_blank" rel="noopener noreferrer" class="graduation-link a-link a-link--icon">See
                                             how this school’s graduation rate
                                             compares to the national average </a>
                                         </p>
@@ -1671,9 +1671,9 @@ 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
+                                  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.
                                 </p>
                                 <p>
@@ -1682,8 +1682,8 @@ 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
-                                    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
+                                    <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>
                                 <p>
@@ -1767,9 +1767,9 @@ 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>
+                                          </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>
@@ -1917,8 +1917,8 @@ 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
-                                            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
+                                            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>
                                         <div class="estimated-expenses_region">
@@ -2211,7 +2211,7 @@ export default `
                                     </div>
                                     <div class="metric_link">
                                         <p>
-                                            <a href="http://nces.ed.gov/collegenavigator/?id=133465#fedloans" target="_blank" rel="noopener noreferrer" class="loan-default-link a-link a-link__icon">See
+                                            <a href="http://nces.ed.gov/collegenavigator/?id=133465#fedloans" target="_blank" rel="noopener noreferrer" class="loan-default-link a-link a-link--icon">See
                                             the loan default rates for the
                                             entire school </a>
                                         </p>
@@ -2310,8 +2310,8 @@ export default `
                                     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
-                                    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>,
+                                    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
                                     aid, you can decrease the overall amount of
@@ -2326,8 +2326,8 @@ 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
-                                    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
+                                    <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>
                             </section>
@@ -2363,8 +2363,8 @@ 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
-                                    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
+                                    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.
                                 </p>
@@ -2401,19 +2401,19 @@ 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
-                                    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
+                                    <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,
                                         graduation rates, and post-college
                                         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
-                                        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>
+                                    <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>
@@ -2480,7 +2480,7 @@ export default `
                                 reference while talking with your school.
                             </p>
                             <div class="next-steps_controls">
-                                <button class="a-btn a-btn__full-on-xs" type="button" data-gtm_ignore="true">
+                                <button class="a-btn a-btn--full-on-xs" type="button" data-gtm_ignore="true">
                                     <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>
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 8d36ad539c9..34c259a1e91 100644
--- a/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
@@ -37,9 +37,9 @@ const HTML_SNIPPET3 = `
               </span>
           </div>
           <div class="o-regulations-wayfinder_main">
-              <div class="o-regulations-wayfinder_content">
-                  <a href="#NOPE" class="h4 o-regulations-wayfinder_link">
-                      <span class="o-regulations-wayfinder_section-title"></span><span class="o-regulations-wayfinder_marker"></span>
+              <div class="o-regulations-wayfinder__content">
+                  <a href="#NOPE" class="h4 o-regulations-wayfinder__link">
+                      <span class="o-regulations-wayfinder__section-title"></span><span class="o-regulations-wayfinder__marker"></span>
                   </a>
               </div>
           </div>
@@ -253,11 +253,11 @@ describe('The Regs3K permalinks utils', () => {
       updateWayfinder(false, wayfinder, mainContent);
       expect(
         document
-          .querySelector('.o-regulations-wayfinder_link')
+          .querySelector('.o-regulations-wayfinder__link')
           .textContent.trim(),
       ).toEqual('Comment 33(a)(2)-2');
       expect(
-        document.querySelector('.o-regulations-wayfinder_link').href,
+        document.querySelector('.o-regulations-wayfinder__link').href,
       ).toEqual('http://localhost/#33-a-2-Interp-2');
     });
   });
diff --git a/test/unit_tests/apps/regulations3k/js/search-spec.js b/test/unit_tests/apps/regulations3k/js/search-spec.js
index 6e1f7dfdc34..14e982a978e 100644
--- a/test/unit_tests/apps/regulations3k/js/search-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/search-spec.js
@@ -11,7 +11,7 @@ const HTML_SNIPPET = `
     <button id="submit">Submit</button>
   </form>
   <div>
-    <div class="m-form-field m-form-field__checkbox reg-checkbox">
+    <div class="m-form-field m-form-field--checkbox reg-checkbox">
       <input class="a-checkbox" type="checkbox" value="1002" id="regulation-1002" name="regs" checked>
       <label class="a-label" for="regulation-1002">
           1002 (Regulation B)
@@ -25,7 +25,7 @@ const HTML_SNIPPET = `
       </svg>
     </div>
   </div>
-  <button class="a-btn a-btn__link a-btn__warning filters_clear"
+  <button class="a-btn a-btn--link a-btn--warning filters_clear"
           data-js-hook="behavior_clear-all">
       Clear all filters
   </button>
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 e6e3170deba..d764332a02b 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
@@ -10,10 +10,10 @@ const HTML_SNIPPET = `
      <div class="m-btn-inside-input
                  input-contains-label">
          <label for="query" class="input-contains-label__before
-                                   input-contains-label__before__search">
+                                   input-contains-label__before--search">
          </label>
          <label for="query" class="input-contains-label__after
-                                   input-contains-label__after__clear">
+                                   input-contains-label__after--clear">
          </label>
          <input type="text"
                 title="Search the CFPB"
@@ -29,7 +29,7 @@ describe('ClearableInput', () => {
     document.body.innerHTML = HTML_SNIPPET;
     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-facets-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/expandable-facets-spec.js
index 8d865e0883e..467d326dd91 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/expandable-facets-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/expandable-facets-spec.js
@@ -9,15 +9,15 @@ let efBody;
 let expandableFacet;
 
 const HTML_SNIPPET = `
-  <ul class="m-list m-list__unstyled u-mt15">
+  <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">
-        <input type="checkbox" class="a-checkbox o-expandable-facets_checkbox" aria-label="Earn" id="topic--earn" name="topic" value="1">
-        <label class="a-label toggle" for="topic--earn">
+      <div class="m-form-field m-form-field--checkbox">
+        <input type="checkbox" class="a-checkbox o-expandable-facets__checkbox" aria-label="Earn" id="topic-earn" name="topic" value="1">
+        <label class="a-label toggle" for="topic-earn">
           <span class="u-visually-hidden">Earn</span>
           <span class="u-hide-on-med u-hide-on-lg u-hide-on-xl" aria-hidden="true">Earn</span>
         </label>
-        <button class="a-btn a-btn__link u-hide-on-xs u-hide-on-sm o-expandable-facets_target" type="button">
+        <button class="a-btn a-btn--link u-hide-on-xs u-hide-on-sm o-expandable-facets__target" type="button">
           <span class="u-visually-hidden">Expand children</span>
           <span aria-hidden="true">Earn</span>
           <span class="o-expandable-facets_cue o-expandable-facets_cue-open" role="img" aria-label="Show">
@@ -28,17 +28,17 @@ const HTML_SNIPPET = `
           </span>
         </button>
       </div>
-      <ul class="m-list m-list__unstyled o-expandable-facets_content o-expandable-facets_content__transition" style="max-height: 52px;">
+      <ul class="m-list m-list--unstyled o-expandable-facets__content o-expandable-facets__content__transition" style="max-height: 52px;">
         <li class="u-hide-on-xs u-hide-on-sm">
-          <div class="m-form-field m-form-field__checkbox">
-            <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic--getting-paid" name="topic" value="4">
-            <label class="a-label" for="topic--getting-paid">Getting paid</label>
+          <div class="m-form-field m-form-field--checkbox">
+            <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic-getting-paid" name="topic" value="4">
+            <label class="a-label" for="topic-getting-paid">Getting paid</label>
           </div>
         </li>
         <li class="u-hide-on-xs u-hide-on-sm">
-          <div class="m-form-field m-form-field__checkbox">
-            <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic--making-money" name="topic" value="2">
-            <label class="a-label" for="topic--making-money">Making money</label>
+          <div class="m-form-field m-form-field--checkbox">
+            <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic-making-money" name="topic" value="2">
+            <label class="a-label" for="topic-making-money">Making money</label>
           </div>
         </li>
       </ul>
@@ -63,10 +63,10 @@ describe('Expandable facets', () => {
     expandableFacet = new ExpandableFacets(ef);
     expandableFacet.init();
     efLabel = document.querySelector(
-      '.o-expandable-facets_checkbox ~ .a-label',
+      '.o-expandable-facets__checkbox ~ .a-label',
     );
-    efTarget = document.querySelector('.o-expandable-facets_target');
-    efBody = document.querySelector('.o-expandable-facets_content');
+    efTarget = document.querySelector('.o-expandable-facets__target');
+    efBody = document.querySelector('.o-expandable-facets__content');
 
     const mockXHR = {
       open: jest.fn(),
@@ -88,10 +88,10 @@ describe('Expandable facets', () => {
     expect(efTarget.classList.contains('is-open')).toEqual(false);
     expect(efTarget.classList.contains('is-closed')).toEqual(true);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__expanded'),
+      efBody.classList.contains('o-expandable-facets__content--expanded'),
     ).toEqual(false);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__collapsed'),
+      efBody.classList.contains('o-expandable-facets__content--collapsed'),
     ).toEqual(true);
 
     simulateEvent('click', efTarget);
@@ -99,10 +99,10 @@ describe('Expandable facets', () => {
     expect(efTarget.classList.contains('is-closed')).toEqual(false);
     expect(efTarget.classList.contains('is-open')).toEqual(true);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__expanded'),
+      efBody.classList.contains('o-expandable-facets__content--expanded'),
     ).toEqual(true);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__collapsed'),
+      efBody.classList.contains('o-expandable-facets__content--collapsed'),
     ).toEqual(false);
   });
 
@@ -120,10 +120,10 @@ describe('Expandable facets', () => {
     expect(efTarget.classList.contains('is-closed')).toEqual(true);
     expect(efTarget.classList.contains('is-open')).toEqual(false);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__expanded'),
+      efBody.classList.contains('o-expandable-facets__content--expanded'),
     ).toEqual(false);
     expect(
-      efBody.classList.contains('o-expandable-facets_content__collapsed'),
+      efBody.classList.contains('o-expandable-facets__content--collapsed'),
     ).toEqual(true);
   });
 });
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 59895f9e1c1..8a9ef192e0a 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
@@ -8,7 +8,7 @@ import beforeExpandableTransitionInit, {
 const HTML_SNIPPET = `
   <div id="test-div"
      class="o-expandable
-            o-expandable__background
+            o-expandable--background
             ">
     <button class="o-expandable__header" type="button">
         <span class="o-expandable__label">
@@ -29,9 +29,9 @@ const HTML_SNIPPET = `
                 o-expandable__mobile-collapsed">
             <div class="o-form__group u-mt15">
                 <fieldset class="o-form__fieldset">
-                    <ul class="m-list m-list__unstyled">
+                    <ul class="m-list m-list--unstyled">
                         <li>
-                            <div class="m-form-field m-form-field__checkbox">
+                            <div class="m-form-field m-form-field--checkbox">
                                 <input type="checkbox" class="a-checkbox" aria-label="Executive function" id="building-block--executive-function" name="building_block" value="1">
                                 <label class="a-label" for="building-block--executive-function">Executive function</label>
                             </div>
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 0fb0849e247..9e16a3be196 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>
@@ -22,7 +22,7 @@ const HTML_SNIPPET = `
   <form id="filter-form" action="." method="get" data-js-hook="behavior_change-filter">
     <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">
+    <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">
           Building block
@@ -36,24 +36,24 @@ const HTML_SNIPPET = `
           </span>
         </span>
       </button>
-      <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 119px;">
+      <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">
+            <ul class="m-list m-list--unstyled">
               <li>
-                <div class="m-form-field m-form-field__checkbox">
+                <div class="m-form-field m-form-field--checkbox">
                   <input type="checkbox" class="a-checkbox" aria-label="Executive function" id="building-block--executive-function" name="building_block" value="1" checked="checked">
                   <label class="a-label" for="building-block--executive-function">Executive function</label>
                 </div>
               </li>
               <li>
-                <div class="m-form-field m-form-field__checkbox">
+                <div class="m-form-field m-form-field--checkbox">
                   <input type="checkbox" class="a-checkbox" aria-label="Financial habits and norms" id="building-block--financial-habits-and-norms" name="building_block" value="2">
                   <label class="a-label" for="building-block--financial-habits-and-norms">Financial habits and norms</label>
                 </div>
               </li>
               <li>
-                <div class="m-form-field m-form-field__checkbox">
+                <div class="m-form-field m-form-field--checkbox">
                   <input type="checkbox" class="a-checkbox" aria-label="Financial knowledge and decision-making skills" id="building-block--financial-knowledge-and-decision-making-skills" name="building_block" value="3">
                   <label class="a-label" for="building-block--financial-knowledge-and-decision-making-skills">Financial knowledge and decision-making skills</label>
                 </div>
@@ -64,7 +64,7 @@ const HTML_SNIPPET = `
       </div>
     </div>
 
-    <div class="o-expandable o-expandable__background" data-bound="true">
+    <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">
@@ -76,37 +76,37 @@ const HTML_SNIPPET = `
           </span>
         </span>
       </button>
-      <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">
+      <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">
-              <input type="checkbox" class="a-checkbox o-expandable-facets_checkbox" aria-label="Earn" id="topic--earn" name="topic" value="1">
-              <label class="a-label toggle indeterminate" for="topic--earn">
+            <div class="m-form-field m-form-field--checkbox">
+              <input type="checkbox" class="a-checkbox o-expandable-facets__checkbox" aria-label="Earn" id="topic-earn" name="topic" value="1">
+              <label class="a-label toggle indeterminate" for="topic-earn">
                 <span class="u-visually-hidden">Earn</span>
                 <span class="u-hide-on-med u-hide-on-lg u-hide-on-xl" aria-hidden="true">Earn</span>
               </label>
-              <button class="a-btn a-btn__link u-hide-on-xs u-hide-on-sm o-expandable-facets_target is-open" type="button">
+              <button class="a-btn a-btn--link u-hide-on-xs u-hide-on-sm o-expandable-facets__target is-open" type="button">
                 <span class="u-visually-hidden">Expand children</span>
                 <span aria-hidden="true">Earn</span>
-                <span class="o-expandable-facets_cue o-expandable-facets_cue-open" role="img" aria-label="Show">
+                <span class="o-expandable-facets__cue o-expandable-facets__cue-open" role="img" aria-label="Show">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 988.2 1200" class="cf-icon-svg"><path d="M494.1 967.2c-17.3 0-33.8-6.8-46-19L18.6 518.6c-25.1-25.6-24.8-66.8.8-91.9 25.3-24.8 65.8-24.8 91.1 0l383.6 383.6 383.6-383.6c25.6-25.1 66.8-24.8 91.9.8 24.8 25.3 24.8 65.8 0 91.1L540.1 948.1c-12.2 12.2-28.7 19.1-46 19.1z"></path></svg>
                 </span>
-                <span class="o-expandable-facets_cue o-expandable-facets_cue-close" role="img" aria-label="Hide">
+                <span class="o-expandable-facets__cue o-expandable-facets__cue-close" role="img" aria-label="Hide">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 988.7 1200" class="cf-icon-svg"><path d="M923.6 967.6c-17.3 0-33.8-6.8-46-19L494.1 565 110.5 948.5c-25.6 25.1-66.8 24.8-91.9-.8-24.8-25.3-24.8-65.8 0-91.1l429.5-429.5c25.4-25.4 66.5-25.4 91.9 0l429.6 429.5c25.4 25.4 25.4 66.5.1 91.9-12.3 12.3-28.8 19.1-46.1 19.1z"></path></svg>
                 </span>
               </button>
             </div>
-            <ul class="m-list m-list__unstyled o-expandable-facets_content o-expandable-facets_content__transition o-expandable-facets_content__expanded" style="max-height: 52px;">
+            <ul class="m-list m-list--unstyled o-expandable-facets__content o-expandable-facets__content--transition o-expandable-facets__content--expanded" style="max-height: 52px;">
               <li class="u-hide-on-xs u-hide-on-sm">
-                <div class="m-form-field m-form-field__checkbox">
-                  <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic--getting-paid" name="topic" value="4" checked="checked">
-                  <label class="a-label" for="topic--getting-paid">Getting paid</label>
+                <div class="m-form-field m-form-field--checkbox">
+                  <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic-getting-paid" name="topic" value="4" checked="checked">
+                  <label class="a-label" for="topic-getting-paid">Getting paid</label>
                 </div>
               </li>
               <li class="u-hide-on-xs u-hide-on-sm">
-                <div class="m-form-field m-form-field__checkbox">
-                  <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic--making-money" name="topic" value="2">
-                  <label class="a-label" for="topic--making-money">Making money</label>
+                <div class="m-form-field m-form-field--checkbox">
+                  <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic-making-money" name="topic" value="2">
+                  <label class="a-label" for="topic-making-money">Making money</label>
                 </div>
               </li>
             </ul>
@@ -116,22 +116,22 @@ const HTML_SNIPPET = `
     </div>
 
     <div id="tdp-search-results">
-      <div class="results_header">
-        <div class="results_count" data-results-count="8">
+      <div class="results__header">
+        <div class="results__count" data-results-count="8">
           <h3>Showing 8 matches out of 26 activities</h3>
         </div>
-        <div class="results_filters">
-          <span class="results_filters-label">Filters applied</span>
-          <div class="results_filters-tags">
+        <div class="results__filters">
+          <span class="results__filters-label">Filters applied</span>
+          <div class="results__filters-tags">
             <div class="a-tag" data-value="#building-block--executive-function" data-js-hook="behavior_clear-filter">
               Executive function
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 718.9 1200" class="cf-icon-svg"><path d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"></path></svg>
             </div>
-            <div class="a-tag" data-value="#topic--getting-paid" data-js-hook="behavior_clear-filter">
+            <div class="a-tag" data-value="#topic-getting-paid" data-js-hook="behavior_clear-filter">
               Getting paid
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 718.9 1200" class="cf-icon-svg"><path d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"></path></svg>
             </div>
-            <button class="a-btn a-btn__link a-btn__warning results_filters-clear u-mb10" data-js-hook="behavior_clear-all">Clear all filters</button>
+            <button class="a-btn a-btn--link a-btn--warning results__filters-clear u-mb10" data-js-hook="behavior_clear-all">Clear all filters</button>
           </div>
         </div>
       </div>
@@ -164,7 +164,7 @@ describe('The TDP search page', () => {
   });
 
   it('should clear a filter when its X icon is clicked', () => {
-    const clearIcon = document.querySelector('.results_filters svg');
+    const clearIcon = document.querySelector('.results__filters svg');
 
     let numFilters = document.querySelectorAll('div.a-tag').length;
     expect(numFilters).toEqual(2);
@@ -186,7 +186,7 @@ describe('The TDP search page', () => {
   });
 
   it('should clear all filters when the `clear all` link is clicked', () => {
-    const clearAllLink = document.querySelector('.results_filters-clear');
+    const clearAllLink = document.querySelector('.results__filters-clear');
 
     let numFilters = document.querySelectorAll('div.a-tag').length;
     expect(numFilters).toEqual(2);
@@ -197,7 +197,7 @@ describe('The TDP search page', () => {
   });
 
   it('should check nested filter when parent filter is clicked', () => {
-    const parentCheckbox = document.querySelector('#topic--earn');
+    const parentCheckbox = document.querySelector('#topic-earn');
 
     let numChecked = document.querySelectorAll(
       '.o-expandable-facets .a-checkbox:checked',
@@ -214,7 +214,7 @@ describe('The TDP search page', () => {
       'http://localhost/?q=executive&building_block=1&topic=1&topic=4&topic=2',
     );
 
-    const childCheckbox = document.querySelector('#topic--getting-paid');
+    const childCheckbox = document.querySelector('#topic-getting-paid');
     childCheckbox.checked = false;
     simulateEvent('change', childCheckbox);
     numChecked = document.querySelectorAll(
@@ -228,7 +228,7 @@ describe('The TDP search page', () => {
 
   it('should handle errors when the server is down', (done) => {
     fetch.mockReject(new Error('Server error!'));
-    const clearIcon = document.querySelector('.results_filters svg');
+    const clearIcon = document.querySelector('.results__filters svg');
 
     simulateEvent('click', clearIcon);
     setTimeout(() => {
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 171618c89c1..af1a56bb045 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
@@ -7,7 +7,7 @@ import {
 
 const EMPTY_SEARCH_HTML = `
   <div id="tdp-search-facets-and-results">
-    <div class="results_count" data-results-count="0">
+    <div class="results__count" data-results-count="0">
     </div>
   </div>
 `;
@@ -25,7 +25,7 @@ const HTML_SNIPPET = `
     <form id="filter-form" action="." method="get" data-js-hook="behavior_change-filter">
       <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">
+      <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">
             Building block
@@ -42,21 +42,21 @@ const HTML_SNIPPET = `
         <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">
+              <ul class="m-list m-list--unstyled">
                 <li>
-                  <div class="m-form-field m-form-field__checkbox">
+                  <div class="m-form-field m-form-field--checkbox">
                     <input type="checkbox" class="a-checkbox" aria-label="Executive function" id="building-block--executive-function" name="building_block" value="1" checked="checked">
                     <label class="a-label" for="building-block--executive-function">Executive function</label>
                   </div>
                 </li>
                 <li>
-                  <div class="m-form-field m-form-field__checkbox">
+                  <div class="m-form-field m-form-field--checkbox">
                     <input type="checkbox" class="a-checkbox" aria-label="Financial habits and norms" id="building-block--financial-habits-and-norms" name="building_block" value="2">
                     <label class="a-label" for="building-block--financial-habits-and-norms">Financial habits and norms</label>
                   </div>
                 </li>
                 <li>
-                  <div class="m-form-field m-form-field__checkbox">
+                  <div class="m-form-field m-form-field--checkbox">
                     <input type="checkbox" class="a-checkbox" aria-label="Financial knowledge and decision-making skills" id="building-block--financial-knowledge-and-decision-making-skills" name="building_block" value="3">
                     <label class="a-label" for="building-block--financial-knowledge-and-decision-making-skills">Financial knowledge and decision-making skills</label>
                   </div>
@@ -67,7 +67,7 @@ const HTML_SNIPPET = `
         </div>
       </div>
 
-      <div class="o-expandable o-expandable__background" data-bound="true">
+      <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">
@@ -80,15 +80,15 @@ const HTML_SNIPPET = `
           </span>
         </button>
         <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">
+          <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">
-                <input type="checkbox" class="a-checkbox o-expandable-facets_checkbox" aria-label="Earn" id="topic--earn" name="topic" value="1">
-                <label class="a-label toggle indeterminate" for="topic--earn">
+              <div class="m-form-field m-form-field--checkbox">
+                <input type="checkbox" class="a-checkbox o-expandable-facets__checkbox" aria-label="Earn" id="topic-earn" name="topic" value="1">
+                <label class="a-label toggle indeterminate" for="topic-earn">
                   <span class="u-visually-hidden">Earn</span>
                   <span class="u-hide-on-med u-hide-on-lg u-hide-on-xl" aria-hidden="true">Earn</span>
                 </label>
-                <button class="a-btn a-btn__link u-hide-on-xs u-hide-on-sm o-expandable-facets_target is-open" type="button">
+                <button class="a-btn a-btn--link u-hide-on-xs u-hide-on-sm o-expandable-facets__target is-open" type="button">
                   <span class="u-visually-hidden">Expand children</span>
                   <span aria-hidden="true">Earn</span>
                   <span class="o-expandable-facets_cue o-expandable-facets_cue-open">
@@ -101,17 +101,17 @@ const HTML_SNIPPET = `
                   </span>
                 </button>
               </div>
-              <ul class="m-list m-list__unstyled o-expandable-facets_content o-expandable-facets_content__transition o-expandable-facets_content__expanded" style="max-height: 52px;">
+              <ul class="m-list m-list--unstyled o-expandable-facets__content o-expandable-facets__content__transition o-expandable-facets__content--expanded" style="max-height: 52px;">
                 <li class="u-hide-on-xs u-hide-on-sm">
-                  <div class="m-form-field m-form-field__checkbox">
-                    <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic--getting-paid" name="topic" value="4" checked="checked">
-                    <label class="a-label" for="topic--getting-paid">Getting paid</label>
+                  <div class="m-form-field m-form-field--checkbox">
+                    <input type="checkbox" class="a-checkbox" aria-label="Getting paid" id="topic-getting-paid" name="topic" value="4" checked="checked">
+                    <label class="a-label" for="topic-getting-paid">Getting paid</label>
                   </div>
                 </li>
                 <li class="u-hide-on-xs u-hide-on-sm">
-                  <div class="m-form-field m-form-field__checkbox">
-                    <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic--making-money" name="topic" value="2">
-                    <label class="a-label" for="topic--making-money">Making money</label>
+                  <div class="m-form-field m-form-field--checkbox">
+                    <input type="checkbox" class="a-checkbox" aria-label="Making money" id="topic-making-money" name="topic" value="2">
+                    <label class="a-label" for="topic-making-money">Making money</label>
                   </div>
                 </li>
               </ul>
@@ -123,22 +123,22 @@ const HTML_SNIPPET = `
 
 
       <div id="tdp-search-results">
-        <div class="results_header">
-          <div class="results_count" data-results-count="8">
+        <div class="results__header">
+          <div class="results__count" data-results-count="8">
             <h3>Showing 8 matches out of 26 activities</h3>
           </div>
-          <div class="results_filters">
-            <span class="results_filters-label">Filters applied</span>
-            <div class="results_filters-tags">
+          <div class="results__filters">
+            <span class="results__filters-label">Filters applied</span>
+            <div class="results__filters-tags">
               <div class="a-tag" data-value="#building-block--executive-function" data-js-hook="behavior_clear-filter">
                 Executive function
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 718.9 1200" class="cf-icon-svg"><path d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"></path></svg>
               </div>
-              <div class="a-tag" data-value="#topic--getting-paid" data-js-hook="behavior_clear-filter">
+              <div class="a-tag" data-value="#topic-getting-paid" data-js-hook="behavior_clear-filter">
                 Getting paid
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 718.9 1200" class="cf-icon-svg"><path d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"></path></svg>
               </div>
-              <button class="a-btn a-btn__link a-btn__warning results_filters-clear u-mb10" data-js-hook="behavior_clear-all">Clear all filters</button>
+              <button class="a-btn a-btn--link a-btn--warning results__filters-clear u-mb10" data-js-hook="behavior_clear-all">Clear all filters</button>
             </div>
           </div>
         </div>
@@ -179,7 +179,7 @@ const HTML_SNIPPET = `
                 <span class="m-pagination__label"> of 149</span>
             </label>
             <button class="a-btn
-                           a-btn__link
+                           a-btn--link
                            m-pagination__btn-submit"
                     id="m-pagination__btn-submit"
                     type="submit">Go</button>
@@ -216,7 +216,7 @@ describe('The TDP custom analytics', () => {
   });
 
   it('should send an analytics event when a filter is clicked', () => {
-    const filterTag = document.querySelector('.results_filters .a-tag');
+    const filterTag = document.querySelector('.results__filters .a-tag');
     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 67d43a45054..e19a7b50b64 100644
--- a/test/unit_tests/js/modules/footer-button-spec.js
+++ b/test/unit_tests/js/modules/footer-button-spec.js
@@ -10,7 +10,7 @@ const HTML_SNIPPET = `
         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
diff --git a/test/unit_tests/js/molecules/Notification-spec.js b/test/unit_tests/js/molecules/Notification-spec.js
index c0bd31af4e6..b4b3697350f 100644
--- a/test/unit_tests/js/molecules/Notification-spec.js
+++ b/test/unit_tests/js/molecules/Notification-spec.js
@@ -29,21 +29,21 @@ describe('Notification', () => {
     });
 
     it('should return the Notification instance if it has a success class', () => {
-      notificationElem.classList.add('m-notification__success');
+      notificationElem.classList.add('m-notification--success');
 
       expect(notification.init().constructor).toBe(Notification);
       expect(notificationElem.dataset.jsHook).toBe('state_atomic_init');
     });
 
     it('should return the Notification instance if it has a warning class', () => {
-      notificationElem.classList.add('m-notification__warning');
+      notificationElem.classList.add('m-notification--warning');
 
       expect(notification.init().constructor).toBe(Notification);
       expect(notificationElem.dataset.jsHook).toBe('state_atomic_init');
     });
 
     it('should return the Notification instance if it has a error class', () => {
-      notificationElem.classList.add('m-notification__error');
+      notificationElem.classList.add('m-notification--error');
 
       expect(notification.init().constructor).toBe(Notification);
       expect(notificationElem.dataset.jsHook).toBe('state_atomic_init');
@@ -68,17 +68,17 @@ describe('Notification', () => {
 
     it('should update the notification type for the success state', () => {
       notification.update(Notification.SUCCESS, '');
-      expect(notificationElem.className).toContain('m-notification__success');
+      expect(notificationElem.className).toContain('m-notification--success');
     });
 
     it('should update the notification type for the warning state', () => {
       notification.update(Notification.WARNING, '');
-      expect(notificationElem.className).toContain('m-notification__warning');
+      expect(notificationElem.className).toContain('m-notification--warning');
     });
 
     it('should update the notification type for the error state', () => {
       notification.update(Notification.ERROR, '');
-      expect(notificationElem.className).toContain('m-notification__error');
+      expect(notificationElem.className).toContain('m-notification--error');
     });
 
     it('should update the the notification message', () => {
@@ -92,7 +92,7 @@ describe('Notification', () => {
         '.m-notification__explanation',
       );
 
-      expect(notificationElem.className).toContain('m-notification__success');
+      expect(notificationElem.className).toContain('m-notification--success');
       expect(message.textContent).toContain(testMsg);
       expect(explanation).toBeUndefined;
     });
@@ -109,7 +109,7 @@ describe('Notification', () => {
         '.m-notification__explanation',
       );
 
-      expect(notificationElem.className).toContain('m-notification__success');
+      expect(notificationElem.className).toContain('m-notification--success');
       expect(message.textContent).toContain(testMsg);
       expect(explanation.textContent).toContain(testExplanation);
     });
diff --git a/test/unit_tests/js/organisms/FilterableListControls-spec.js b/test/unit_tests/js/organisms/FilterableListControls-spec.js
index e4f402483eb..e53b011bcd1 100644
--- a/test/unit_tests/js/organisms/FilterableListControls-spec.js
+++ b/test/unit_tests/js/organisms/FilterableListControls-spec.js
@@ -5,8 +5,8 @@ const HTML_SNIPPET = `
 <div class="o-filterable-list-controls" id="o-filterable-list-controls">
 
 <div class="o-expandable
-            o-expandable__background
-            o-expandable__border">
+            o-expandable--background
+            o-expandable--border">
     <button class="o-expandable__header" type="button">
         <span class="o-expandable__label">
             Filter posts
@@ -33,14 +33,14 @@ const HTML_SNIPPET = `
                     content-l__col-1">
             <div class="o-form__group">
                 <div class="m-form-field">
-                    <label class="a-label a-label__heading" for="title">
+                    <label class="a-label a-label--heading" for="title">
                         Item name
                     </label>
                     <input type="text"
                             name="title"
                             maxlength="250"
                             placeholder="Search for a specific word in item title"
-                            class="a-text-input a-text-input__full"
+                            class="a-text-input a-text-input--full"
                             id="title">
                 </div>
             </div>
@@ -53,37 +53,37 @@ const HTML_SNIPPET = `
                     <legend class="a-legend">
                         Category
                     </legend>
-                    <ul class="m-list m-list__unstyled">
+                    <ul class="m-list m-list--unstyled">
 
-                        <li class="m-form-field m-form-field__checkbox">
+                        <li class="m-form-field m-form-field--checkbox">
                             <input class="a-checkbox" type="checkbox" value="at-the-cfpb" id="filter_categories_at-the-cfpb" name="categories">
                             <label class="a-label" for="filter_categories_at-the-cfpb">
                                 At the CFPB
                             </label>
                         </li>
 
-                        <li class="m-form-field m-form-field__checkbox">
+                        <li class="m-form-field m-form-field--checkbox">
                             <input class="a-checkbox" type="checkbox" value="directors-notebook" id="filter_categories_directors-notebook" name="categories">
                             <label class="a-label" for="filter_categories_directors-notebook">
                                 Director's notebook
                             </label>
                         </li>
 
-                        <li class="m-form-field m-form-field__checkbox">
+                        <li class="m-form-field m-form-field--checkbox">
                             <input class="a-checkbox" type="checkbox" value="policy-compliance" id="filter_categories_policy-compliance" name="categories">
                             <label class="a-label" for="filter_categories_policy-compliance">
                                 Policy and compliance
                             </label>
                         </li>
 
-                        <li class="m-form-field m-form-field__checkbox">
+                        <li class="m-form-field m-form-field--checkbox">
                             <input class="a-checkbox" type="checkbox" value="data-research-reports" id="filter_categories_data-research-reports" name="categories">
                             <label class="a-label" for="filter_categories_data-research-reports">
                                 Data, research, and reports
                             </label>
                         </li>
 
-                        <li class="m-form-field m-form-field__checkbox">
+                        <li class="m-form-field m-form-field--checkbox">
                             <input class="a-checkbox" type="checkbox" value="info-for-consumers" id="filter_categories_info-for-consumers" name="categories">
                             <label class="a-label" for="filter_categories_info-for-consumers">
                                 Info for consumers
@@ -103,7 +103,7 @@ const HTML_SNIPPET = `
                                 content-l__col-1-2">
                         <div class="o-form__group">
                             <div class="m-form-field">
-                                <label class="a-label a-label__heading" for="topics">
+                                <label class="a-label a-label--heading" for="topics">
                                     Topic
                                 </label>
                                 <select multiple>
@@ -126,19 +126,19 @@ const HTML_SNIPPET = `
                                     <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">
+                                            <label class="a-label a-label--heading" for="from_date">
                                                 From:
                                             </label>
-                                            <input type="text" name="from_date" data-type="date" placeholder="mm/dd/yyyy" class="a-text-input a-text-input__full" id="from_date">
+                                            <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="m-form-field">
-                                            <label class="a-label a-label__heading" for="to_date">
+                                            <label class="a-label a-label--heading" for="to_date">
                                                 To:
                                             </label>
-                                            <input type="text" name="to_date" data-type="date" placeholder="mm/dd/yyyy" class="a-text-input a-text-input__full" id="to_date">
+                                            <input type="text" name="to_date" data-type="date" placeholder="mm/dd/yyyy" class="a-text-input a-text-input--full" id="to_date">
                                         </div>
                                     </div>
                                 </div>
@@ -153,7 +153,7 @@ const HTML_SNIPPET = `
                         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/">
+                <a class="a-btn a-btn--link a-btn--warning" href="/about-us/blog/">
                     Clear filters
                 </a>
             </div>
diff --git a/test/unit_tests/mocks/emailSignupSnippet.js b/test/unit_tests/mocks/emailSignupSnippet.js
index 5a7ce8bd959..2570a32ee2d 100644
--- a/test/unit_tests/mocks/emailSignupSnippet.js
+++ b/test/unit_tests/mocks/emailSignupSnippet.js
@@ -21,10 +21,10 @@ export default `
             </div>
         </div>
         <div class="m-form-field">
-            <label class="a-label a-label__heading" for="email_371b6fce64d1b6">
+            <label class="a-label a-label--heading" for="email_371b6fce64d1b6">
                 Email address
             </label>
-            <input class="a-text-input a-text-input__full"
+            <input class="a-text-input a-text-input--full"
                    id="email_371b6fce64d1b6"
                    name="email"
                    type="email"
@@ -33,7 +33,7 @@ export default `
         </div>
         <div class="o-email-signup__buttons">
             <button class="a-btn">Sign up</button>
-            <a class="a-btn a-btn__link a-btn__secondary"
+            <a class="a-btn a-btn--link a-btn--secondary"
                href="/owning-a-home/privacy-act-statement/"
                target="_blank"
                rel="noopener noreferrer">
diff --git a/test/unit_tests/mocks/megaMenuSnippet.js b/test/unit_tests/mocks/megaMenuSnippet.js
index e0ba009c51d..753f4a54d3d 100644
--- a/test/unit_tests/mocks/megaMenuSnippet.js
+++ b/test/unit_tests/mocks/megaMenuSnippet.js
@@ -528,7 +528,7 @@ export default `
 
                         <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">
+                            <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>
  <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>
@@ -1865,7 +1865,7 @@ export default `
 
 
     <div class="m-global-eyebrow
-                m-global-eyebrow__list">
+                m-global-eyebrow--list">
         <div class="wrapper
                     ">
 
diff --git a/yarn.lock b/yarn.lock
index 88991f219ee..35fb2ceb130 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -683,6 +683,18 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -944,6 +956,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
 "@sentry-internal/tracing@7.109.0":
   version "7.109.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.109.0.tgz#3effaa132c41a65378fa98146aea61228d528953"
@@ -1235,6 +1252,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 anymatch@^3.0.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -1564,6 +1586,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -2124,6 +2153,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -2793,6 +2827,14 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -2936,6 +2978,17 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob@10.3.12:
+  version "10.3.12"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.12.tgz#3a65c363c2e9998d220338e88a5f6ac97302960b"
+  integrity sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.6"
+    minimatch "^9.0.1"
+    minipass "^7.0.4"
+    path-scurry "^1.10.2"
+
 glob@^7.1.3, glob@^7.1.4:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -3536,6 +3589,15 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+jackspeak@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jest-changed-files@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
@@ -4225,6 +4287,11 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lru-cache@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -4330,11 +4397,23 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
+  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -4603,6 +4682,14 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-scurry@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.2.tgz#8f6357eb1239d5fa1da8b9f70e9c080675458ba7"
+  integrity sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -5185,7 +5272,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5194,6 +5281,15 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.10:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
@@ -5240,14 +5336,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.1.0:
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -5766,6 +5862,15 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -5775,14 +5880,14 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
   dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
 
 wrappy@1:
   version "1.0.2"