From be2ff758663998bdb517f91fa48932065e9dce4f Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Wed, 27 Mar 2024 14:28:00 -0400
Subject: [PATCH] Update BEM names

---
 .../jinja2/agreements/_need_help.html         |   2 +-
 .../agreements/jinja2/agreements/archive.html |   4 +-
 cfgov/agreements/jinja2/agreements/index.html |   4 +-
 .../agreements/jinja2/agreements/search.html  |  36 +-
 .../ask_cfpb/jinja2/ask-cfpb/_disclaimer.html |   2 +-
 .../ask_cfpb/jinja2/ask-cfpb/answer-page.html |  16 +-
 .../ask-cfpb/answer-search-results.html       |   4 +-
 .../jinja2/ask-cfpb/landing-page.html         |   6 +-
 cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html   |   2 +-
 .../jinja2/diversity_inclusion/_sidebar.html  |   6 +-
 .../diversity_inclusion/form-submitted.html   |  10 +-
 .../jinja2/diversity_inclusion/privacy.html   |   4 +-
 .../voluntary-assessment-form.html            |  32 +-
 .../filing_instruction_guide/data_points.html |   4 +-
 .../filing_instruction_guide/index.html       |   6 +-
 .../filing_instruction_guide/layout-fig.html  |  12 +-
 .../form-explainer/blocks/explainer.html      |  12 +-
 .../jinja2/form-explainer/index.html          |   4 +-
 .../jinja2/hmda/hmda-explorer-controls.html   |  30 +-
 cfgov/hmda/jinja2/hmda/hmda-explorer.html     |   4 +-
 .../jinja2/housing_counselor/index.html       |  48 +-
 cfgov/jinja2/ccdb-complaint/ccdb-search.html  |   4 +-
 .../govdelivery-subscribe/error/index.html    |   2 +-
 .../server-error/index.html                   |   2 +-
 .../govdelivery-subscribe/success/index.html  |   2 +-
 .../know-before-you-owe/compare/index.html    |  34 +-
 cfgov/jinja2/know-before-you-owe/index.html   | 240 ++++----
 .../know-before-you-owe/timeline/index.html   |  62 +-
 .../_templates/brand-footer.html              |   2 +-
 .../_templates/brand-header.html              |   2 +-
 .../owning-a-home/_templates/no_js.html       |   4 +-
 .../owning-a-home/explore-rates/index.html    |  44 +-
 .../_templates/expandable.html                |  12 +-
 .../_templates/no_js.html                     |   4 +-
 cfgov/jinja2/rural-or-underserved/index.html  | 126 ++--
 .../index.html                                |   2 +-
 .../jinja2/jobmanager/job_listing_list.html   |   6 +-
 .../jinja2/jobmanager/job_listing_page.html   |  42 +-
 .../mega_menu/jinja2/mega_menu/mega-menu.html |   4 +-
 cfgov/mega_menu/jinja2/mega_menu/preview.html |   4 +-
 .../paying-for-college/_templates/no_js.html  |   4 +-
 .../college-cost-blocks/0-intro.html          |  12 +-
 .../college-cost-blocks/01-school-search.html |  28 +-
 .../13-school-results.html                    |  10 +-
 .../college-cost-blocks/14-summary.html       |   2 +-
 .../16-save-and-finish.html                   |  12 +-
 .../college-cost-blocks/copy-link-form.html   |   2 +-
 .../macros/secondary-nav.html                 |  28 +-
 .../college-cost-blocks/nav.html              |   2 +-
 .../paying-for-college/college-costs.html     |   4 +-
 .../jinja2/paying-for-college/disclosure.html | 114 ++--
 .../disclosure_technote.html                  | 164 +++---
 .../jinja2/prepaid_agreements/detail.html     |  20 +-
 .../jinja2/prepaid_agreements/index.html      |   6 +-
 .../search_result_item.html                   |   4 +-
 .../prepaid_agreements/search_results.html    |  12 +-
 .../privacy/disclosure-consent-form.html      |  66 +--
 .../jinja2/privacy/form-submitted.html        |  10 +-
 .../jinja2/privacy/privacy-styles.html        |   4 +-
 .../jinja2/privacy/records-access-form.html   |  62 +-
 .../regulations3k/browse-regulation.html      |  40 +-
 .../jinja2/regulations3k/inline_interps.html  |  12 +-
 .../jinja2/regulations3k/landing-page.html    |   8 +-
 .../jinja2/regulations3k/recent-notices.html  |   6 +-
 .../regulations3k-search-bar.html             |   6 +-
 .../regulations3k-secondary-nav.html          |  16 +-
 .../regulations3k/regulations3k-side-nav.html |  12 +-
 .../regulations3k/search-regulations.html     |  20 +-
 .../retirement_api/_templates/no_js.html      |   4 +-
 .../jinja2/retirement_api/about.html          |   4 +-
 .../jinja2/retirement_api/claiming-es.html    |   2 +-
 .../jinja2/retirement_api/claiming.html       |  86 +--
 cfgov/tccp/jinja2/tccp/card.html              |   8 +-
 cfgov/tccp/jinja2/tccp/cards.html             |   6 +-
 .../jinja2/tccp/includes/filter_form.html     |  18 +-
 cfgov/tccp/jinja2/tccp/includes/sidebar.html  |   2 +-
 cfgov/tccp/jinja2/tccp/landing_page.html      |  32 +-
 .../tccp/situations/select/avoid-fees.html    |   2 +-
 .../tccp/situations/select/build-credit.html  |   2 +-
 .../tccp/situations/select/earn-rewards.html  |   2 +-
 .../select/make-a-big-purchase.html           |  10 +-
 .../situations/select/pay-less-interest.html  |   2 +-
 .../situations/select/transfer-a-balance.html |   2 +-
 .../widgets/situation_checkbox_option.html    |   2 +-
 .../activity_index_page.html                  |  12 +-
 .../activity_page.html                        |  20 +-
 .../activity_search_facets_and_results.html   |   8 +-
 .../activity_search_result.html               |   2 +-
 .../tdp_expandable.html                       |  14 +-
 .../accessibility-interactions-listeners.js   |   2 +-
 .../apps/analytics-gtm/js/bah-explainers.js   |   4 +-
 .../apps/ccdb-search/css/main.less            |   6 +-
 .../filing-instruction-guide/css/main.less    |  14 +-
 .../js/fig-sidenav-utils.js                   |   8 +-
 .../js/fig-sidenav.js                         |   6 +-
 .../apps/financial-well-being/css/main.less   |  18 +-
 .../find-a-housing-counselor/css/hud.less     |   2 +-
 .../form-explainer/css/form-explainer.less    |  16 +-
 .../apps/form-explainer/js/FormExplainer.js   |   6 +-
 cfgov/unprocessed/apps/homepage/css/main.less |   2 +-
 .../css/cf-enhancements.less                  |   2 +-
 .../css/cf-theme-overrides.less               |   8 +-
 .../css/college-costs/college-costs.less      |   6 +-
 .../css/college-costs/financial-item.less     |   2 +-
 .../css/college-costs/nav.less                |  16 +-
 .../paying-for-college/css/disclosures.less   |   8 +-
 .../js/college-costs/views/app-view.js        |   2 +-
 .../js/college-costs/views/navigation-view.js |   6 +-
 .../js/disclosures/views/question-view.js     |   2 +-
 .../apps/prepaid-agreements/css/main.less     |   8 +-
 .../apps/prepaid-agreements/css/search.less   |  14 +-
 .../regulations3k/css/reg-navigation.less     |  14 +-
 .../apps/regulations3k/css/reg-search.less    |  14 +-
 .../apps/regulations3k/js/analytics.js        |   4 +-
 .../apps/regulations3k/js/index.js            |   2 +-
 .../apps/regulations3k/js/permalinks-utils.js |   2 +-
 .../apps/regulations3k/js/recent-notices.js   |   2 +-
 .../apps/retirement/css/claiming.less         |  30 +-
 .../apps/retirement/js/views/graph-view.js    |   2 +-
 .../rural-or-underserved-tool/css/main.less   |   2 +-
 .../rural-or-underserved-tool/css/no-js.less  |   2 +-
 cfgov/unprocessed/apps/tccp/css/main.less     |  18 +-
 .../css/organisms/expandable.less             |  24 +-
 .../css/pages/activity-search.less            |  16 +-
 .../js/Expandable.js                          |  10 +-
 .../js/ExpandableTransition.js                |   8 +-
 .../js/expandable-facets.js                   |   2 +-
 .../js/expandable-mobile.js                   |   2 +-
 .../teachers-digital-platform/js/search.js    |   2 +-
 .../js/tdp-analytics.js                       |  16 +-
 cfgov/unprocessed/css/breadcrumbs.less        |   2 +-
 .../css/enhancements/layout-1-3.less          |   6 +-
 .../css/enhancements/layout-2-1.less          |   2 +-
 .../css/enhancements/layout-base.less         |   8 +-
 .../unprocessed/css/enhancements/layout.less  |   6 +-
 .../css/enhancements/typography.less          |   2 +-
 cfgov/unprocessed/css/images.less             |   4 +-
 .../css/molecules/autocomplete.less           |   4 +-
 .../css/molecules/global-eyebrow.less         |  18 +-
 .../css/molecules/global-search.less          |   8 +-
 .../unprocessed/css/molecules/info-unit.less  |   6 +-
 .../css/molecules/related-metadata.less       |  14 +-
 .../css/molecules/related-posts.less          |  16 +-
 .../css/molecules/social-media.less           |   8 +-
 cfgov/unprocessed/css/molecules/tags.less     |   8 +-
 cfgov/unprocessed/css/on-demand/ask.less      |  10 +-
 .../css/on-demand/car-buying-guide.less       |   4 +-
 cfgov/unprocessed/css/on-demand/error.less    |   2 +-
 .../css/on-demand/job_listing_list.less       |   6 +-
 .../mortgage-performance-trends.less          |   2 +-
 .../unprocessed/css/organisms/ask-search.less |   2 +-
 .../organisms/filterable-list-controls.less   |   2 +-
 cfgov/unprocessed/css/organisms/footer.less   |  36 +-
 cfgov/unprocessed/css/organisms/header.less   |   2 +-
 .../css/organisms/info-unit-group.less        |  22 +-
 .../unprocessed/css/organisms/mega-menu.less  |  28 +-
 .../css/organisms/secondary-nav.less          |  14 +-
 .../css/organisms/sidebar-breakout.less       |  18 +-
 .../css/organisms/video-player.less           |  64 +--
 cfgov/unprocessed/css/print.less              |  44 +-
 .../unprocessed/js/molecules/Autocomplete.js  |   4 +-
 .../unprocessed/js/molecules/GlobalSearch.js  |   2 +-
 .../unprocessed/js/molecules/Notification.js  |   4 +-
 .../js/organisms/MegaMenuMobile.js            |   4 +-
 cfgov/v1/jinja2/v1/activity-log/index.html    |   2 +-
 cfgov/v1/jinja2/v1/blog/blog_page.html        |   4 +-
 cfgov/v1/jinja2/v1/browse-basic/index.html    |   2 +-
 .../v1/jinja2/v1/browse-filterable/index.html |   2 +-
 cfgov/v1/jinja2/v1/document-detail/index.html |   4 +-
 .../jinja2/v1/enforcement-action/index.html   |   4 +-
 cfgov/v1/jinja2/v1/events/_macros.html        |  10 +-
 cfgov/v1/jinja2/v1/events/event.html          |   4 +-
 cfgov/v1/jinja2/v1/home_page/home_page.html   |  44 +-
 .../jinja2/v1/home_page/home_page_legacy.html |   6 +-
 .../jinja2/v1/includes/atoms/hyperlink.html   |   2 +-
 .../v1/jinja2/v1/includes/atoms/tagline.html  |   2 +-
 .../v1/includes/blocks/email-signup.html      |   6 +-
 .../v1/includes/molecules/call-to-action.html |   4 +-
 .../v1/jinja2/v1/includes/molecules/card.html |  10 +-
 .../v1/includes/molecules/content-image.html  |  10 +-
 .../v1/includes/molecules/feature-card.html   |   8 +-
 .../v1/includes/molecules/global-eyebrow.html |  22 +-
 .../v1/includes/molecules/global-search.html  |  20 +-
 .../v1/jinja2/v1/includes/molecules/hero.html |  22 +-
 .../v1/includes/molecules/info-unit-2.html    |  18 +-
 .../v1/includes/molecules/info-unit.html      |  16 +-
 .../v1/includes/molecules/notification.html   |  10 +-
 .../v1/includes/molecules/pagination.html     |  26 +-
 .../jinja2/v1/includes/molecules/quote.html   |   4 +-
 .../includes/molecules/related-content.html   |   6 +-
 .../related-metadata-enforcement-action.html  |  32 +-
 .../includes/molecules/related-metadata.html  |  12 +-
 .../v1/includes/molecules/related-posts.html  |  12 +-
 .../v1/includes/molecules/related-topics.html |   6 +-
 .../v1/includes/molecules/rss-feed.html       |   2 +-
 .../v1/includes/molecules/social-media.html   |  16 +-
 .../includes/molecules/text-introduction.html |   4 +-
 .../v1/includes/organisms/ask-search.html     |  10 +-
 .../v1/includes/organisms/card-group.html     |   2 +-
 .../v1/includes/organisms/data_snapshot.html  |   8 +-
 .../v1/includes/organisms/expandable.html     |  12 +-
 .../v1/includes/organisms/feature-cards.html  |   8 +-
 .../includes/organisms/featured-content.html  |  10 +-
 .../organisms/filterable-list-controls.html   |  42 +-
 .../jinja2/v1/includes/organisms/footer.html  | 126 ++--
 .../jinja2/v1/includes/organisms/header.html  |  10 +-
 .../includes/organisms/info-unit-group-2.html |   8 +-
 .../includes/organisms/info-unit-group.html   |   4 +-
 .../includes/organisms/item-introduction.html |   2 +-
 .../v1/includes/organisms/mortgage-chart.html |   4 +-
 .../v1/includes/organisms/mortgage-map.html   |  14 +-
 .../v1/includes/organisms/post-preview.html   |  24 +-
 .../includes/organisms/secondary-nav-fig.html |  28 +-
 .../v1/includes/organisms/secondary-nav.html  |  26 +-
 .../includes/organisms/sidebar-breakout.html  |  32 +-
 .../organisms/sidebar-contact-info.html       |   2 +-
 .../v1/includes/organisms/tables/base.html    |   4 +-
 .../v1/includes/organisms/video-player.html   |  34 +-
 .../v1/includes/snippets/reusable_text.html   |   2 +-
 cfgov/v1/jinja2/v1/includes/tags.html         |  12 +-
 .../includes/templates/upcoming-events.html   |   2 +-
 cfgov/v1/jinja2/v1/landing-page/index.html    |   6 +-
 cfgov/v1/jinja2/v1/layouts/404.html           |  10 +-
 cfgov/v1/jinja2/v1/layouts/500.html           |  10 +-
 cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html  |   2 +-
 cfgov/v1/jinja2/v1/layouts/base.html          |   2 +-
 cfgov/v1/jinja2/v1/layouts/layout-1-3.html    |  12 +-
 cfgov/v1/jinja2/v1/layouts/layout-2-1.html    |  14 +-
 cfgov/v1/jinja2/v1/layouts/layout-full.html   |  12 +-
 cfgov/v1/jinja2/v1/learn-page/index.html      |   4 +-
 cfgov/v1/jinja2/v1/newsroom/index.html        |   8 +-
 .../v1/jinja2/v1/newsroom/newsroom-page.html  |   2 +-
 cfgov/v1/jinja2/v1/story_page.html            |   4 +-
 .../jinja2/v1/sublanding-page/filterable.html |   2 +-
 cfgov/v1/jinja2/v1/sublanding-page/index.html |   6 +-
 cfgov/v1/jinja2/v1/template_debug.html        |   4 +-
 .../jinja2/wellbeing/_disclaimer.html         |   2 +-
 .../jinja2/wellbeing/_templates/no_js.html    |   4 +-
 cfgov/wellbeing/jinja2/wellbeing/about.html   |  12 +-
 cfgov/wellbeing/jinja2/wellbeing/error.html   |   2 +-
 cfgov/wellbeing/jinja2/wellbeing/home.html    |  70 +--
 cfgov/wellbeing/jinja2/wellbeing/results.html |  68 +--
 .../youth_employment/yes-checklist-items.html |   2 +-
 .../youth_employment/yes-checklist.html       |   6 +-
 docs/atomic-structure.md                      |   8 +-
 docs/editing-components.md                    |   6 +-
 docs/functional-testing.md                    |   2 +-
 docs/javascript-unit-tests.md                 |   4 +-
 docs/wagtail-pages.md                         |   4 +-
 .../filing-instruction-guide-helpers.cy.js    |   8 +-
 .../filing-instruction-guide.cy.js            |  20 +-
 .../email-signup/email-signup-helpers.cy.js   |   2 +-
 .../filterable-lists/filter-helpers.cy.js     |   4 +-
 .../filterable-list-control-helpers.cy.js     |  32 +-
 .../filterable-lists-helpers.cy.js            |   2 +-
 .../components/footer/footer-helpers.cy.js    |  10 +-
 .../components/header/header-helpers.cy.js    |   4 +-
 .../multiselect/multiselect-helpers.cy.js     |   2 +-
 .../pagination/pagination-helpers.cy.js       |  10 +-
 .../ask-cfpb/answer-helpers.cy.js             |   4 +-
 .../consumer-tools/ask-cfpb/ask-cfpb.cy.js    |  16 +-
 .../ask-cfpb/search-helpers.cy.js             |   2 +-
 .../credit-cards/explore-cards-helpers.cy.js  |   2 +-
 .../obtener-respuestas-helpers.cy.js          |   2 +-
 .../prepaid-agreements-search-helpers.cy.js   |   2 +-
 .../fixtures/sample-fig-page.js               | 390 ++++++-------
 .../js/fig-sidenav-utils-spec.js              |  12 +-
 .../js/fwb-questions-spec.js                  |   8 +-
 .../js/fwb-results-spec.js                    |  16 +-
 .../disclosures/fixtures/overview.js          | 142 ++---
 .../regulations3k/js/permalinks-utils-spec.js |   4 +-
 .../regulations3k/js/recent-notices-spec.js   |   4 +-
 .../js/ClearableInput-spec.js                 |  14 +-
 .../js/expandable-mobile-spec.js              |  22 +-
 .../js/search-spec.js                         |  32 +-
 .../js/tdp-analytics-spec.js                  |  56 +-
 .../js/modules/footer-button-spec.js          |   6 +-
 .../js/molecules/Notification-spec.js         |  12 +-
 .../organisms/FilterableListControls-spec.js  |  60 +-
 test/unit_tests/js/organisms/MegaMenu-spec.js |  10 +-
 .../js/organisms/MegaMenuDesktop-spec.js      |  12 +-
 .../js/organisms/MegaMenuMobile-spec.js       |  22 +-
 test/unit_tests/mocks/emailSignupSnippet.js   |   8 +-
 test/unit_tests/mocks/megaMenuSnippet.js      | 538 +++++++++---------
 284 files changed, 2520 insertions(+), 2520 deletions(-)

diff --git a/cfgov/agreements/jinja2/agreements/_need_help.html b/cfgov/agreements/jinja2/agreements/_need_help.html
index 88d01bdef08..5edb06a9168 100755
--- a/cfgov/agreements/jinja2/agreements/_need_help.html
+++ b/cfgov/agreements/jinja2/agreements/_need_help.html
@@ -1,6 +1,6 @@
 <div class="m-related-links">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Need help with your credit cards?
         </h2>
     </header>
diff --git a/cfgov/agreements/jinja2/agreements/archive.html b/cfgov/agreements/jinja2/agreements/archive.html
index 8c19e9b9d56..3294aabe992 100644
--- a/cfgov/agreements/jinja2/agreements/archive.html
+++ b/cfgov/agreements/jinja2/agreements/archive.html
@@ -10,7 +10,7 @@
   ({'href':'/credit-cards/agreements/','title':'Credit card agreement database'}),
 ] %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>Credit card agreement archive</h1>
         {% if agreements | length == 0 %}
@@ -50,7 +50,7 @@ <h1>Credit card agreement archive</h1>
     </div>
 {% endblock %}
 
-{% block content_sidebar scoped  %}
+{% block content__sidebar scoped  %}
     <div class="block block__flush-top">
         {% include '_need_help.html' %}
     </div>
diff --git a/cfgov/agreements/jinja2/agreements/index.html b/cfgov/agreements/jinja2/agreements/index.html
index 3305799169b..1f3b9f022af 100755
--- a/cfgov/agreements/jinja2/agreements/index.html
+++ b/cfgov/agreements/jinja2/agreements/index.html
@@ -9,7 +9,7 @@
   ({'href':'/data-research/credit-card-data/','title':'Credit cards'}),
 ] %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>Credit card agreement database</h1>
 
@@ -79,7 +79,7 @@ <h3>College credit card agreements</h3>
 
 {% endblock %}
 
-{% block content_sidebar scoped  %}
+{% block content__sidebar scoped  %}
     <div class="block block__flush-top">
         {% include '_need_help.html' %}
     </div>
diff --git a/cfgov/agreements/jinja2/agreements/search.html b/cfgov/agreements/jinja2/agreements/search.html
index b6626105124..9f894c05b79 100755
--- a/cfgov/agreements/jinja2/agreements/search.html
+++ b/cfgov/agreements/jinja2/agreements/search.html
@@ -10,7 +10,7 @@
     Credit card agreement database search result | Consumer Financial Protection Bureau
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>Credit card agreement database</h1>
     </div>
@@ -54,41 +54,41 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     aria-label="Pagination">
 
                 {% if page.has_previous() %}
-                <a class="a-btn m-pagination_btn-prev"
+                <a class="a-btn m-pagination__btn-prev"
                     href="?page={{ page.previous_page_number() }}#ccagrsearch">
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-prev" disabled>
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                <a class="a-btn m-pagination__btn-prev" disabled>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% endif %}
 
                 {% if page.has_next() %}
-                <a class="a-btn m-pagination_btn-next"
+                <a class="a-btn m-pagination__btn-next"
                     href="?page={{ page.next_page_number() }}#ccagrsearch">
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-next" disabled>
+                <a class="a-btn m-pagination__btn-next" disabled>
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% endif %}
 
-                <form class="m-pagination_form"
+                <form class="m-pagination__form"
                         action="#ccagrsearch">
-                    <label class="m-pagination_label"
-                            for="m-pagination_current-page">
+                    <label class="m-pagination__label"
+                            for="m-pagination__current-page">
                         Page
                         <span class="u-visually-hidden">
                             number {{ page.number }} out
                         </span>
-                        <input class="m-pagination_current-page"
-                                id="m-pagination_current-page"
+                        <input class="m-pagination__current-page"
+                                id="m-pagination__current-page"
                                 name="page"
                                 type="number"
                                 min="1"
@@ -100,8 +100,8 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     </label>
                     <button class="a-btn
                                     a-btn__link
-                                    m-pagination_btn-submit"
-                            id="m-pagination_btn-submit"
+                                    m-pagination__btn-submit"
+                            id="m-pagination__btn-submit"
                             type="submit">Go</button>
                 </form>
             </nav>
@@ -114,11 +114,11 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
 
 {% endblock %}
 
-{% block content_sidebar scoped  %}
+{% block content__sidebar scoped  %}
     <div class="block block__flush-top">
         <div class="m-related-links">
             <header class="m-slug-header">
-                <h2 id="issuer-select" class="m-slug-header_heading">
+                <h2 id="issuer-select" class="m-slug-header__heading">
                     Search again
                 </h2>
             </header>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
index eda4aa1c062..8d561541a75 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
@@ -1,6 +1,6 @@
 <div class="block">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ disclaimer.sidefoot_heading }}
         </h2>
     </header>
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
index 1a6d86b532e..ccfb1e7ecac 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
@@ -20,7 +20,7 @@
     {{ super() }} ask-cfpb-page ask-cfpb-page__answer
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block
                 block__flush-top
                 block__sub">
@@ -52,11 +52,11 @@ <h1>
         <div class="block block__sub">
 
             <div class="o-summary o-summary__mobile">
-                <div class="o-summary_content answer-text">
+                <div class="o-summary__content answer-text">
                     {% include_block page.answer_content %}
                 </div>
 
-                <button class="o-summary_btn u-hidden">
+                <button class="o-summary__btn u-hidden">
                     {{ _('Read full answer') }}
                     {{ svg_icon('plus-round') }}
                 </button>
@@ -69,15 +69,15 @@ <h2>{{ _('Don\'t see what you\'re looking for?') }}</h2>
                     <h3>{{ _('Browse related questions') }} </h3>
                     <ul class="m-list m-list__unstyled m-list__links">
                         {% for question in related_questions %}
-                        <li class="m-list_item">
-                            <a href="{{ question.url }}" class="m-list_link">
+                        <li class="m-list__item">
+                            <a href="{{ question.url }}" class="m-list__link">
                                 {{ question.question | safe }}
                             </a>
                         </li>
                         {% endfor %}
                         {% if portal_page %}
-                        <li class="m-list_item m-list_item__last">
-                            <a href="{{ portal_page.url }}" class="m-list_link">
+                        <li class="m-list__item m-list__item__last">
+                            <a href="{{ portal_page.url }}" class="m-list__link">
                                 <b>
                                     {{ _('Learn more about') }}
                                     {{ portal_page.portal_topic.title(page.language) | lower }}
@@ -97,7 +97,7 @@ <h3>{{ _('Browse related questions') }} </h3>
     </div>
 {% endblock %}
 
-{% block content_sidebar scoped  %}
+{% block content__sidebar scoped  %}
     {% if about_us %}
         <div class="block
                     block__flush-top
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
index b17c2a28020..8182c52ac04 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
@@ -12,7 +12,7 @@
     {{ super() }} ask-cfpb-page ask-cfpb-page__search
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block
                 block__flush-top">
         <h1>{{ _('Search our library of answers') }}</h1>
@@ -90,7 +90,7 @@ <h4>
 
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {% if about_us %}
         <div class="block block__flush-top about-us-text">
             {{ about_us.text | richtext }}
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
index fae467d9006..328b83470dd 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
@@ -14,13 +14,13 @@
     {{ super() }} ask-cfpb-page ask-cfpb-page__landing
 {%- endblock %}
 
-{% block content_intro -%}
+{% block content__intro -%}
     {% for block in page.header -%}
         {{ render_block.render(block, loop.index) }}
     {%- endfor %}
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
 
         {% import 'v1/includes/molecules/translation-links.html' as translation_links with context %}
@@ -35,7 +35,7 @@
 
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {% if about_us %}
         <div class="block block__flush-top about-us-text">
             {{ about_us.text | richtext }}
diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
index 490c4894ae4..ea441706dbe 100644
--- a/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
+++ b/cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html
@@ -11,7 +11,7 @@
     {{ super() }} ask-cfpb-page ask-cfpb-page__see-all
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <h1>
       {{ page.title }}
     </h1>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
index 180b2cee53a..386d094efb9 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/_sidebar.html
@@ -10,7 +10,7 @@ <h3>About us</h3>
 <div class="block">
     <div class="m-related-links">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 About the Voluntary Diversity Self-Assessment
             </h2>
         </header>
@@ -49,8 +49,8 @@ <h2 class="m-slug-header_heading">
             </li>
         </ul>
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a href="/about-us/diversity-and-inclusion/self-assessment-regulated-entities/" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/diversity-and-inclusion/self-assessment-regulated-entities/" class="m-list__link">
                     Learn more about the Voluntary Diversity Self-Assessment
                 </a>
             </li>
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
index ced6948448c..d5cf5c49f85 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/form-submitted.html
@@ -14,18 +14,18 @@
     Your voluntary diversity assessment onboarding has been submitted | Consumer Financial Protection Bureau
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>Voluntary diversity assessment onboarding form</h1>
     </div>
     <div class="block">
         <div class="m-notification m-notification__visible m-notification__success">
             {{ svg_icon('approved-round') }}
-            <div class="m-notification_content">
-                <div class="h4 m-notification_message">
+            <div class="m-notification__content">
+                <div class="h4 m-notification__message">
                     Your voluntary diversity assessment onboarding has been submitted
                 </div>
-                <p class="m-notification_explanation">
+                <p class="m-notification__explanation">
                     We’ll use the information you submitted to give you access to the Inclusivity Portal.
                     You’ll receive an email when your portal account has been created with instructions for logging in.
                     If you have any questions, please contact the Office of Minority and Women Inclusion’s Diversity Assessments Support Team at
@@ -36,6 +36,6 @@ <h1>Voluntary diversity assessment onboarding form</h1>
     </div>
 {% endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
index 279d7412294..260f90a4d77 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/privacy.html
@@ -22,7 +22,7 @@
     The Privacy Act statement for the CFPB’s voluntary diversity assessment onboarding form.
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>
             Privacy Act statement
@@ -42,6 +42,6 @@ <h1>
     </div>
 {% endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
diff --git a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
index dfc95a34927..40b907cff73 100644
--- a/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
+++ b/cfgov/diversity_inclusion/jinja2/diversity_inclusion/voluntary-assessment-form.html
@@ -17,7 +17,7 @@
     The CFPB’s voluntary diversity assessment onboarding form allows financial institutions to submit diversity and inclusion assessments.
 {%- endblock %}
 
-{% block content_main -%}
+{% block content__main -%}
     <div class="block block__flush-top">
         <h1>Voluntary diversity assessment onboarding form</h1>
         <div class="lead-paragraph">
@@ -57,7 +57,7 @@ <h2>Institution information</h2>
                 Please provide your institution’s name, headquarters location, and tax identification number.
             </p>
             <div class="o-well u-mb30">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.institution_name.id_for_label }}">
@@ -66,7 +66,7 @@ <h2>Institution information</h2>
                         {{ form.institution_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.institution_address.id_for_label }}">
@@ -75,9 +75,9 @@ <h2>Institution information</h2>
                         {{ form.institution_address }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="content-l">
-                        <div class="content-l_col content-l_col-1-2">
+                        <div class="content-l__col content-l__col-1-2">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_city.id_for_label }}">
@@ -86,7 +86,7 @@ <h2>Institution information</h2>
                                 {{ form.institution_city }}
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-4">
+                        <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_state.id_for_label }}">
@@ -95,7 +95,7 @@ <h2>Institution information</h2>
                                 {{ form.institution_state }}
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-4">
+                        <div class="content-l__col content-l__col-1-4">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading"
                                        for="{{ form.institution_zip.id_for_label }}">
@@ -106,7 +106,7 @@ <h2>Institution information</h2>
                         </div>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.tax_id.id_for_label }}">
@@ -121,7 +121,7 @@ <h2>Contact information</h2>
                 Please provide the name and contact information for the individual who will be your institution’s diversity and inclusion point of contact.
             </p>
             <div class="o-well u-mb30">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_name.id_for_label }}">
@@ -130,7 +130,7 @@ <h2>Contact information</h2>
                         {{ form.contact_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_title.id_for_label }}">
@@ -139,7 +139,7 @@ <h2>Contact information</h2>
                         {{ form.contact_title }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_email.id_for_label }}">
@@ -148,7 +148,7 @@ <h2>Contact information</h2>
                         {{ form.contact_email }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_phone.id_for_label }}">
@@ -157,18 +157,18 @@ <h2>Contact information</h2>
                         {{ form.contact_phone }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.contact_phone_alt.id_for_label }}">
                             {{ form.contact_phone_alt.label }}
-                            <small class="a-label_helper">(optional)</small>
+                            <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.contact_phone_alt }}
                     </div>
                 </div>
             </div>
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <input class="a-btn"
                            type="submit"
@@ -185,6 +185,6 @@ <h2>Contact information</h2>
     </div>
 {%- endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
index 1bad7b83ce4..684028c4f84 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/data_points.html
@@ -29,8 +29,8 @@ <h3 class="report-header o-fig_heading">
     {% if data_fields.count() > 3 %}
         <ul class="m-list m-list__links">
             {% for field in data_fields %}
-                <li class="m-list_item">
-                    <a class="m-list_link"
+                <li class="m-list__item">
+                    <a class="m-list__link"
                        href="#{{field.info.get('short_name', '')}}">
                             Field {{ field.info.get('field_number', '') }}: {{ field.info.get('title', '') }}
                     </a>
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
index 46553f1a311..9ca4acbf31a 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/index.html
@@ -9,11 +9,11 @@
     {{ super() }} o-fig
 {%- endblock %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     {{ super() }} content__flush-bottom research-report o-fig_main
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
 
     {% if page.eyebrow %}
       <div class="eyebrow">{{ page.eyebrow }}</div>
@@ -22,7 +22,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()">
-          <span class="a-link_text">Print this guide</span>
+          <span class="a-link__text">Print this guide</span>
           {{ svg_icon('print') }}
       </a>
     </div>
diff --git a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
index 39f82d3f5ee..27c024635e8 100644
--- a/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
+++ b/cfgov/filing_instruction_guide/jinja2/filing_instruction_guide/layout-fig.html
@@ -40,20 +40,20 @@
     <main class="u-layout-grid u-layout-grid__1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
         {% block hero -%}{%- endblock %}
         {% block pre_content scoped -%}
             {% include 'v1/layouts/_breadcrumbs.html' %}
         {%- endblock %}
         {% block body_content scoped %}
-        <aside class="u-layout-grid_secondary-nav u-layout-grid_secondary-nav__sticky">
+        <aside class="u-layout-grid__secondary-nav u-layout-grid__secondary-nav__sticky">
             {% import 'v1/includes/organisms/secondary-nav-fig.html' as secondary_nav with context %}
             {{ secondary_nav.render(version_status, effective_start_date, effective_end_date) }}
         </aside>
-        <div class="u-layout-grid_main
-                    {% block content_main_modifiers -%}{%- endblock %}"
-                id="content_main">
-            {% block content_main scoped -%}{%- endblock %}
+        <div class="u-layout-grid__main
+                    {% block content__main_modifiers -%}{%- endblock %}"
+                id="content__main">
+            {% block content__main scoped -%}{%- endblock %}
         </div>
         {% endblock %}
         </div>
diff --git a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
index 51efc4ea72f..3dfce477d1a 100644
--- a/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
+++ b/cfgov/form_explainer/jinja2/form-explainer/blocks/explainer.html
@@ -87,21 +87,21 @@
             o-expandable__form-explainer
             o-expandable__form-explainer-category-{{ category_index }}"
      id="{{ id }}">
-    <button class="o-expandable_header"
+    <button class="o-expandable__header"
             tabindex="0">
-        <span class="h4 o-expandable_label">
+        <span class="h4 o-expandable__label">
             {{ item.heading }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
-    <div class="o-expandable_content" tabindex="0">
+    <div class="o-expandable__content" tabindex="0">
         {{ item.body | safe }}
     </div>
 </div>
diff --git a/cfgov/form_explainer/jinja2/form-explainer/index.html b/cfgov/form_explainer/jinja2/form-explainer/index.html
index f41646daf29..e6fa9e63dd8 100644
--- a/cfgov/form_explainer/jinja2/form-explainer/index.html
+++ b/cfgov/form_explainer/jinja2/form-explainer/index.html
@@ -8,11 +8,11 @@
     <link rel="stylesheet" href="{{ static('apps/form-explainer/css/main.css') }}">
 {%- endblock css %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     {{ super() }} content__flush-bottom
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {{ render_block.render(block, loop.index) }}
     {%- endfor %}
diff --git a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
index 4de9977a4bd..180ba647946 100644
--- a/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
+++ b/cfgov/hmda/jinja2/hmda/hmda-explorer-controls.html
@@ -1,8 +1,8 @@
 {% macro _render_filter_fields(form) %}
-    <div class="content-l_col
-                content-l_col-1-2">
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+    <div class="content-l__col
+                content-l__col-1-2">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <div class="m-form-field m-form-field__select">
                     <label class="a-label a-label__heading" for="id_geo">
                         Geographic area
@@ -21,10 +21,10 @@
             </fieldset>
         </div>
     </div>
-    <div class="content-l_col
-                content-l_col-1">
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+    <div class="content-l__col
+                content-l__col-1">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <legend class="a-legend">
                     Records included
                 </legend>
@@ -34,11 +34,11 @@
                     <label class="a-label" for="{{ radio.id_for_label }}">
                         {{ radio.choice_label}}
                         {% if radio.data.value == 'first-lien-owner-occupied-1-4-family-records' %}
-                            <small class="a-label_helper">
+                            <small class="a-label__helper">
                                 Most people start with this option
                             </small>
                         {% elif radio.data.value == 'all-records' %}
-                            <small class="a-label_helper">
+                            <small class="a-label__helper">
                                 Includes applications, denials, originations, institution purchases
                             </small>
                         {% endif %}
@@ -47,8 +47,8 @@
                {% endfor %}
             </fieldset>
         </div>
-        <div class="o-form_group">
-            <fieldset class="o-form_fieldset">
+        <div class="o-form__group">
+            <fieldset class="o-form__fieldset">
                 <legend class="a-legend">
                     Variable descriptions
                 </legend>
@@ -58,7 +58,7 @@
                       <label class="a-label" for="{{ radio.id_for_label }}">
                           {{ radio.choice_label }}
                           {% if radio.data.value == 'codes' %}
-                              <small class="a-label_helper">
+                              <small class="a-label__helper">
                                   Choose only if you're already familiar with the HMDA reporting codes
                               </small>
                           {% endif %}
@@ -74,8 +74,8 @@
     <form method="get" action=".">
         <div class="content-l">
             {{ _render_filter_fields(form) }}
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <input class="a-btn"
                        type="submit"
diff --git a/cfgov/hmda/jinja2/hmda/hmda-explorer.html b/cfgov/hmda/jinja2/hmda/hmda-explorer.html
index 6ae1bdf86c2..0fb7a820a97 100644
--- a/cfgov/hmda/jinja2/hmda/hmda-explorer.html
+++ b/cfgov/hmda/jinja2/hmda/hmda-explorer.html
@@ -7,7 +7,7 @@
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if block.block_type == 'item_introduction' %}
             {{ item_introduction.render(block.value) }}
@@ -34,6 +34,6 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/housing_counselor/jinja2/housing_counselor/index.html b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
index 8068290c269..f04cfc61e14 100644
--- a/cfgov/housing_counselor/jinja2/housing_counselor/index.html
+++ b/cfgov/housing_counselor/jinja2/housing_counselor/index.html
@@ -11,7 +11,7 @@
       href="{{ static('apps/find-a-housing-counselor/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <section class="block block__flush-top">
         <div class="u-print-only">
             <!-- Show different content on print -->
@@ -45,9 +45,9 @@ <h1>Housing counselors near you</h1>
                     u-screen-only
                     o-sidebar-breakout">
             <div class="content-l">
-                <div class="o-sidebar-breakout_col
-                            content-l_col
-                            content-l_col-2-3">
+                <div class="o-sidebar-breakout__col
+                            content-l__col
+                            content-l__col-2-3">
                     <h1>Find a housing counselor</h1>
                     <p>
                         Housing counselors throughout the country can
@@ -62,7 +62,7 @@ <h1>Find a housing counselor</h1>
                         no cost to you. There is also a
                         <a class="a-link a-link__icon"
                             href="https://www.hud.gov/program_offices/housing/sfh/hcc/hcc_home">
-                            <span class="a-link_text">list of nationwide HUD-approved counseling agencies</span></a>.
+                            <span class="a-link__text">list of nationwide HUD-approved counseling agencies</span></a>.
                     </p>
                     <p>
                         Using the search box below, you can find one
@@ -72,16 +72,16 @@ <h1>Find a housing counselor</h1>
                         each agency.</strong>
                     </p>
                 </div>
-                <aside class="o-sidebar-breakout_col
-                                content-l_col
-                                content-l_col-1-3">
+                <aside class="o-sidebar-breakout__col
+                                content-l__col
+                                content-l__col-1-3">
                     <header class="m-slug-header">
-                        <h2 class="m-slug-header_heading">
+                        <h2 class="m-slug-header__heading">
                             Coronavirus affecting your mortgage or housing?
                         </h2>
                     </header>
-                    <div class="o-sidebar-breakout_text-container">
-                        <div class="o-sidebar-breakout_text-body">
+                    <div class="o-sidebar-breakout__text-container">
+                        <div class="o-sidebar-breakout__text-body">
                             <p>
                                 We have resources from multiple federal agencies to help homeowners and renters understand options for relief and protection in light of the coronavirus emergency.
                             </p>
@@ -120,11 +120,11 @@ <h2 class="m-slug-header_heading">
                                                 m-notification__error
                                                 m-notification__visible">
                                         {{ svg_icon('warning-round') }}
-                                        <div class="m-notification_content" role="alert">
-                                            <div class="h4 m-notification_message">
+                                        <div class="m-notification__content" role="alert">
+                                            <div class="h4 m-notification__message">
                                                 {{ error_message }}
                                             </div>
-                                            <div class="m-notification_explanation">
+                                            <div class="m-notification__explanation">
                                                 {{ error_help }}
                                             </div>
                                         </div>
@@ -145,12 +145,12 @@ <h2 class="m-slug-header_heading">
                                     data-cy="btn-fahc-submit">
                                 Find a counselor
                             </button>
-                            <div class="m-form-field-with-button_info">
+                            <div class="m-form-field-with-button__info">
                                 <p>
                                     This tool is powered by
                                     <a class="a-link a-link__icon"
                                         href="https://data.hud.gov/housing_counseling.html">
-                                        <span class="a-link_text">HUD's</span>
+                                        <span class="a-link__text">HUD's</span>
                                         {{ svg_icon('external-link') }}</a>
                                     official list of housing counselors.
                                 </p>
@@ -164,8 +164,8 @@ <h2 class="m-slug-header_heading">
 
                     {% if zipcode and zipcode_valid %}
                     <div class="skip-nav">
-                        <a class="skip-nav_link
-                                    skip-nav_link__flush-left"
+                        <a class="skip-nav__link
+                                    skip-nav__link__flush-left"
                             href="#hud_results-list_container">
                             Skip to results
                         </a>
@@ -192,22 +192,22 @@ <h2 class="m-slug-header_heading">
                 <ul class="m-list
                             m-list__horizontal
                             hud_hca_api_results_actions">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a class="a-link
                                     a-link__icon"
                             id="hud_print-page-link"
                             href="#">
-                            <span class="a-link_text">Print list</span>
+                            <span class="a-link__text">Print list</span>
                             {{ svg_icon('print') }}
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a class="a-link a-link__icon"
                             id="generate-pdf-link"
                             href="{{ pdf_url }}"
                             target="_blank"
                             rel="noopener noreferrer">
-                            <span class="a-link_text">Save list as <abbr title="Portable Document Format">PDF</abbr></span>
+                            <span class="a-link__text">Save list as <abbr title="Portable Document Format">PDF</abbr></span>
                             {{ svg_icon('download') }}
                         </a>
                     </li>
@@ -244,7 +244,7 @@ <h2 class="h4">
                                         {% if counselor.weburl %}
                                         <a class="a-link a-link__icon"
                                             href="{{ counselor.weburl }}">
-                                            <span class="a-link_text"><b itemprop="name">{{ counselor.nme }}</b></span>
+                                            <span class="a-link__text"><b itemprop="name">{{ counselor.nme }}</b></span>
                                             {{ svg_icon('external-link') }}
                                         </a>
                                         {% else %}
@@ -272,7 +272,7 @@ <h2 class="h4">
                                         <a class="a-link a-link__icon"
                                             href="{{ counselor.weburl }}"
                                             itemprop="url">
-                                            <span class="a-link_text">{{ counselor.weburl }}</span>
+                                            <span class="a-link__text">{{ counselor.weburl }}</span>
                                             {{ svg_icon('external-link') }}
                                         </a>
                                         </dd>
diff --git a/cfgov/jinja2/ccdb-complaint/ccdb-search.html b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
index 3e0cbb5037c..187e253c2bf 100644
--- a/cfgov/jinja2/ccdb-complaint/ccdb-search.html
+++ b/cfgov/jinja2/ccdb-complaint/ccdb-search.html
@@ -17,11 +17,11 @@
   {{ super() }} u-layout-grid__full-width
 {%- endblock %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
   {{ super() }} ccdb-search
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
   <div id="ccdb-ui-root">
     <div class="u-hide-if-js wrapper u-mt60 u-mb60">
       {% import 'v1/includes/molecules/notification.html' as notification with context %}
diff --git a/cfgov/jinja2/govdelivery-subscribe/error/index.html b/cfgov/jinja2/govdelivery-subscribe/error/index.html
index 808399b6ca1..2b2301ce8c8 100644
--- a/cfgov/jinja2/govdelivery-subscribe/error/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/error/index.html
@@ -8,7 +8,7 @@
     Your subscription was not successfully received.
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>{{ svg_icon('error-round') }} Please try again.</h1>
         <p>
diff --git a/cfgov/jinja2/govdelivery-subscribe/server-error/index.html b/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
index 2fd33a2ccd2..6500d8f022a 100644
--- a/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/server-error/index.html
@@ -8,7 +8,7 @@
     Your subscription to GovDelivery was not successful because of a server error, please try again later.
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>{{ svg_icon('error-round') }} Please try again later.</h1>
         <p>
diff --git a/cfgov/jinja2/govdelivery-subscribe/success/index.html b/cfgov/jinja2/govdelivery-subscribe/success/index.html
index 4bf08c14159..b62541923f3 100644
--- a/cfgov/jinja2/govdelivery-subscribe/success/index.html
+++ b/cfgov/jinja2/govdelivery-subscribe/success/index.html
@@ -8,7 +8,7 @@
     Your subscription was successfully received.
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>{{ svg_icon('approved-round') }} Success!</h1>
         <p>Your subscription was successfully received.</p>
diff --git a/cfgov/jinja2/know-before-you-owe/compare/index.html b/cfgov/jinja2/know-before-you-owe/compare/index.html
index e684a50b8b1..9c6727b83b9 100644
--- a/cfgov/jinja2/know-before-you-owe/compare/index.html
+++ b/cfgov/jinja2/know-before-you-owe/compare/index.html
@@ -18,7 +18,7 @@
 <link rel="stylesheet" href="{{ static('apps/know-before-you-owe/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
 <article>
     <div class="block block__flush-top">
         <header>
@@ -35,44 +35,44 @@ <h1>How we improved the disclosures</h1>
         </p>
 
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-testing.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our qualitative testing of the new disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_report_tila-respa_testing-spanish-refinancing.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our post-proposal qualitative testing of the new Spanish and refinance disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
                           a-link__icon
-                          m-list_link"
+                          m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_study_tila-respa_disclosure-comparison.pdf">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a report on our quantitative testing of the new disclosures
                     </span>
                     {{ svg_icon('download') }}
                 </a>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a class="a-link
-                          m-list_link"
+                          m-list__link"
                    href="/regulations/integrated-mortgage-disclosures-under-the-real-estate-settlement-procedures-act-regulation-x-and-the-truth-in-lending-act-regulation-z/">
-                    <span class="a-link_text">
+                    <span class="a-link__text">
                         Read a detailed summary of the final rule
                     </span>
                 </a>
@@ -162,13 +162,13 @@ <h3>Closing Disclosure</h3>
         </div>
     </div>
 </article>
-<section class="u-layout-grid_breakout kbyo-footer">
+<section class="u-layout-grid__breakout kbyo-footer">
     <div class="wrapper wrapper__match-content">
         <div class="content-l">
-          <div class="content-l_col
-                      content-l_col-1-2">
+          <div class="content-l__col
+                      content-l__col-1-2">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Legal disclaimer
                 </h2>
             </header>
diff --git a/cfgov/jinja2/know-before-you-owe/index.html b/cfgov/jinja2/know-before-you-owe/index.html
index b5712c09a6c..d2139305bf0 100644
--- a/cfgov/jinja2/know-before-you-owe/index.html
+++ b/cfgov/jinja2/know-before-you-owe/index.html
@@ -13,7 +13,7 @@
         background-color: #d6e5e4 !important;
     }
 
-    .m-hero_image {
+    .m-hero__image {
         background-image: url('{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}');
         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}',
@@ -22,7 +22,7 @@
     }
 
     @media screen and (min-width: 37.5625em) {
-        .m-hero_image {
+        .m-hero__image {
             background-image: url('{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}');
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ static("apps/know-before-you-owe/img/kbyo-hero_laptop-2x.png") }}',
@@ -32,7 +32,7 @@
     }
 
     @media screen and (max-width: 56.250em) {
-        .kbyo-tools .content-l_col-1-2 {
+        .kbyo-tools .content-l__col-1-2 {
             width: 100%;
             margin-bottom: 30px;
         }
@@ -47,29 +47,29 @@
 <script src="{{ static( 'js/routes/on-demand/video-player.js' ) }}"></script>
 {% endblock %}
 
-{% block content_intro %}
+{% block content__intro %}
 <section class="m-hero">
-    <div class="m-hero_wrapper wrapper">
-        <div class="m-hero_text">
-            <h1 class="m-hero_heading">Know Before You Owe | Mortgages</h1>
-            <div class="m-hero_subhead">
+    <div class="m-hero__wrapper wrapper">
+        <div class="m-hero__text">
+            <h1 class="m-hero__heading">Know Before You Owe | Mortgages</h1>
+            <div class="m-hero__subhead">
                 <p>The CFPB’s mortgage initiative is designed to help consumers understand their loan options, shop for the mortgage that’s best for them, and avoid costly surprises at the closing table.
                 </p>
             </div>
         </div>
-        <div class="m-hero_image-wrapper">
-            <div class="m-hero_image"></div>
+        <div class="m-hero__image-wrapper">
+            <div class="m-hero__image"></div>
         </div>
     </div>
 </section>
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="content-l block block__flush-top">
-        <div class="content-l_col
-                    content-l_col-1-2">
+        <div class="content-l__col
+                    content-l__col-1-2">
             <div class="m-info-unit">
-                <div class="m-info-unit_content">
+                <div class="m-info-unit__content">
                     {{- video_player.render(
                         "AwZERLDHJf0",
                         "center",
@@ -79,10 +79,10 @@ <h1 class="m-hero_heading">Know Before You Owe | Mortgages</h1>
                 </div>
             </div>
         </div>
-        <div class="content-l_col
-                    content-l_col-1-2">
+        <div class="content-l__col
+                    content-l__col-1-2">
             <div class="m-info-unit">
-                <div class="m-info-unit_content">
+                <div class="m-info-unit__content">
                     <h2>Making the mortgage process easier</h2>
                     <p>
                         The Know Before You Owe mortgage disclosure rule replaces four disclosure forms with two new ones, the Loan Estimate and the Closing Disclosure. The new forms are easier to understand and easier to use. The rule also requires that you get three business days to review your Closing Disclosure and ask questions before you close on a mortgage.
@@ -93,10 +93,10 @@ <h2>Making the mortgage process easier</h2>
     </div>
     <div class="o-info-unit-group block block__border-top block__padded-top">
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="kbyo-tools__intro">
                             <h2>Tools and resources</h2>
                             <p>Mortgages can be complex and confusing. To supplement the rule, we’ve created several resources to help you as you navigate the mortgage process. </p>
@@ -106,21 +106,21 @@ <h2>Tools and resources</h2>
             </div>
         </div>
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/loan-estimate_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Sample Loan Estimate</h3>
                                 <p>The Loan Estimate makes it easier to shop around and compare loan offers from multiple lenders. Our interactive sample form will help you double check the details and get definitions for terms used on the Loan Estimate.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/loan-estimate/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/loan-estimate/">
                                         Explore a sample Loan Estimate
                                         </a>
                                     </li>
@@ -130,21 +130,21 @@ <h3>Sample Loan Estimate</h3>
                     </div>
                 </div>
             </div>
-             <div class="content-l_col
-                        content-l_col-1-2">
+             <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/closing-disclosure_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Sample Closing Disclosure</h3>
                                 <p>The Closing Disclosure helps you avoid costly surprises at the closing table. Use our interactive sample form to help you compare your Loan Estimate to the Closing Disclosure and make sure that you understand the reason for any differences.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/closing-disclosure/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/closing-disclosure/">
                                         Explore a sample Closing Disclosure
                                         </a>
                                     </li>
@@ -156,21 +156,21 @@ <h3>Sample Closing Disclosure</h3>
             </div>
         </div>
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/owning-a-home_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Buying a House</h3>
                                 <p>This suite of tools and resources guides you through the process of getting a mortgage. It will help you explore interest rates in your area, understand loan options, and prepare you for closing.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/owning-a-home/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/owning-a-home/">
                                         Visit Buying a House
                                         </a>
                                     </li>
@@ -180,25 +180,25 @@ <h3>Buying a House</h3>
                     </div>
                 </div>
             </div>
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                <div class="m-info-unit">
-                    <div class="m-info-unit_content">
+                    <div class="m-info-unit__content">
                         <div class="m-info-unit m-info-unit__inline">
-                            <div class="m-info-unit_image
-                                m-info-unit_image__square"
+                            <div class="m-info-unit__image
+                                m-info-unit__image__square"
                                 style="background-image: url( {{ static('apps/know-before-you-owe/img/home-loan-toolkit_324.png') }} );">
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <h3>Your Home Loan Toolkit</h3>
                                 <p>This booklet takes you from budgeting to closing with worksheets, checklists, and conversation starters. You’ll get a copy when you apply for a home purchase mortgage, but you can also download a copy now.</p>
                                 <ul class="m-list m-list__links">
-                                    <li class="m-list_item">
+                                    <li class="m-list__item">
                                         <a class="a-link
                                                   a-link__icon
-                                                  m-list_link"
+                                                  m-list__link"
                                            href="https://www.consumerfinance.gov/f/201503_cfpb_your-home-loan-toolkit-web.pdf">
-                                            <span class="a-link_text">Download the toolkit</span>
+                                            <span class="a-link__text">Download the toolkit</span>
                                             {{ svg_icon('download') }}
                                         </a>
                                     </li>
@@ -210,14 +210,14 @@ <h3>Your Home Loan Toolkit</h3>
             </div>
         </div>
     </div>
-    <div class="u-layout-grid_breakout kbyo-professional-resources">
+    <div class="u-layout-grid__breakout kbyo-professional-resources">
         <div class="wrapper wrapper__match-content">
             <div class="o-info-unit-group">
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                         <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="kbyo-tools__intro">
                                     <h2>Resources for professionals</h2>
                                     <p>Mortgages can be complex and confusing. To supplement the rule, we’ve created several resources to help you as you navigate the mortgage process.</p>
@@ -227,17 +227,17 @@ <h2>Resources for professionals</h2>
                     </div>
                 </div>
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Mortgage professionals</h3>
                                         <p>Since 2013, we have been working with lenders, creditors, compliance officers, software companies, and other groups to prepare for implementation of the rule.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link"
+                                            <li class="m-list__item">
+                                                <a class="m-list__link"
                                                 href="/regulatory-implementation/tila-respa/">
                                                     Visit the Regulatory Implementation page
                                                 </a>
@@ -248,17 +248,17 @@ <h3>Mortgage professionals</h3>
                             </div>
                         </div>
                     </div>
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Housing counselors</h3>
                                         <p>Assist consumers as they navigate through the new mortgage process. Educate your clients on the new disclosures and timing requirements with our tools and resources.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link" href="https://www.youtube.com/watch?v=ZS49Mmym6Ko">
+                                            <li class="m-list__item">
+                                                <a class="m-list__link" href="https://www.youtube.com/watch?v=ZS49Mmym6Ko">
                                                 View a webinar on the rule
                                                 </a>
                                             </li>
@@ -270,17 +270,17 @@ <h3>Housing counselors</h3>
                     </div>
                 </div>
                 <div class="content-l">
-                    <div class="content-l_col
-                                content-l_col-1-2">
+                    <div class="content-l__col
+                                content-l__col-1-2">
                     <div class="m-info-unit">
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <div class="m-info-unit">
-                                    <div class="m-info-unit_content">
+                                    <div class="m-info-unit__content">
                                         <h3>Media</h3>
                                         <p>We have created resources to help you understand and tell the story of the CFPB’s Know Before You Owe mortgage initiative, which has been a focal point of the Bureau since its start.</p>
                                         <ul class="m-list m-list__links">
-                                            <li class="m-list_item">
-                                                <a class="m-list_link"
+                                            <li class="m-list__item">
+                                                <a class="m-list__link"
                                                 href="/about-us/newsroom/cfpb-releases-new-owning-a-home-tools-to-help-consumers-shop-for-a-mortgage/">
                                                 Read the press release and download a press kit
                                                 </a>
@@ -298,10 +298,10 @@ <h3>Media</h3>
     <div class="block">
         <div class="o-info-unit-group">
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                     <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="kbyo-tools__intro">
                                 <h2>Creating new mortgage disclosures</h2>
                             </div>
@@ -310,18 +310,18 @@ <h2>Creating new mortgage disclosures</h2>
                 </div>
             </div>
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                 <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="m-info-unit">
-                                <div class="m-info-unit_content">
+                                <div class="m-info-unit__content">
                                     <h3>Why we created new disclosures</h3>
                                     <p>The Consumer Financial Protection Bureau (CFPB) is a government agency built to protect consumers. We help keep banks and other financial service providers consumers depend on every day operating fairly.</p>
                                     <p>After the housing crisis, Congress directed us to combine existing federal mortgage disclosures: the initial Truth–in-Lending disclosure with the Good Faith Estimate and the final Truth-in-Lending disclosure with the HUD-1 Settlement Statement. These disclosures had overlapping information and complicated terms, which made them hard for borrowers to understand and for lenders to explain.</p>
                                     <ul class="m-list m-list__links">
-                                        <li class="m-list_item">
-                                            <a class="m-list_link"
+                                        <li class="m-list__item">
+                                            <a class="m-list__link"
                                             href="/know-before-you-owe/compare/">
                                                 Compare the new disclosures to the old ones
                                             </a>
@@ -332,19 +332,19 @@ <h3>Why we created new disclosures</h3>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col
-                            content-l_col-1-2">
+                <div class="content-l__col
+                            content-l__col-1-2">
                 <div class="m-info-unit">
-                        <div class="m-info-unit_content">
+                        <div class="m-info-unit__content">
                             <div class="m-info-unit">
-                                <div class="m-info-unit_content">
+                                <div class="m-info-unit__content">
                                     <h3>How we created new disclosures</h3>
                                     <p>We involved the people who will actually use the new forms—consumers, lenders, mortgage brokers, settlement agents—in helping to combine and improve them. After several rounds of qualitative testing, we found that users were able to see the difference between prices on their Loan Estimate to those quoted on the Closing Disclosure and they were able to identify costs they could shop for, among other findings.
                                     </p>
                                     <p>To be sure that the Loan Estimate and the Closing Disclosure are easier to use and understand than the existing forms, we tested them in a quantitative validation study. Participants provided more correct answers about a sample mortgage using the new forms than they did using the previous forms.</p>
                                     <ul class="m-list m-list__links">
-                                        <li class="m-list_item">
-                                            <a class="m-list_link" href="/know-before-you-owe/compare/">
+                                        <li class="m-list__item">
+                                            <a class="m-list__link" href="/know-before-you-owe/compare/">
                                             Review testing results
                                             </a>
                                         </li>
@@ -359,8 +359,8 @@ <h3>How we created new disclosures</h3>
     </div>
     <div class="block block__border-top block__padded-top">
         <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <h2>Timeline</h2>
                 <p>
                     <a class="styled-link" href="/know-before-you-owe/timeline/">
@@ -371,77 +371,77 @@ <h2>Timeline</h2>
             </div>
         </div>
     </div>
-    <section class="u-layout-grid_breakout kbyo-footer">
+    <section class="u-layout-grid__breakout kbyo-footer">
         <div class="wrapper wrapper__match-content">
             <div class="content-l">
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Reports
                     </h2>
                 </header>
                 <ul class="m-list m-list__links">
-                <li class="m-list_item">
-                    <a class="a-m-list_link" href="/reports/leveraging-technology-to-empower-mortgage-consumers-at-closing/">
-                    <span class="a-link_text">Leveraging technology to empower mortgage consumers at closing</span>
+                <li class="m-list__item">
+                    <a class="a-m-list__link" href="/reports/leveraging-technology-to-empower-mortgage-consumers-at-closing/">
+                    <span class="a-link__text">Leveraging technology to empower mortgage consumers at closing</span>
                     </a>
                 </li>
-                <li class="m-list_item">
-                    <a class="m-list_link" href="/reports/consumers-mortgage-shopping-experience/">
-                    <span class="a-link_text">Consumers’ mortgage shopping experience</span>
+                <li class="m-list__item">
+                    <a class="m-list__link" href="/reports/consumers-mortgage-shopping-experience/">
+                    <span class="a-link__text">Consumers’ mortgage shopping experience</span>
                     </a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-sbrefa-feedback.pdf">
-                        <span class="a-link_text">A report on our discussions with small businesses</span>
+                        <span class="a-link__text">A report on our discussions with small businesses</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
-                <li class="m-list_item">
-                    <a class="m-list_link" href="/know-before-you-owe/compare/">
-                    <span class="a-link_text">Learn more about the research we did to develop the new forms</span>
+                <li class="m-list__item">
+                    <a class="m-list__link" href="/know-before-you-owe/compare/">
+                    <span class="a-link__text">Learn more about the research we did to develop the new forms</span>
                     </a>
                 </li>
                 </ul>
             </div><!-- /.kbyo-footer__col -->
 
-            <div class="content-l_col
-                        content-l_col-1-2">
+            <div class="content-l__col
+                        content-l__col-1-2">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Related links
                     </h2>
                 </header>
                 <ul class="m-list m-list__links">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_kbyo_loan-estimate_blank.pdf">
-                        <span class="a-link_text">Download a blank Loan Estimate form</span>
+                        <span class="a-link__text">Download a blank Loan Estimate form</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-link
                             a-link__icon
-                            m-list_link"
+                            m-list__link"
                         href="https://files.consumerfinance.gov/f/201311_cfpb_kbyo_closing-disclosure_blank.pdf">
-                        <span class="a-link_text">Download a blank Closing Disclosure form</span>
+                        <span class="a-link__text">Download a blank Closing Disclosure form</span>
                         {{ svg_icon('download') }}
                     </a>
                 </li>
                 </ul>
             </div><!-- /.kbyo-footer__col -->
-            <div class="content-l_col
-                        content-l_col-1-2
+            <div class="content-l__col
+                        content-l__col-1-2
                         u-mt45">
                 <header class="m-slug-header">
-                    <h2 class="m-slug-header_heading">
+                    <h2 class="m-slug-header__heading">
                         Legal disclaimer
                     </h2>
                 </header>
diff --git a/cfgov/jinja2/know-before-you-owe/timeline/index.html b/cfgov/jinja2/know-before-you-owe/timeline/index.html
index 40bc2d3d5fb..6c451038ee4 100644
--- a/cfgov/jinja2/know-before-you-owe/timeline/index.html
+++ b/cfgov/jinja2/know-before-you-owe/timeline/index.html
@@ -18,7 +18,7 @@
 <link rel="stylesheet" href="{{ static('apps/know-before-you-owe/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <article class="kbyo-timeline-page">
         <div class="block block__flush-top">
             <h1>Timeline</h1>
@@ -40,7 +40,7 @@ <h2>The Dodd-Frank Wall Street Reform and Consumer Protection Act is signed into
                  <a class="a-link
                            a-link__icon"
                     href="https://www.gpo.gov/fdsys/pkg/BILLS-111hr4173enr/pdf/BILLS-111hr4173enr.pdf">
-                    <span class="a-link_text">new law</span>
+                    <span class="a-link__text">new law</span>
                     {{ svg_icon('download') }}
                 </a> required the CFPB to combine the Truth in Lending and Real Estate Settlement Procedures Act disclosures.
             </p>
@@ -78,14 +78,14 @@ <h3 class="h5">Disclosures tested:</h3>
                  <a class="a-link
                            a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round1-Ficus-ANL.pdf">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round1-Pecan-ANL.pdf">
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -101,14 +101,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201106_cfpb_mortgage-disclosure-prototype-Round2-Dogwood.pdf">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201106_cfpb_mortgage-disclosure-prototype-Round2-Redbud.pdf" class="icon-link icon-link__download">
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -124,14 +124,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201108_cfpb_mortgage-disclosure-prototype-Round3-Camellia.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201108_cfpb_mortgage-disclosure-prototype-Round3-Azalea.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -147,14 +147,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201109_cfpb_mortgage-disclosure-prototype-Round4-Jasmine.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201109_cfpb_mortgage-disclosure-prototype-Round4-Nandina.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -170,14 +170,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201110_cfpb_mortgage-disclosure-prototype-Round5-Yucca.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201110_cfpb_mortgage-disclosure-prototype-Round5-Pinyon.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -193,14 +193,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201111_cfpb_mortgage-disclosure-prototype-Round6-Hornbeam-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201105_cfpb_mortgage-disclosure-prototype-Round6-Ironwood-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -216,14 +216,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201112_cfpb_mortgage-disclosure-prototype-Round7-Mimosa.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201112_cfpb_mortgage-disclosure-prototype-Round7-Sassafras.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -239,21 +239,21 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Honeylocust-LE.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Hemlock-CD.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201201_cfpb_mortgage-disclosure-prototype-Round8-Butternut-CD.pdf" >
-                    <span class="a-link_text">Prototype C</span>
+                    <span class="a-link__text">Prototype C</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -269,14 +269,14 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201202_cfpb_mortgage-disclosure-prototype-Round9-Basswood-CD.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201202_cfpb_mortgage-disclosure-prototype-Round9-Tupelo_LE.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -297,7 +297,7 @@ <h2>We meet with small businesses.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_report_tila-respa-sbrefa-feedback.pdf" >
-                    <span class="a-link_text">This feedback is summarized in the panel’s report.</span>
+                    <span class="a-link__text">This feedback is summarized in the panel’s report.</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
@@ -315,21 +315,21 @@ <h3 class="h5">Disclosures tested:</h3>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-Ficus-LE.pdf" >
-                    <span class="a-link_text">Prototype A</span>
+                    <span class="a-link__text">Prototype A</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-OptionA-CD.pdf" >
-                    <span class="a-link_text">Prototype B</span>
+                    <span class="a-link__text">Prototype B</span>
                     {{ svg_icon('download') }}
                 </a>
                 <br>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201203_cfpb_mortgage-disclosure-prototype-Round10-OptionB-CD.pdf" >
-                    <span class="a-link_text">Prototype C</span>
+                    <span class="a-link__text">Prototype C</span>
                     {{ svg_icon('download') }}
                 </a>
             </p>
@@ -343,7 +343,7 @@ <h2>Proposal of the new rule.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201207_cfpb_proposed-rule_integrated-mortgage-disclosures.pdf" >
-                    <span class="a-link_text">The CFPB released a Notice of Proposed Rulemaking.</span>
+                    <span class="a-link__text">The CFPB released a Notice of Proposed Rulemaking.</span>
                     {{ svg_icon('download') }}
                 </a> The notice proposed a new rule to implement the combined mortgage disclosures and requested your comments on the proposal.
             </p>
@@ -373,7 +373,7 @@ <h2>Validating our testing</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_study_tila-respa_disclosure-comparison.pdf">
-                    <span class="a-link_text">a quantitative study of the new forms</span>
+                    <span class="a-link__text">a quantitative study of the new forms</span>
                     {{ svg_icon('download') }}
                 </a> with 858 consumers in 20 locations across the country. By nearly every measure, the study showed that the new forms offer a statistically significant improvement over the existing forms.
             </p>
@@ -387,7 +387,7 @@ <h2>Additional testing with modified disclosures</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201311_cfpb_report_tila-respa_testing-spanish-refinancing.pdf">
-                    <span class="a-link_text">The modified disclosures tested well</span>
+                    <span class="a-link__text">The modified disclosures tested well</span>
                     {{ svg_icon('download') }}
                 </a> and are the ones included in the final rule.
             </p>
@@ -419,7 +419,7 @@ <h2>A guide to forms is published for mortgage professionals.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://files.consumerfinance.gov/f/201503_cfpb_tila-respa-integrated-disclosure-guide-to-the-loan-estimate-and-closing.pdf">
-                    <span class="a-link_text">Guide to Forms</span>
+                    <span class="a-link__text">Guide to Forms</span>
                     {{ svg_icon('download') }}
                 </a> to assist mortgage professionals in understanding the new rule, the forms, and how to use the forms.
             </p>
@@ -442,7 +442,7 @@ <h2>Owning a Home debuts.</h2>
                 <a class="a-link
                           a-link__icon"
                     href="https://www.consumerfinance.gov/owning-a-home/resources/checklist_mortgage_closing.pdf">
-                    <span class="a-link_text">closing checklist</span>
+                    <span class="a-link__text">closing checklist</span>
                     {{ svg_icon('download') }}
                 </a> and
                 <a href="/owning-a-home/loan-options/">loan options guide</a>.
@@ -473,7 +473,7 @@ <h2>Amendments to the rule are issued.</h2>
             <h2>Your Home Loan Toolkit, an informative guide to the mortgage process, is released.</h2>
             <p>This resource guides homebuyers through the mortgage process step-by-step with checklists, conversation starters, and worksheets. <a class="a-link a-link__icon"
                     href="https://files.consumerfinance.gov/f/201503_cfpb_your-home-loan-toolkit-web.pdf">
-                    <span class="a-link_text">The toolkit, available online</span> {{ svg_icon('download') }}</a>, is designed to replace the Settlement Cost Booklet for most mortgage loan transactions. Lenders are required to give potential borrowers a copy of the booklet within three business days after they apply for a home purchase mortgage loan.</p>
+                    <span class="a-link__text">The toolkit, available online</span> {{ svg_icon('download') }}</a>, is designed to replace the Settlement Cost Booklet for most mortgage loan transactions. Lenders are required to give potential borrowers a copy of the booklet within three business days after they apply for a home purchase mortgage loan.</p>
         </div>
         <div class="block block__border-top block__padded-top">
             <p>
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
index be173a708ba..bb89778ddff 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-footer.html
@@ -22,7 +22,7 @@
    ========================================================================== #}
 
 {% macro render( links=[] ) %}
-<footer aria-label="Buying a House footer" class="u-layout-grid_breakout brand-footer">
+<footer aria-label="Buying a House footer" class="u-layout-grid__breakout brand-footer">
     <div class="brand-footer_wrapper">
         <h3 class="brand-footer_heading">
             {{ svg_icon('house') }}
diff --git a/cfgov/jinja2/owning-a-home/_templates/brand-header.html b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
index d587b6c8129..a23021b86fd 100644
--- a/cfgov/jinja2/owning-a-home/_templates/brand-header.html
+++ b/cfgov/jinja2/owning-a-home/_templates/brand-header.html
@@ -1,5 +1,5 @@
 <header aria-label="Buying a House header" class="brand-header">
-  <div class="content_wrapper">
+  <div class="content__wrapper">
     <div class="brand-header__1-2-container brand-header__1-2-container-with-icon">
       <div class="brand-header__headline">
         <span class="brand-header__icon" aria-hidden="true">{{ svg_icon('house') }}</span>
diff --git a/cfgov/jinja2/owning-a-home/_templates/no_js.html b/cfgov/jinja2/owning-a-home/_templates/no_js.html
index 03b23308a63..84404ba9892 100644
--- a/cfgov/jinja2/owning-a-home/_templates/no_js.html
+++ b/cfgov/jinja2/owning-a-home/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message">
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/jinja2/owning-a-home/explore-rates/index.html b/cfgov/jinja2/owning-a-home/explore-rates/index.html
index fd9eaa92e0f..dd6d97a6fec 100644
--- a/cfgov/jinja2/owning-a-home/explore-rates/index.html
+++ b/cfgov/jinja2/owning-a-home/explore-rates/index.html
@@ -27,14 +27,14 @@
           href="{{ static('apps/owning-a-home/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
 
         {% include "_templates/no_js.html" %}
 
         <div class="rate-checker">
             <section class="page-intro content-l">
-                <div class="content-l_col content-l_col-2-3">
+                <div class="content-l__col content-l__col-2-3">
                     <h1>Explore interest rates</h1>
                     <p class="lead">Use this tool throughout your homebuying process to explore the range of mortgage interest rates you can expect to receive.  See how your credit score, loan type, home price, and down payment amount can affect your rate.   Knowing your options and what to expect helps ensure that you get a mortgage that is right for you.  Check back often -- the rates in the tool are updated every Wednesday and Friday.</p>
                     <div class="page-intro_cols">
@@ -54,14 +54,14 @@ <h1>Explore interest rates</h1>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-3">
+                <div class="content-l__col content-l__col-1-3">
                     <div class="rc-illu-inner">
                         <img class ="rc-home-illu"
                                 src="{{ static('apps/owning-a-home/img/ill-chart.png') }}"
                                 alt="Illustration of interest rate chart">
                     </div>
                 </div>
-                <!-- /.content-l_col-1-3 -->
+                <!-- /.content-l__col-1-3 -->
             </section>
             <div class="calculator content-l" aria-controls="rate-results">
                 <section class="form-intro">
@@ -94,7 +94,7 @@ <h4>Explore rate options</h4>
                                 role="alert">
                             <div class="a-form-alert a-form-alert__error">
                                 {{ svg_icon('warning-round') }}
-                                <span class="a-form-alert_text">
+                                <span class="a-form-alert__text">
                                     Many lenders do not accept
                                     borrowers with credit scores less than 620.
                                     Even if your score is low, you may still have options.
@@ -227,7 +227,7 @@ <h4>Explore rate options</h4>
                             role="alert">
                         <div class="a-form-alert a-form-alert__warning">
                             {{ svg_icon('warning-round') }}
-                            <span class="a-form-alert_text">
+                            <span class="a-form-alert__text">
                                 Your down payment cannot be more than your
                                 house price.
                             </span>
@@ -238,7 +238,7 @@ <h4>Explore rate options</h4>
                             id="county-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text"></span>
+                        <span class="a-form-alert__text"></span>
                     </div>
                 </section>
                 <section class="calc-loan-details">
@@ -293,7 +293,7 @@ <h4>Explore rate options</h4>
                 <section class="form-sub warning u-hidden" id="arm-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text">
+                        <span class="a-form-alert__text">
                             While some lenders may offer FHA, VA, or 15-year adjustable-rate mortgages, they are rare. We don’t have enough data to display results for these combinations. Choose a fixed rate if you’d like to try these options.
                         </span>
                     </div>
@@ -301,7 +301,7 @@ <h4>Explore rate options</h4>
                 <section class="form-sub warning u-hidden" id="hb-warning">
                     <div class="a-form-alert a-form-alert__warning">
                         {{ svg_icon('warning-round') }}
-                        <span class="a-form-alert_text"></span>
+                        <span class="a-form-alert__text"></span>
                     </div>
                 </section>
                 <section class="form-sub calc-subsection">
@@ -359,9 +359,9 @@ <h3>Data table</h3>
                                 m-notification__error"
                             role="alert">
                         {{ svg_icon('error-round') }}
-                        <div class="m-notification_content">
-                            <div class="h4 m-notification_message">We're sorry!</div>
-                            <p class="m-notification_explanation">
+                        <div class="m-notification__content">
+                            <div class="h4 m-notification__message">We're sorry!</div>
+                            <p class="m-notification__explanation">
                                 Based on the information you entered,
                                 we don't have enough data to display results.
                                 Change your settings or
@@ -378,9 +378,9 @@ <h3>Data table</h3>
                                 m-notification__error"
                             role="alert">
                         {{ svg_icon('error-round') }}
-                        <div class="m-notification_content">
-                            <div class="h4 m-notification_message">We're sorry!</div>
-                            <p class="m-notification_explanation">
+                        <div class="m-notification__content">
+                            <div class="h4 m-notification__message">We're sorry!</div>
+                            <p class="m-notification__explanation">
                                 <strong>We're sorry!</strong>
                                 We're having trouble connecting to our data.<br>
                                 Try again another time.
@@ -509,7 +509,7 @@ <h4 class="next-steps-heading">Watch your spending.</h4>
                                     href="/ask-cfpb/what-is-a-credit-score-en-315/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn more about credit scores</span>
+                                    <span class="a-link__text">Learn more about credit scores</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -524,7 +524,7 @@ <h4 class="next-steps-heading">Improve your credit scores.</h4>
                                     href="/ask-cfpb/how-do-i-get-and-keep-a-good-credit-score-en-318/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn about improving your credit scores</span>
+                                    <span class="a-link__text">Learn about improving your credit scores</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -539,7 +539,7 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                                     href="/ask-cfpb/what-kind-of-down-payment-do-i-need-how-does-the-amount-of-down-payment-i-make-affect-the-terms-of-my-mortgage-loan-en-120/"
                                     target="_blank"
                                     rel="noopener noreferrer">
-                                    <span class="a-link_text">Learn more about down payments</span>
+                                    <span class="a-link__text">Learn more about down payments</span>
                                     {{ svg_icon('right') }}
                                 </a>
                             </p>
@@ -560,9 +560,9 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                             m-notification__visible"
                         role="alert">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Check your credit</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Check your credit</div>
+                        <p class="m-notification__explanation">
                             If you haven’t checked your credit report recently,
                             <a class="external-link"
                                 href="https://annualcreditreport.com"
@@ -577,7 +577,7 @@ <h4 class="next-steps-heading">Save for a larger down payment.</h4>
                 </div>
             </div>
             <section id="about" class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <h3 class="subhead">About our data source for this tool</h3>
                     <p>The lenders in our data include a mix of large banks, regional banks, and credit unions. The data is updated semiweekly every Wednesday and Friday at 7 a.m. In the event of a holiday, data will be refreshed on the next available business day.</p>
                     <p>The data is provided by <a href="https://curinos.com/" target="_blank" rel="noopener noreferrer">Curinos</a>, New York, NY. Curinos collects the data directly from lenders and every effort is made to collect the most accurate data possible, but they cannot guarantee the data’s accuracy.</p>
diff --git a/cfgov/jinja2/rural-or-underserved/_templates/expandable.html b/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
index 9f586fcc340..23c715d17ff 100644
--- a/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
+++ b/cfgov/jinja2/rural-or-underserved/_templates/expandable.html
@@ -17,21 +17,21 @@
 
 {% macro render( heading, content ) %}
 <div class="o-expandable">
-    <button class="o-expandable_header"
+    <button class="o-expandable__header"
             title="Expand content">
-        <h3 class="h4 o-expandable_label">
+        <h3 class="h4 o-expandable__label">
             {{ heading|safe }}
         </h3>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
         <p>
             {{ content|safe }}
         </p>
diff --git a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
index 03b23308a63..84404ba9892 100644
--- a/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
+++ b/cfgov/jinja2/rural-or-underserved/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message">
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/jinja2/rural-or-underserved/index.html b/cfgov/jinja2/rural-or-underserved/index.html
index f0190fcbbab..35cecf7b2b0 100644
--- a/cfgov/jinja2/rural-or-underserved/index.html
+++ b/cfgov/jinja2/rural-or-underserved/index.html
@@ -29,22 +29,22 @@
 {% block pre_content -%}{% endblock %}
 
 
-{% block content_intro -%}
+{% block content__intro -%}
     <div class="wrapper">
 
         {% include "_templates/no_js.html" %}
 
-        <section class="content_intro">
+        <section class="content__intro">
 
             <div class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <h5 class="report-date print-only"></h5>
                     <h1>Rural and underserved areas tool</h1>
                 </div>
             </div>
 
             <div class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     {# Display errors here. #}
                     <div id="file-error"
                          class="block
@@ -56,11 +56,11 @@ <h1>Rural and underserved areas tool</h1>
                                     m-notification__visible
                                     m-notification__error">
                             {{ svg_icon('error-round') }}
-                            <div class="m-notification_content">
-                                <div class="h4 m-notification_message">
+                            <div class="m-notification__content">
+                                <div class="h4 m-notification__message">
                                     Formatting error
                                 </div>
-                                <div class="m-notification_explanation">
+                                <div class="m-notification__explanation">
                                     <strong>We've noticed the following errors:</strong>
                                     <div id="file-error-desc"></div>
                                 </div>
@@ -77,11 +77,11 @@ <h1>Rural and underserved areas tool</h1>
                                     m-notification__visible
                                     m-notification__error">
                             {{ svg_icon('error-round') }}
-                            <div class="m-notification_content">
-                                <div class="h4 m-notification_message">
+                            <div class="m-notification__content">
+                                <div class="h4 m-notification__message">
                                     Processing error
                                 </div>
-                                <div class="m-notification_explanation">
+                                <div class="m-notification__explanation">
                                     <p>
                                         <strong>The following addresses were not processed because the server was temporarily unavailable. To try again, start a new search.</strong>
                                     </p>
@@ -94,7 +94,7 @@ <h1>Rural and underserved areas tool</h1>
             </div>
 
             <div id="search-tool" class="content-l">
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
 
                     <h2>
                         Check status of properties for loans extended in
@@ -116,7 +116,7 @@ <h2>
                     </h2>
                 </div>
 
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="block block__border block__bg block__sub">
                         <h4>Enter addresses manually</h4>
                         <form id="geocode">
@@ -154,7 +154,7 @@ <h4>Enter addresses manually</h4>
                         </form>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="block block__border block__bg block__sub">
                         <h4>Upload a CSV file</h4>
                         <form id="geocode-csv">
@@ -197,7 +197,7 @@ <h4>Upload a CSV file</h4>
                     </div>
                 </div>
 
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <p>
                         Do not include personal information, such as names, phone numbers, and Social Security numbers.
                         The CFPB will not retain any information submitted through this tool.
@@ -208,7 +208,7 @@ <h4>Upload a CSV file</h4>
 
             <!-- results -->
             <section id="results" class="content-l u-hidden">
-                <div class="full-print content-l_col content-l_col-3-4">
+                <div class="full-print content-l__col content-l__col-3-4">
                     <h2 id="countMessage">
                         <span id="spinner">
                             {{ svg_icon('updating') }}
@@ -218,14 +218,14 @@ <h2 id="countMessage">
                         <strong class="chosenYear"></strong> rural or underserved area safe harbor designation.
                     </h2>
                 </div>
-                <p class="hide-print content-l_col content-l_col-1-4">
+                <p class="hide-print content-l__col content-l__col-1-4">
                     <a class="a-btn a-btn__secondary" href="/rural-or-underserved-tool/">
                         Start a new search
                     </a>
                 </p>
 
                 <div id="results-total" class="u-hidden block block__sub">
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="ruralCnt no-decoration counter no-decoration" href="#rural">
@@ -237,7 +237,7 @@ <h4>
                             <span class="ruralVerb verb">are</span> designated as rural or underserved
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="notRuralCnt no-decoration counter no-decoration" href="#notRural">
@@ -249,7 +249,7 @@ <h4>
                             <span class="notRuralVerb verb">are</span> <strong>not</strong> designated as rural or underserved
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="notFoundCnt no-decoration counter no-decoration" href="#notFound">
@@ -261,7 +261,7 @@ <h4>
                             could not be identified
                         </h4>
                     </div>
-                    <div class="content-l_col content-l_col-1-4">
+                    <div class="content-l__col content-l__col-1-4">
                         <h1>
                             <strong>
                                 <a class="duplicateCnt no-decoration counter no-decoration" href="#duplicate">
@@ -275,18 +275,18 @@ <h4>
                     </div>
                 </div>
 
-                <p class="content-l_col content-l_col-1">
+                <p class="content-l__col content-l__col-1">
                     <a class="margin-right-quarter" href="#" id="print" title="Print results">Print results</a>
                     |
                     <a class="download-link margin-left-quarter" href="#" id="download" title="Download results"><span>Download results</span></a>
                 </p>
 
                 {# Not a paragraph so that it is full-width. #}
-                <div class="content-l_col content-l_col-1">
+                <div class="content-l__col content-l__col-1">
                     <em>If you are having problems with the download, please review the <a href="#faq-general-questions">“General questions” in the FAQ</a>.</em>
                 </div>
 
-                <div class="content-l_col content-l_col-1">
+                <div 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
@@ -433,11 +433,11 @@ <h2 class="js-table-title">
 
     </div>
 
-    <div class="content_line"></div>
+    <div class="content__line"></div>
 
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="group sans border-top-2">
         <!-- about this tool -->
         <div id="about">
@@ -490,21 +490,21 @@ <h3>Questions on the tool</h3>
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="h4 o-expandable_label">
+                            <h3 class="h4 o-expandable__label">
                                 How should I format the addresses that I upload to the tool?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 The tool provides a sample comma separated values (CSV) file to help you determine how to format the addresses for upload in the multiple address search tool.  For best results, the street address, city, state and ZIP Code should be included in the batch upload file or address entry.  The addresses within this CSV file should follow the rules set forth in Section 2, “Postal Addressing Standards” of the United States Postal Service Publication 28 - Postal Addressing Standards (<a href="https://pe.usps.com/text/pub28/welcome.htm" title="Publication 28,">https://pe.usps.com/text/pub28/welcome.htm</a>).  Per <a href="https://pe.usps.com/text/pub28/28c2_001.htm" title="Publication 28, Sub-Section 21">Publication 28, Sub-Section 21</a>, a complete property address consists of the “Delivery Address Line” and the “Last Line.”  “Delivery Address Line,” in the example below and in the tool CSV file format, consists of the “Street address” while the “Last Line,” in the example below and in the tool CSV file format, consists of three fields, “City”, “State” and “ZIP”.
                             </p>
@@ -712,21 +712,21 @@ <h3 class="h4 o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="h4 o-expandable_label">
+                            <h3 class="h4 o-expandable__label">
                                 How do I resolve the addresses that could not be identified?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 You should check to see if the address was mistyped, some information was missing in the address entered, or the address is too new for the tool to return a definite result.  First, verify the address is correct.  If it is correct, try the Census Bureau’s automated address search tool, use the rural or underserved counties lists, or check the form of the address on the United States Postal Service site (<a href="https://tools.usps.com/go/ZipLookupAction_input" title="United States Postal Service site">https://tools.usps.com/go/ZipLookupAction_input</a>).  For instance, the address 6009 JFK Blvd East, West New York, NJ 07093 cannot be located by the tool.  When the address is entered into the usps.com site, the proper address is given, 6009 Kennedy Blvd E, West New York, NJ 07093-3740, and the address can now be identified in the tool.
                             </p>
@@ -788,21 +788,21 @@ <h3 id="faq-general-questions">General questions</h3>
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="h4 o-expandable_label">
+                            <h3 class="h4 o-expandable__label">
                                 What is CSV?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 A comma-separated values (CSV) file derives its name from a file containing multiple data fields separated by commas to distinguish where each field starts and ends.  Files are stored in plain text as numbers and letters with one record per line.
                             </p>
@@ -820,23 +820,23 @@ <h3 class="h4 o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="h4 o-expandable_label">
+                            <h3 class="h4 o-expandable__label">
                                 My downloaded file is not opening in the
                                 correct format in Excel.
                                 How do I fix the format?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 If you used the ‘Download results’ link in Windows in either Chrome or Firefox and the file extension is not recognized on your computer, you will need to add a CSV extension to the end of the file in Windows Explorer before the file will launch in the correct format.
                             </p>
@@ -876,22 +876,22 @@ <h3 class="h4 o-expandable_label">
                         template due to the markup in the content area.
                     #}
                     <div class="o-expandable">
-                        <button class="o-expandable_header"
+                        <button class="o-expandable__header"
                                 title="Expand content">
-                            <h3 class="h4 o-expandable_label">
+                            <h3 class="h4 o-expandable__label">
                                 My question is not answered here.
                                 Where can I find more information?
                             </h3>
-                            <span class="o-expandable_cues">
-                                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                            <span class="o-expandable__cues">
+                                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                                     {{ svg_icon('minus-round') }}
                                 </span>
                             </span>
                         </button>
-                        <div class="o-expandable_content">
+                        <div class="o-expandable__content">
                             <p>
                                 Information about this automated tool and other safe
                                 harbor tools is provided by the Bureau’s regulation
@@ -909,11 +909,11 @@ <h3 class="h4 o-expandable_label">
     </div>
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     <div class="block block__flush-top">
         <div class="m-reusable-text-snippet">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Related information
                 </h2>
             </header>
@@ -932,24 +932,24 @@ <h2 class="m-slug-header_heading">
     <div class="block">
         <div class="m-related-links">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Related links
                 </h2>
             </header>
             <ul class="m-list m-list__links">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/rules-policy/regulations/1026/" title="Truth in Lending Act (Regulation Z)">Truth in Lending Act (Regulation Z)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/ability-repay-qualified-mortgage-rule/" title="Ability to repay and qualified mortgages (ATR/QM)">Ability to repay and qualified mortgages (ATR/QM)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/high-cost-mortgages/" title="High cost mortgages (HOEPA)">High cost mortgages (HOEPA)</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/higher-priced-mortgage-loan-escrow-rule/" title="Rules governing escrows for higher priced mortgages">Rules governing escrows for higher priced mortgages</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/compliance/compliance-resources/mortgage-resources/rural-and-underserved-counties-list/" title="Rural or Underserved Counties List">Rural or Underserved Counties List</a>
                 </li>
             </ul>
diff --git a/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html b/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
index 89461fe0afa..43183073f88 100644
--- a/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
+++ b/cfgov/jinja2/transcripts/how-to-apply-for-a-federal-job-with-the-cfpb/index.html
@@ -8,7 +8,7 @@
     Transcript for the video "How to Apply For a Federal Job with the CFPB."
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
 <article class="block block__flush-top">
     <h1>How to Apply For a Federal Job with the CFPB</h1>
     <p>
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
index fffb2fac7ab..00082811f93 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_list.html
@@ -25,11 +25,11 @@
     <h3>Current openings</h3>
     <ul class="m-list m-list__unstyled m-list__links">
         {% for job in value.jobs %}
-        <li class="m-list_item">
-            <a class="m-list_link"
+        <li class="m-list__item">
+            <a class="m-list__link"
                href="{{ job.url }}">
                   {{ job.title }}
-                <span class="m-list_link-subtext">
+                <span class="m-list__link-subtext">
                     Closing
                     {% import 'v1/includes/macros/time.html' as time %}
                     {{ time.render(job.close_date, {'date': true}, text_format=True) }}
diff --git a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
index 47788f935f6..44aecd78a5e 100644
--- a/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
+++ b/cfgov/jobmanager/jinja2/jobmanager/job_listing_page.html
@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="{{ static('css/on-demand/job_listing_page.css') }}">
 {%- endblock css %}
 
-{% block content_main %}
+{% block content__main %}
 
     {% set usajobs_links = page.usajobs_application_links.all() %}
 
@@ -34,7 +34,7 @@
 
         <div class="o-summary o-summary__mobile">
             <div id="job-description-expandable"
-                 class="o-summary_content">
+                 class="o-summary__content">
                 <h4>Summary</h4>
                 {{ page.description | safe }}
                 {% if page.responsibilities %}
@@ -70,7 +70,7 @@ <h4>Position type</h4>
                 {% endif %}
             </div>
 
-            <button class="o-summary_btn u-hidden">
+            <button class="o-summary__btn u-hidden">
                 Read full description
                 {{ svg_icon('plus-round') }}
             </button>
@@ -85,21 +85,21 @@ <h4>Position type</h4>
         <h2 id="interested">What to know if you apply</h2>
         <div class="block block__sub">
             <div class="content-l">
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="u-flexible-container">
-                        <iframe class="u-flexible-container_inner"
+                        <iframe class="u-flexible-container__inner"
                                 src="https://www.youtube.com/embed/XCbZnTIeTOY"
                                 frameborder="0"
                                 allowfullscreen>
                         </iframe>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <p>Put simply, federal hiring rules prioritize fairness. Our video and resources explain how the application process works, important parts to pay attention to, and what to expect after you apply.</p>
                     <a class="a-link
                               a-link__jump"
                         href="/about-us/careers/application-process/">
-                        <span class="a-link_text">Learn about the job application process</span>
+                        <span class="a-link__text">Learn about the job application process</span>
                     </a>
                 </div>
             </div>
@@ -113,8 +113,8 @@ <h2 id="interested">Apply for this position</h2>
         <div class="block block__sub">
             <div class="content-l">
                 {% for usajobs_link in usajobs_links %}
-                    <div class="content-l_col
-                                {{ 'content-l_col-1-2' if usajobs_links|length > 1 else 'content-l_col-1'}}">
+                    <div class="content-l__col
+                                {{ 'content-l__col-1-2' if usajobs_links|length > 1 else 'content-l__col-1'}}">
                         {% set applicant_type = usajobs_link.applicant_type %}
                         <h4>{{ applicant_type.display_title if applicant_type.display_title else applicant_type }}</h4>
                         <p>{{ applicant_type.description }}</p>
@@ -138,7 +138,7 @@ <h4>{{ email_link.label }}</h4>
 
 {% endblock %}
 
-{% block content_sidebar scoped %}
+{% block content__sidebar scoped %}
 
     {% if about_us %}
         <div class="block block__flush-top">
@@ -148,19 +148,19 @@ <h4>{{ email_link.label }}</h4>
 
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Working at the CFPB
             </h2>
         </header>
 
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a href="/about-us/careers/working-at-cfpb" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/careers/working-at-cfpb" class="m-list__link">
                     Working at the CFPB
                 </a>
             </li>
-            <li class="m-list_item">
-                <a href="/office-civil-rights/" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/office-civil-rights/" class="m-list__link">
                     Office of Civil Rights
                 </a>
             </li>
@@ -174,18 +174,18 @@ <h2 class="m-slug-header_heading">
     </div>
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Learn more about the CFPB's work
             </h2>
         </header>
         <ul class="m-list m-list__links u-mb0">
-            <li class="m-list_item">
-                <a href="/about-us/blog" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/blog" class="m-list__link">
                     CFPB Blog
                 </a>
             </li>
-            <li class="m-list_item">
-                <a href="/about-us/newsroom" class="m-list_link">
+            <li class="m-list__item">
+                <a href="/about-us/newsroom" class="m-list__link">
                     Newsroom
                 </a>
             </li>
@@ -193,7 +193,7 @@ <h2 class="m-slug-header_heading">
     </div>
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Follow us on LinkedIn
             </h2>
         </header>
diff --git a/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html b/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
index 4a76bda4b57..16dca79c81c 100644
--- a/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
+++ b/cfgov/mega_menu/jinja2/mega_menu/mega-menu.html
@@ -179,7 +179,7 @@
                             <a class="{{ _content_classes( nav_depth, '-link' ) }}"
                                 href="{{ link.url }}">
                                 {{ svg_icon('favorite') }}
-                                <span><span class="a-link_text">{{ link.text }}</span></span>
+                                <span><span class="a-link__text">{{ link.text }}</span></span>
                             </a>
                         </li>
                         {% endfor %}
@@ -203,7 +203,7 @@
                                       {{- ' ' ~ _content_classes( nav_depth, '-link__current' ) if link.selected else '' -}}"
                             href="{{ link.url }}">
                                 {{ svg_icon( link.icon ) }}
-                                <span class="a-link_text">{{ link.text }}</span>
+                                <span class="a-link__text">{{ link.text }}</span>
                             </a>
                         </li>
                         {% endfor %}
diff --git a/cfgov/mega_menu/jinja2/mega_menu/preview.html b/cfgov/mega_menu/jinja2/mega_menu/preview.html
index 28984573637..2a13598a72a 100644
--- a/cfgov/mega_menu/jinja2/mega_menu/preview.html
+++ b/cfgov/mega_menu/jinja2/mega_menu/preview.html
@@ -1,6 +1,6 @@
 {% extends "v1/layouts/layout-full.html" %}
 
-{% block content_main %}
+{% block content__main %}
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem at
 viverra venenatis. Nunc est velit, rhoncus vitae efficitur quis, volutpat ut
@@ -57,4 +57,4 @@
 eleifend risus quis finibus. Sed aliquam ullamcorper ipsum non fermentum.
 Vivamus malesuada orci et neque laoreet, id pretium odio dignissim.
 </p>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html b/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
index 03b23308a63..84404ba9892 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message">
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message">
             This tool is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
index 9b4fb127dfb..86ac4d5395e 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html
@@ -1,14 +1,14 @@
 <div class="college-costs_intro-segment">
     {% if return_user %}
-        <div class="content_wrapper">
-            <div class="content_main">
+        <div class="content__wrapper">
+            <div class="content__main">
                 {% include "_templates/no_js.html" %}
                 <div class="m-notification
                             m-notification__visible
                             u-js-only">
                     {{ svg_icon('updating') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">The page is loading…</div>
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">The page is loading…</div>
                     </div>
                 </div>
             </div>
@@ -19,8 +19,8 @@
                 {% include_block block %}
             {% endif %}
         {%- endfor %}
-        <div class="content_wrapper">
-            <div class="content_main">
+        <div class="content__wrapper">
+            <div class="content__main">
                {% for block in page.header -%}
                     {% if block.block_type != 'hero' %}
                         {{ render_block.render(block, loop.index) }}
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
index e5677e0ad85..0da864d0634 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/01-school-search.html
@@ -14,7 +14,7 @@ <h2 tabindex="-1">School & living situation</h2>
         </p>
         <div class="a-form-alert a-form-alert__error" data-state-based-visibility="school-required" role="alert">
           {{ svg_icon('warning-round') }}
-          <span class="a-form-alert_text">
+          <span class="a-form-alert__text">
               Please enter the school you are considering.
           </span>
         </div>
@@ -35,7 +35,7 @@ <h3 class="h4">Select your program type</h3>
             ) }}
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="type-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select your program type.
               </span>
             </div>
@@ -95,7 +95,7 @@ <h3 class="h4">Select your program</h3>
           <h3 class="h4">How much progress have you made towards this degree, excluding credits from AP/IB exams?</h3>
           <div class="a-form-alert a-form-alert__error" data-state-based-visibility="progress-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select how much progress you have made towards this degree.
               </span>
           </div>
@@ -155,7 +155,7 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
             </div>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="length-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select your program length.
               </span>
             </div>
@@ -213,7 +213,7 @@ <h3 class="h4" data-state-based-visibility="is_first_year-true">How long do you
             <h3 class="h4">Which tuition rate will apply to you?</h3>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="rate-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select which tuition rate will apply to you.
               </span>
             </div>
@@ -240,7 +240,7 @@ <h3 class="h4">Which tuition rate will apply to you?</h3>
             <h3 class="h4">Where do you plan to live while in school?</h3>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="housing-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select where you plan to live while in school.
               </span>
             </div>
@@ -275,7 +275,7 @@ <h3 class="h4">Are you considered a dependent or independent student?</h3>
             <p><a href="https://studentaid.gov/help/view-sar" target="_blank" rel="noreferrer noopener">Check your Student Aid Report (SAR)</a> if you’re not sure.</p>
             <div class="a-form-alert a-form-alert__error" data-state-based-visibility="dependency-required" role="alert">
               {{ svg_icon('warning-round') }}
-              <span class="a-form-alert_text">
+              <span class="a-form-alert__text">
                   Please select whether you are considered a dependent or independent student.
               </span>
             </div>
@@ -305,13 +305,13 @@ <h3 class="h4">Are you considered a dependent or independent student?</h3>
             'Form is incomplete',
             'Please make selections for the following fields on this page:
             <ul class="m-list m-list__links">
-            <div data-state-based-visibility="school-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_what-school" data-gtm_ignore="true">What school are you considering?</a></li></div>
-            <div data-state-based-visibility="type-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-type" data-gtm_ignore="true">Select your program type</a></li></div>
-            <div data-state-based-visibility="length-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-length" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
-            <div data-state-based-visibility="progress-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-progress" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
-            <div data-state-based-visibility="rate-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-rate" data-gtm_ignore="true">Which tuition rate will apply to you?</a></li></div>
-            <div data-state-based-visibility="housing-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-housing" data-gtm_ignore="true">Where do you plan to live while in school?</a></li></div>
-            <div data-state-based-visibility="dependency-required"><li class="m-list_item"><a class="a-link m-list_link" href="#school-search_program-dependency" data-gtm_ignore="true">Are you considered a dependent or independent student?</a></li></div>
+            <div data-state-based-visibility="school-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_what-school" data-gtm_ignore="true">What school are you considering?</a></li></div>
+            <div data-state-based-visibility="type-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-type" data-gtm_ignore="true">Select your program type</a></li></div>
+            <div data-state-based-visibility="length-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-length" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
+            <div data-state-based-visibility="progress-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-progress" data-gtm_ignore="true">How long do you expect your program to take?</a></li></div>
+            <div data-state-based-visibility="rate-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-rate" data-gtm_ignore="true">Which tuition rate will apply to you?</a></li></div>
+            <div data-state-based-visibility="housing-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-housing" data-gtm_ignore="true">Where do you plan to live while in school?</a></li></div>
+            <div data-state-based-visibility="dependency-required"><li class="m-list__item"><a class="a-link m-list__link" href="#school-search_program-dependency" data-gtm_ignore="true">Are you considered a dependent or independent student?</a></li></div>
             </ul>' | safe
         ) }}
     </div>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
index 53c2d2bd297..238a8c196e1 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/13-school-results.html
@@ -19,7 +19,7 @@ <h2 tabindex="-1">Compare this school to others like it</h2>
 
         <h3 class="u-border-bottom"><span data-school-item="school">Example University</span></h3>
         <div class="content-l">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <div class="school-fact">
                     <strong>Location:</strong>
                     <span data-school-item="city">City</span>, <span data-school-item="state">State</span>
@@ -33,7 +33,7 @@ <h3 class="u-border-bottom"><span data-school-item="school">Example University</
                     <span data-school-item="enrollment">1</span>
                 </div>
             </div>
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <div>
                     <strong>Highest degree offered:</strong>
                     <span data-school-item="highestDegree">degree</span>
@@ -64,7 +64,7 @@ <h4>Graduation rate</h4>
                     <div class="big-percentile"><span data-school-item="rateGraduation" data-number-display="percentage"></span></div>
                     <div><span data-school-item="school"></span>'s graduation rate is <strong><span data-school-item="rateGraduation" data-number-display="percentage"></span></strong>. If you are going to school to earn more money, you need to complete your degree to get that payoff.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other <span class="community-college">2</span><span class="four-year-college">4</span> year schools that are also:
                     </legend>
@@ -107,7 +107,7 @@ <h4>Transfer to graduation rate</h4>
                     <div class="big-percentile"><span data-school-item="??"></span></div>
                     <div><span data-school-item="school"></span>'s transfer to graduation rate is <strong><span data-school-item="" data-number-display="percentage"></span></strong>. If you are going to school to earn more money, you need to complete your degree to get that payoff.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other 2 year schools that are also:
                     </legend>
@@ -150,7 +150,7 @@ <h4>Loan repayment rate</h4>
                     <div class="big-percentile"><span data-school-item="repay3yr" data-number-display="percentage"></span></div>
                     <div><span data-school-item="school"></span>'s repayment rate is <strong><span data-school-item="repay3yr" data-number-display="percentage"></span></strong>. This tells you how many student borrowers have earned enough money to start paying down their debt.</div>
                 </div>
-                <fieldset class="o-form_fieldset school-results_cohort-buttons">
+                <fieldset class="o-form__fieldset school-results_cohort-buttons">
                     <legend>
                         Compare <span data-school-item="school"></span>'s rate to other <span class="community-college">2</span><span class="four-year-college">4</span> year schools that are also:
                     </legend>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html
index 5f3afe0add7..df4fc85e390 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
@@ -9,7 +9,7 @@ <h2 tabindex="-1">Review your plan and projected outcomes</h2>
                       a-link__icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
-                <span class="a-link_text">Print</span>
+                <span class="a-link__text">Print</span>
             </a>
         </p>
         <div data-state-based-visibility="none">
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
index 102e04ae6b4..9d7e5765738 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/16-save-and-finish.html
@@ -1,17 +1,17 @@
 <section class="college-costs_tool-section college-costs_tool-section__finish" data-tool-section="save-and-finish">
     <h2 tabindex="-1">Great job!</h2>
     <div class="m-info-unit m-info-unit__inline u-mb30">
-        <div class="m-info-unit_image m-info-unit_image__square" style="background-image: url( {{ static('apps/paying-for-college/img/finish-page.png') }} );">
+        <div class="m-info-unit__image m-info-unit__image__square" style="background-image: url( {{ static('apps/paying-for-college/img/finish-page.png') }} );">
         </div>
-        <div class="m-info-unit_content">
+        <div class="m-info-unit__content">
             <p>You've made a plan to cover your school costs and graduate with as little debt as possible, and learned about the impact of loans on your future.</p>
             <p>Copy and save this link so that you can come back and review your plan. We won't store this information.</p>
         </div>
     </div>
     {% include 'copy-link-form.html' %}
-    <div class="o-form_group">
+    <div class="o-form__group">
         <div class="block block__mid">
-            <fieldset class="o-form_fieldset" data-impact="impactOffer">
+            <fieldset class="o-form__fieldset" data-impact="impactOffer">
                 <legend>
                     <h3>Did this tool help you understand your financial aid offer?</h3>
                 </legend>
@@ -46,8 +46,8 @@ <h3>Did this tool help you understand your financial aid offer?</h3>
         </div>
         <div class="block block__mid">
 
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset" data-impact="impactLoans">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset" data-impact="impactLoans">
                     <legend>
                         <h3>Did this tool help you understand the potential impact of student loans?</h3>
                     </legend>
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
index e9c87e3a7f5..4399c0ae753 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/copy-link-form.html
@@ -1,4 +1,4 @@
-<div class="o-form_group">
+<div class="o-form__group">
     <div class="m-form-field">
         <label class="a-label a-label__heading" for="finish_link">
             Your link
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
index 13e68c571da..164d50ce582 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/macros/secondary-nav.html
@@ -15,43 +15,43 @@
 {% macro render( nav_items ) %}
 <nav class="o-secondary-nav"
      aria-label="Section navigation">
-    <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-        <span class="o-secondary-nav_label">
+    <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+        <span class="o-secondary-nav__label">
             {{ _('Navigate this section') }}
         </span>
-        <span class="o-secondary-nav_cues">
-            <span class="o-secondary-nav_cue-open" aria-label="Show">
+        <span class="o-secondary-nav__cues">
+            <span class="o-secondary-nav__cue-open" aria-label="Show">
                 {{ svg_icon('down') }}
             </span>
-            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                 {{ svg_icon('up') }}
             </span>
         </span>
     </button>
 
-    <div class="o-secondary-nav_content">
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents" role="tablist">
+    <div class="o-secondary-nav__content">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents" role="tablist">
         {%- for item in nav_items %}
             {# TODO: refactor JS to rid of custom `o-secondary-nav_li__parent` #}
-            <li class="o-secondary-nav_list-item__parent"
+            <li class="o-secondary-nav__list-item__parent"
                 data-nav-is-active="{{item.current if item.current else 'False'}}"
                 data-nav-is-open="False"
                 role="tab">
-                <a class="o-secondary-nav_link
-                          o-secondary-nav_link__parent"
+                <a class="o-secondary-nav__link
+                          o-secondary-nav__link__parent"
                     href="#"
                     data-gtm_ignore="true"
                     data-nav_section="{{ item.data }}">
                     {{ item.title }}
                 </a>
             {%- if item.children -%}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children"
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children"
                     role="tablist">
                 {%- for child in item.children -%}
                     <li role="tab">
-                        <a class="o-secondary-nav_link"
+                        <a class="o-secondary-nav__link"
                            href="#"
                            data-gtm_ignore="true"
                            data-nav_item="{{ child.data }}">
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
index be6c9ca4b95..b7b179164b7 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/nav.html
@@ -1,6 +1,6 @@
 {% import 'college-cost-blocks/macros/secondary-nav.html' as secondary_nav with context %}
 
-<aside class="content_sidebar
+<aside class="content__sidebar
               content__flush-top-on-small
               content__flush-sides-on-small
               content__half-top-on-desk
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-costs.html
index 8f5ded3846d..3306bfa7f79 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
@@ -18,9 +18,9 @@
           id="main"> <!-- content__hide-horizontal-overflow removed for position sticky to work-->
         {%- include 'college-cost-blocks/0-intro.html' -%}
         <div class="college-costs_app-segment content content__1-3 block block__flush-top">
-            <div class="content_wrapper">
+            <div class="content__wrapper">
                 {%- include 'college-cost-blocks/nav.html' -%}
-                <div class="content_main
+                <div class="content__main
                             content__flush-top-on-small
                             content__half-top-on-desk
                             content__flush-bottom">
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 0fc6dcb43a1..de621b89d69 100644
--- a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
+++ b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
@@ -14,35 +14,35 @@
 <main id="main" data-context="{{url_root}}">
     <div id="financial-offer" class="understanding-financial-aid-offer">
         <section class="m-hero">
-            <div class="m-hero_wrapper wrapper">
-                <div class="m-hero_text">
-                    <h1 class="m-hero_heading">
+            <div class="m-hero__wrapper wrapper">
+                <div class="m-hero__text">
+                    <h1 class="m-hero__heading">
                         Understanding your financial aid offer
                     </h1>
-                    <p class="m-hero_subhead">
+                    <p class="m-hero__subhead">
                         This personalized summary will help you evaluate your
                         financial aid offer from your school to see how
                         student debt may impact your future finances. </p>
                 </div>
-                <div class="m-hero_image-wrapper">
-                  <div class="m-hero_image"></div>
+                <div class="m-hero__image-wrapper">
+                  <div class="m-hero__image"></div>
                 </div>
             </div>
         </section>
-        <div class="content_line"></div>
-        <section class="verify step content_wrapper">
-            <div class="content_main">
+        <div class="content__line"></div>
+        <section class="verify step content__wrapper">
+            <div class="content__main">
 
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noSchool">
                     {{ svg_icon('error-round') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the school ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right school ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -51,13 +51,13 @@ <h1 class="m-hero_heading">
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noProgram">
                    {{ svg_icon('error-round') }}
-                   <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                   <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the program ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right program ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -65,13 +65,13 @@ <h1 class="m-hero_heading">
                 <div class="m-notification m-notification__error verify_content"
                      data-missing-data-error="noOffer">
                     {{ svg_icon('error-round') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation"></p>
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation"></p>
                             The information your school provided is missing the offer ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right offer ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation"></p>
+                        <p class="m-notification__explanation"></p>
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -196,12 +196,12 @@ <h2 class="verify_prompt">
                         </form>
                     </div>
                 </div>
-                <div class="content_line"></div>
+                <div class="content__line"></div>
             </div>
         </section>
         <section id="info-right" class="information-right" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__right">
@@ -246,11 +246,11 @@ <h2 class="instructions_about-heading">
                             </div>
                         </div>
                     </div>
-                    <div class="content_line"></div>
+                    <div class="content__line"></div>
                 </div>
             </section>
-            <section class="review step content_wrapper" data-section="review">
-                <div class="content_main">
+            <section class="review step content__wrapper" data-section="review">
+                <div class="content__main">
                     <div class="review_wrapper">
                         <div class="review_intro">
                             <h2 class="step_heading">
@@ -390,7 +390,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -564,7 +564,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -620,7 +620,7 @@ <h4 class="aid-form_summary-heading">
                                         </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -818,7 +818,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="workstudy"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -869,7 +869,7 @@ <h4 class="aid-form_summary-heading">
                                         </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -959,7 +959,7 @@ <h3 class="offer-part_heading">
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="perkins"></div>
+                                    <div class="content__line loans_line" data-section="perkins"></div>
                                     <div class="form-group_item"
                                     data-section="subsidized">
                                         <div class="aid-form_label-wrapper">
@@ -1011,7 +1011,7 @@ <h3 class="offer-part_heading">
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line"
+                                    <div class="content__line loans_line"
                                     data-section="subsidized"></div>
                                     <div class="form-group_item"
                                     data-section="unsubsidized">
@@ -1065,7 +1065,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div data-section="gradPlus">
-                                      <div class="content_line loans_line"></div>
+                                      <div class="content__line loans_line"></div>
                                       <div class="form-group_item">
                                           <div class="aid-form_label-wrapper">
                                               <label class="form-label"
@@ -1114,7 +1114,7 @@ <h3 class="offer-part_heading">
                                     </div>
                                     <div class="aid-form_inline-subtotal"
                                     data-section="federalLoans">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1480,7 +1480,7 @@ <h3 class="offer-part_heading">
                                         </button>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1577,7 +1577,7 @@ <h3 class="offer-part_heading">
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="tuitionpaymentplan">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1655,7 +1655,7 @@ <h4 class="aid-form_summary-heading">
                                     </span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1724,7 +1724,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="summaryLoanTotal"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1853,7 +1853,7 @@ <h4 class="aid-form_summary-heading">
                                         data-financial="summaryLoanTotal"></span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1950,8 +1950,8 @@ <h4 class="aid-form_summary-heading">
                 </div>
             </section>
             <section class="continue step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="continue_wrapper">
                             <div class="continue_content">
                                 <h2 class="step_heading">
@@ -1979,9 +1979,9 @@ <h2 class="step_heading">
                     </div>
                 </div>
             </section>
-            <section class="evaluate step content_wrapper"
+            <section class="evaluate step content__wrapper"
             data-section="evaluate">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="evaluate_wrapper">
                         <div class="evaluate_intro">
                             <h2 class="step_heading">
@@ -2792,7 +2792,7 @@ <h4 class="aid-form_title">
                                     </div>
                                 </form>
                                 <div class="aid-form_summary">
-                                    <div class="content_line
+                                    <div class="content__line
                                     aid-form_equals-line"></div>
                                     <div class="line-item line-item__total">
                                         <div class="line-item_title">
@@ -2935,8 +2935,8 @@ <h4 class="metric_heading">
                 </div>
             </section>
             <section class="question step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="question_wrapper">
                             <div class="question_content">
                                 <h2 class="step_heading step_settlement">
@@ -2985,9 +2985,9 @@ <h2 class="step_heading step_nonsettlement">
                     </div>
                 </div>
             </section>
-            <section class="get-options step content_wrapper
+            <section class="get-options step content__wrapper
             column-well_wrapper">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="get-options_wrapper">
                         <div class="get-options_intro followup__no-not-sure">
                             <h2 class="step_heading">
@@ -3138,7 +3138,7 @@ <h3 class="option_heading">
                         <aside class="get-options__sidebar
                                       column-well
                                       column-well__emphasis
-                                      content_sidebar">
+                                      content__sidebar">
                             <div class="column-well_content">
                                 <h3 class="option__take-action-header">
                                     What you can do
@@ -3205,9 +3205,9 @@ <h4>
                     </div>
                 </div>
             </section>
-            <section class="next-steps step content_wrapper">
-                <div class="content_main">
-                    <div class="content_line"></div>
+            <section class="next-steps step content__wrapper">
+                <div class="content__main">
+                    <div class="content__line"></div>
                     <div class="next-steps_wrapper">
                         <div class="next-steps_intro">
                             <h2 class="step_heading">
@@ -3256,7 +3256,7 @@ <h2 class="step_heading">
                                 <button class="a-btn a-btn__full-on-xs"
                                 type="button"
                                 data-gtm_ignore="true">
-                                    <span class="a-btn_icon__on-left">
+                                    <span class="a-btn__icon--on-left">
                                         {{ svg_icon('print') }}
                                     </span>
                                     Print
@@ -3268,8 +3268,8 @@ <h2 class="step_heading">
             </section>
         </section>
         <section id="info-wrong" class="information-wrong" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__wrong">
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure_technote.html
index 2b21e1302f8..927620cf06c 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
@@ -4,7 +4,7 @@
     Understanding your financial aid offer | Consumer Financial Protection Bureau
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <section class="block block__flush-top">
         <h1>
             About the &ldquo;Understanding Your Financial
@@ -16,16 +16,16 @@ <h1>
             includes:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Where the data comes from
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Explanations of the calculations
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Definitions of financial aid terms
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Links to resources to learn more about
                 related topics
             </li>
@@ -76,41 +76,41 @@ <h2 id="assumptions">
             students:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Total cost of attendance, including tuition and
                 fees, remains the same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Total amount of scholarships and grants remains the
                 same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Amount you can contribute remains the same each year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan amounts and interest rates remain the same each
                 year (since changes in interest rates are difficult
                 to predict, we assume they will stay the same while
                 you are in school)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility for your federal, private, and
                 school-provided loans remain the same, and if your
                 parents are borrowing a PLUS loan their eligibility
                 remains the same.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will successfully complete your program on time
                 (based on the length of time you selected at the
                 beginning of the tool)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will repay your loan under the standard, 10-year
                 repayment plan, unless you appear to meet the
                 eligibility rules for the 25-year extended repayment
                 plan and you select the longer repayment option.
                 <ul class="m-list">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         The 25-year extended repayment plan is
                         available for borrowers who owe at least
                         $30,000 in Direct student loans at the time
@@ -119,12 +119,12 @@ <h2 id="assumptions">
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 You will begin repayment after you graduate, and the
                 allotted grace period expires (between 6-9 months
                 after graduating, depending on the type of loan)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For the purposes of calculating interest and
                 repayments, we assume student loans are fully
                 disbursed (meaning the funds are sent to the school)
@@ -132,7 +132,7 @@ <h2 id="assumptions">
                 typically they are disbursed over the course of
                 different academic terms.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility requirements or types of federal aid
                 available to you do not change while you are
                 attending school
@@ -189,14 +189,14 @@ <h3>
             withdraw from school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Mainly for undergraduates who have not previously
                 earned a degree
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ pellCap }} per academic
                 year
             </li>
@@ -213,11 +213,11 @@ <h3>
             school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For active-duty or reserve servicemembers who are
                 pursuing higher education
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ militaryAssistanceCap }} per
                 academic year depending on your service
             </li>
@@ -234,10 +234,10 @@ <h3>
             school and owe a refund).
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For servicemembers and veterans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Benefits include funds to cover tuition and fees, a
                 monthly living allowance, and an annual book stipend
             </li>
@@ -316,32 +316,32 @@ <h4>
             will not see this as an option under federal loans.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ perkinsUnderCap }} per
                 academic year for undergraduates
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ perkinsGradCap }} for graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ perkinsRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts nine months after you leave school
                 or drop below half time (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest doesn’t start accruing until you leave
                 school and your grace period ends
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 No fee to take out loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Due to limited funds for this type of loan, not
                 everyone who qualifies for this program will receive
                 one
@@ -352,37 +352,37 @@ <h4>
             also known as a Direct Subsidized Loan.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Awarded based on financial need to undergraduate
                 students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ subsidizedCapYearOne }}
                 per academic year for the first year
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 The maximum amount you can borrow per year increases
                 every year you are in school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ subsidizedRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 The Department of Education pays any interest
                 accruing on your loans while you are in school
                 (attending at least half-time) and during your grace
                 period
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ DLOriginationFee }} of the
                 total loan amount
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Graduate students are not eligible
             </li>
         </ul>
@@ -391,39 +391,39 @@ <h4>
             loan also known as a Direct Unsubsidized Loan.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For all students, regardless of financial need
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapYearOne }} for the
                 first year in school for dependent undergraduates
                 <ul>
-                    <li class="m-list_item__spaced">
+                    <li class="m-list__item__spaced">
                         Increases as you progress through school, up
                         to {{ unsubsidizedCapYearThree }}
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapIndepYearOne }}
                 for the first year for independent undergraduate
                 students (students who are not required to provide
                 parental information when applying for federal
                 financial aid)
                 <ul class="m-list">
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         Increases as you progress through school, up
                         to {{ unsubsidizedCapIndepYearThree }}
                     </li>
                 </ul>
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Up to {{ unsubsidizedCapGrad }} for
                 graduate or professional students – higher annual
                 limits apply to students pursuing degrees in the
                 health professions.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 If you take out both subsidized and unsubsidized
                 loans the subsidized loans count toward the
                 unsubsidized loan cap. For example, if you are a
@@ -431,24 +431,24 @@ <h4>
                 loans you would only be eligible for $2,000 in
                 unsubsidized loans your first year.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ unsubsidizedRateUndergrad }} interest rate
                 for undergraduates fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ unsubsidizedRateGrad }} interest rate
                 for graduate or professional students fixed
                 for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest starts accruing while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (grace period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ DLOriginationFee }} of the
                 total loan amount
             </li>
@@ -460,37 +460,37 @@ <h4>
             loan option.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For all graduate and professional students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Available to those who need to borrow more than the
                 maximum unsubsidized loan amounts to cover the cost
                 of attendance
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Eligibility is based on the borrower’s credit
                 history, but the credit check does not look at the
                 borrower’s credit score or income
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Can borrow up to the program’s cost of attendance,
                 minus any other financial assistance received ,
                 including other federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 {{ gradPlusRate }} interest rate
                 fixed for the life of the loan
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest starts accruing while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment starts six months after you leave school
                 (deferment period)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Loan fee of {{ plusOriginationFee }} of the
                 total loan amount
             </li>
@@ -517,35 +517,35 @@ <h3>
             vary, and private loans are not always available.
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For undergraduate or graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Requires credit check
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Borrowers may need to apply with cosigner to meet
                 credit standards or qualify for a lower interest
                 rate
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually carry higher interest rates than federal
                 loans; many private loan products charge variable
                 rates that change over the life of the loan, unlike
                 federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest generally starts accruing while you are
                 still in school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment typically starts after you leave school,
                 and most lenders currently offer a six-month grace
                 period. Some private loans programs require
                 borrowers to start making monthly payments during
                 school or right after graduation.
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually do not offer the flexible repayment options
                 that are available for federal student loans
             </li>
@@ -563,28 +563,28 @@ <h3>
             installment contract.&rdquo;
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 For undergraduate or graduate students
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 May require credit check and/or a cosigner to
                 qualify
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually carry higher interest rates than federal
                 loans; many private loan products charge variable
                 rates that change over the life of the loan, unlike
                 federal loans
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Interest doesn’t start accruing until you leave
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Repayment likely starts while you are still in
                 school
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Usually do not offer the flexible repayment options
                 available for federal student loans
             </li>
@@ -808,33 +808,33 @@ <h3>
             Categories of BLS CE data:
         </p>
         <ul class="m-list">
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Housing (includes utilities, cell phone bills, and
                 house repairs)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Food
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Clothing (apparel and services)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Transportation
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Healthcare (includes health insurance and
                 prescriptions)
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Entertainment spending
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Pension and Social Security
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Taxes
             </li>
-            <li class="m-list_item">
+            <li class="m-list__item">
                 Other (cash contributions, alcohol, tobacco,
                 personal care products and services, reading,
                 education, and miscellaneous expenses)
@@ -993,7 +993,7 @@ <h2>
     </section>
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     <div class="block block__flush-top">
         <h2>
             Useful resources for new college students
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
index b154f450d7d..e3ecda64735 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/detail.html
@@ -22,13 +22,13 @@
     {{ self.desc() }}
 {%- endblock og_desc %}
 
-{% block content_main %}
+{% block content__main %}
 
 <div class="content prepaid-agreements prepaid-agreements-detail">
     {% set default_text = 'No information provided' %}
     <h1>{{ product.name }}</h1>
     <div class="content-l">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <dl>
                     <dt><h2>Issuer name</h2></dt>
                     <dd>{{ product.issuer_name }}</dd>
@@ -36,7 +36,7 @@ <h1>{{ product.name }}</h1>
                     <dd>{{ product.prepaid_type if product.prepaid_type else default_text }}</dd>
                 </dl>
             </div>
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <dl>
                     <dt><h2>Program manager</h2></dt>
                     <dd>{{ product.program_manager if product.program_manager else default_text }}</dd>
@@ -51,15 +51,15 @@ <h1>{{ product.name }}</h1>
                 {% if product.other_relevant_parties %}
                     {% if product.other_relevant_parties | length > 500 %}
                         <div class="o-summary-minimal">
-                            <div class="o-summary-minimal_content">
+                            <div class="o-summary-minimal__content">
                                 {{ product.other_relevant_parties | replace('\n', '; ') }}
                             </div>
-                            <button class="o-summary-minimal_btn">
-                                <span class="o-summary-minimal_cue-open">
+                            <button class="o-summary-minimal__btn">
+                                <span class="o-summary-minimal__cue-open">
                                     Show full list of relevant parties
                                     {{ svg_icon('plus-round') }}
                                 </span>
-                                <span class="o-summary-minimal_cue-close">
+                                <span class="o-summary-minimal__cue-close">
                                     Hide full list of relevant parties
                                     {{ svg_icon('minus-round') }}
                                 </span>
@@ -111,11 +111,11 @@ <h2 class="h3">Download older agreements</h2>
 
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {% if support_text %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 {{ support_text.sidefoot_heading | safe }}
             </h2>
             </header>
@@ -126,7 +126,7 @@ <h2 class="m-slug-header_heading">
     {% if disclaimer_text %}
         <div class="block">
             <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 {{ disclaimer_text.sidefoot_heading | safe }}
             </h2>
             </header>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
index d4166722f3c..2f2a91f01ff 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/index.html
@@ -23,11 +23,11 @@
 
 {# BODY items #}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     content__1-3 prepaid-agreements prepaid-agreements-search
 {%- endblock %}
 
-{% block content_main scoped %}
+{% block content__main scoped %}
     <div class="search_form">
         <div class="block block__sub search_intro">
             <h1>Prepaid product agreements database</h1>
@@ -67,7 +67,7 @@ <h3 class="h4 u-mb5">Search within</h3>
                     <div class="flex-all">
                         <div class="m-btn-inside-input input-contains-label">
                             <label for="searchText"
-                                   class="input-contains-label_before input-contains-label_before__search"
+                                   class="input-contains-label__before input-contains-label__before__search"
                                    aria-hidden="true">
                                 {{ svg_icon('search') }}
                             </label>
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
index daea23a6fce..efee05d6b29 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_result_item.html
@@ -5,7 +5,7 @@ <h4 class="h3">
         <a href="{{ result.get_absolute_url() }}">{{ result.name }}</a>
     </h4>
     <div class="content-l">
-        <div class="content-l_col content-l_col-1-2">
+        <div class="content-l__col content-l__col-1-2">
             <dl>
                 <dt>Issuer name</dt>
                 <dd>{{ result.issuer_name }}</dd>
@@ -19,7 +19,7 @@ <h4 class="h3">
                 <dd>{{ result.status if result.status else default_text }}</dd>
             </dl>
         </div>
-        <div class="content-l_col content-l_col-1-2">
+        <div class="content-l__col content-l__col-1-2">
             <h5 class="h4 u-mb5">Download most recent agreement files</h5>
             {% set latest_agreement = result.most_recent_agreement %}
             <p class="u-break-word">
diff --git a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
index a5a934b3855..0444957f75d 100644
--- a/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
+++ b/cfgov/prepaid_agreements/jinja2/prepaid_agreements/search_results.html
@@ -5,7 +5,7 @@
 {% import 'v1/includes/molecules/pagination.html' as pagination with context %}
 {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
 
-<aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+<aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
     <h3>Narrow results by...</h3>
 
     <form method="get" action="." class="o-form ">
@@ -41,8 +41,8 @@ <h3>Narrow results by...</h3>
                 'is_midtone': true
             } %}
             {% call() expandable(expandable_settings) %}
-             <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+             <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         {% for type in active_filters['prepaid_type'] %}
                             {% if type != None %}
@@ -72,8 +72,8 @@ <h3>Narrow results by...</h3>
             } %}
             {% call() expandable(expandable_settings) %}
 
-             <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+             <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         {% for option in active_filters['status'] %}
                         <li>
@@ -96,7 +96,7 @@ <h3>Narrow results by...</h3>
     </form>
 </aside>
 
-<div class="content_main content__flush-all-on-small content__flush-bottom">
+<div class="content__main content__flush-all-on-small content__flush-bottom">
     <div class="results_header">
         {% if current_count and current_count > 0  %}
             <div class="results_count">
diff --git a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
index 779edd61c1f..3de932e44b2 100644
--- a/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
+++ b/cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
@@ -19,7 +19,7 @@
     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.
 {%- endblock %}
 
-{% block content_main -%}
+{% block content__main -%}
 {{ styles.render() }}
   {#
     Display any error messages created during form submission.
@@ -47,22 +47,22 @@ <h1>Consent for disclosure of records protected under the Privacy Act</h1>
         </div>
         <h2 class="h4">This form may be used if you are:</h2>
         <ul class="m-list">
-            <li class="m-list_item">Providing consent and authorizing the CFPB to disclose your records to another person or entity</li>
-            <li class="m-list_item">A parent consenting to and authorizing the disclosure of the records of a minor</li>
-            <li class="m-list_item">A legal guardian consenting to and authorizing disclosure of the records of an incompetent</li>
+            <li class="m-list__item">Providing consent and authorizing the CFPB to disclose your records to another person or entity</li>
+            <li class="m-list__item">A parent consenting to and authorizing the disclosure of the records of a minor</li>
+            <li class="m-list__item">A legal guardian consenting to and authorizing disclosure of the records of an incompetent</li>
         </ul>
         <p>If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
         <h2>Information used for identity-proofing and authentication</h2>
         <p>Please provide the following information to assist the CFPB in verifying your identity:</p>
         <h2 class="h4">Required</h2>
         <ul class="m-list">
-            <li class="m-list_item">Full name</li>
-            <li class="m-list_item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
+            <li class="m-list__item">Full name</li>
+            <li class="m-list__item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
         </ul>
         <h2 class="h4">Optional</h2>
         <ul class="m-list">
-            <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-            <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+            <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+            <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
         </ul>
         <h3>For requests by parent or legal guardian</h3>
         <p>If you are the parent consenting to and authorizing disclosure of the records of a minor or the legal guardian consenting to and authorizing disclosure of the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request. If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
@@ -77,7 +77,7 @@ <h2>Information required to locate the records</h2>
               enctype="multipart/form-data"
               method="POST">
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.description.id_for_label }}">
@@ -88,32 +88,32 @@ <h2>Information required to locate the records</h2>
                 </div>
                 <h3>Additional information that might assist in locating the records</h3>
                 <p>This enables the CFPB to locate the system of records containing the record(s) with a reasonable amount of effort.</p>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.system_of_record.id_for_label }}">
-                            {{ form.system_of_record.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.system_of_record.label }} <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.system_of_record }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.date_of_records.id_for_label }}">
-                            {{ form.date_of_records.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.date_of_records.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-		        <p class="a-label_helper">{{ form.date_of_records.help_text }}</p>
+		        <p class="a-label__helper">{{ form.date_of_records.help_text }}</p>
                         {{ form.date_of_records }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.other_info.id_for_label }}">
-                            {{ form.other_info.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.other_info.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-                        <p class="a-label_helper">{{ form.other_info.help_text }}</p>
+                        <p class="a-label__helper">{{ form.other_info.help_text }}</p>
                         {{ form.other_info }}
                     </div>
                 </div>
@@ -123,7 +123,7 @@ <h2>Contact information</h2>
             <p>Please provide your contact information so that we can correspond with you regarding the request.</p>
             <div class="o-well">
                 <h3>Requestor contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_name.id_for_label }}">
@@ -132,7 +132,7 @@ <h3>Requestor contact information</h3>
                         {{ form.requestor_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_email.id_for_label }}">
@@ -145,7 +145,7 @@ <h3>Requestor contact information</h3>
                     </div>
                 </div>
                 <h3 class="u-mt45">Recepient contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.recipient_name.id_for_label }}">
@@ -154,7 +154,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                         {{ form.recipient_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.recipient_email.id_for_label }}">
@@ -168,11 +168,11 @@ <h3 class="u-mt45">Recepient contact information</h3>
                 </div>
 
                   {% for error in form.street_address.errors %}
-		    <div class="o-form_group">
+		    <div class="o-form__group">
                       {{- notification.render( 'error', true, error ) }}
 		    </div>
                   {% endfor %}
-                <div id="mail-radio" class="o-form_group">
+                <div id="mail-radio" class="o-form__group">
                   {% if form.is_bound %}
                     {% set selected = form.contact_channel.value() %}
                   {% else %}
@@ -188,7 +188,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                 </div>
                 <div id="mail-target">
                   <p>If you would like to receive your records by mail, please provide your mailing address.</p>
-                  <div class="o-form_group">
+                  <div class="o-form__group">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.street_address.id_for_label }}">
@@ -197,7 +197,7 @@ <h3 class="u-mt45">Recepient contact information</h3>
                           {{ form.street_address }}
                       </div>
                   </div>
-                  <div class="o-form_group m-form-grid">
+                  <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.city.id_for_label }}">
@@ -226,12 +226,12 @@ <h3 class="u-mt45">Recepient contact information</h3>
             <h2>Supporting documentation (optional)</h2>
             <p class="u-mb15">Identity verification documents:</p>
             <ul class="m-list">
-                <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-                <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+                <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+                <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
             </ul>
             <p>If you are the parent consenting to and authorizing disclosure of the records of a minor or the legal guardian consenting to and authorizing disclosure of the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request.</p>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                   {% for error in form.supporting_documentation.errors %}
                       {{- notification.render( 'error', true, error ) }}
                   {% endfor %}
@@ -258,7 +258,7 @@ <h4>Files added:</h4>
 
             <h2>Consent for disclosure of records</h2>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field m-form-field__checkbox">
                         {{ form.consent }}
                         <label class="a-label"
@@ -267,7 +267,7 @@ <h2>Consent for disclosure of records</h2>
                         </label>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.full_name.id_for_label }}">
@@ -279,11 +279,11 @@ <h2>Consent for disclosure of records</h2>
             </div>
 
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <button id="submit-button" class="a-btn">
                         Submit
-                        <span id="submit-icon" class="a-btn_icon a-btn_icon__on-right">
+                        <span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
@@ -299,7 +299,7 @@ <h2>Consent for disclosure of records</h2>
     </div>
 {%- endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
 
diff --git a/cfgov/privacy/jinja2/privacy/form-submitted.html b/cfgov/privacy/jinja2/privacy/form-submitted.html
index abb97049454..5ea634b8233 100644
--- a/cfgov/privacy/jinja2/privacy/form-submitted.html
+++ b/cfgov/privacy/jinja2/privacy/form-submitted.html
@@ -17,15 +17,15 @@
     Your privacy request has been submitted | Consumer Financial Protection Bureau
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <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="h4 m-notification_message">
+            <div class="m-notification__content">
+                <div class="h4 m-notification__message">
                     Request submitted
                 </div>
-                <p class="m-notification_explanation">
+                <p class="m-notification__explanation">
                     Your request has been submitted to the CFPB FOIA office.
                     If you have any questions or want to follow up on your request, email
                     <a class="a-btn a-btn__link href="mailto:FOIA@consumerfinance.gov">FOIA@consumerfinance.gov</a>
@@ -35,6 +35,6 @@
     </div>
 {% endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
diff --git a/cfgov/privacy/jinja2/privacy/privacy-styles.html b/cfgov/privacy/jinja2/privacy/privacy-styles.html
index 5ede664b46e..3e8a44c673e 100644
--- a/cfgov/privacy/jinja2/privacy/privacy-styles.html
+++ b/cfgov/privacy/jinja2/privacy/privacy-styles.html
@@ -3,7 +3,7 @@
     .lead-paragraph {
       margin-bottom: 1.363636em;
     }
-    .a-label_helper {
+    .a-label__helper {
       font-size: 16px;
     }
     .m-form-grid {
@@ -47,7 +47,7 @@
       margin-bottom: 45px !important;
       padding-bottom: 15px;
     }
-    .o-well > .a-label_helper {
+    .o-well > .a-label__helper {
       margin-bottom: 20px;
     }
     #privacy-form > p {
diff --git a/cfgov/privacy/jinja2/privacy/records-access-form.html b/cfgov/privacy/jinja2/privacy/records-access-form.html
index b1957f59de3..db9f5936c02 100644
--- a/cfgov/privacy/jinja2/privacy/records-access-form.html
+++ b/cfgov/privacy/jinja2/privacy/records-access-form.html
@@ -19,7 +19,7 @@
     This form may be used to seek access to your records pursuant to the Privacy Act. Please provide the information requested below and submit.
 {%- endblock %}
 
-{% block content_main -%}
+{% block content__main -%}
     {{ styles.render() }}
     {#
       Display any error messages created during form submission.
@@ -47,22 +47,22 @@ <h1>Request for individual access to records protected under the Privacy Act</h1
         </div>
         <h2 class="h4">This form may be used if you are:</h2>
         <ul class="m-list">
-            <li class="m-list_item">Seeking access to your records pursuant to the Privacy Act</li>
-            <li class="m-list_item">A parent seeking access to the records of a minor</li>
-            <li class="m-list_item">A legal guardian seeking access to the records of an incompetent</li>
+            <li class="m-list__item">Seeking access to your records pursuant to the Privacy Act</li>
+            <li class="m-list__item">A parent seeking access to the records of a minor</li>
+            <li class="m-list__item">A legal guardian seeking access to the records of an incompetent</li>
         </ul>
         <p>If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
         <h2>Information used for identity-proofing and authentication</h2>
         <p>Please provide the following information to assist the CFPB in verifying your identity:</p>
         <h2 class="h4">Required</h2>
         <ul class="m-list">
-            <li class="m-list_item">Full name</li>
-            <li class="m-list_item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
+            <li class="m-list__item">Full name</li>
+            <li class="m-list__item">Electronically signed statement (at the bottom of this form) that affirms your identity and the fact that you understand penalties associated with requesting information under false pretenses</li>
         </ul>
         <h2 class="h4">Optional</h2>
         <ul class="m-list">
-            <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-            <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+            <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+            <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
         </ul>
         <h3>For requests by parent or legal guardian</h3>
         <p>If you are a parent seeking access to the records of a minor or a legal guardian seeking access to the records of an incompetent, you will be required to provide adequate proof of your legal relationship before action will be taken on any request. If you have any questions, please contact the CFPB’s FOIA Office at <a href="mailto:FOIA@cfpb.gov">FOIA@cfpb.gov</a> or at (855) 444-3642.</p>
@@ -77,7 +77,7 @@ <h2>Additional information required to locate the records</h2>
               enctype="multipart/form-data"
               method="POST">
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.description.id_for_label }}">
@@ -88,32 +88,32 @@ <h2>Additional information required to locate the records</h2>
                 </div>
                 <h3>Additional information that might assist in locating the records</h3>
                 <p>This enables the CFPB to locate the system of records containing the record(s) with a reasonable amount of effort.</p>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.system_of_record.id_for_label }}">
-                            {{ form.system_of_record.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.system_of_record.label }} <small class="a-label__helper">(optional)</small>
                         </label>
                         {{ form.system_of_record }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.date_of_records.id_for_label }}">
-                            {{ form.date_of_records.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.date_of_records.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-		        <p class="a-label_helper">{{ form.date_of_records.help_text }}</p>
+		        <p class="a-label__helper">{{ form.date_of_records.help_text }}</p>
                         {{ form.date_of_records }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.other_info.id_for_label }}">
-                            {{ form.other_info.label }} <small class="a-label_helper">(optional)</small>
+                            {{ form.other_info.label }} <small class="a-label__helper">(optional)</small>
                         </label>
-                        <p class="a-label_helper">{{ form.other_info.help_text }}</p>
+                        <p class="a-label__helper">{{ form.other_info.help_text }}</p>
                         {{ form.other_info }}
                     </div>
                 </div>
@@ -123,7 +123,7 @@ <h2>Contact information</h2>
             <p>Please provide your contact information so that we can correspond with you regarding the request.</p>
             <div class="o-well">
                 <h3>Requestor contact information</h3>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_name.id_for_label }}">
@@ -132,7 +132,7 @@ <h3>Requestor contact information</h3>
                         {{ form.requestor_name }}
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.requestor_email.id_for_label }}">
@@ -142,11 +142,11 @@ <h3>Requestor contact information</h3>
                     </div>
                 </div>
                   {% for error in form.street_address.errors %}
-		    <div class="o-form_group">
+		    <div class="o-form__group">
                       {{- notification.render( 'error', true, error ) }}
 		    </div>
                   {% endfor %}
-                  <div id="mail-radio" class="o-form_group">
+                  <div id="mail-radio" class="o-form__group">
                   {% if form.is_bound %}
                     {% set selected = form.contact_channel.value() %}
                   {% else %}
@@ -162,7 +162,7 @@ <h3>Requestor contact information</h3>
                   </div>
                 <div id="mail-target">
                   <p>If you would prefer to receive your records by mail, please provide your mailing address.</p>
-                  <div class="o-form_group">
+                  <div class="o-form__group">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.street_address.id_for_label }}">
@@ -171,7 +171,7 @@ <h3>Requestor contact information</h3>
                           {{ form.street_address }}
                       </div>
                   </div>
-                  <div class="o-form_group m-form-grid">
+                  <div class="o-form__group m-form-grid">
                       <div class="m-form-field">
                           <label class="a-label a-label__heading"
                                  for="{{ form.city.id_for_label }}">
@@ -200,12 +200,12 @@ <h3>Requestor contact information</h3>
             <h2>Supporting documentation (optional)</h2>
             <p class="u-mb15">Identity verification documents:</p>
             <ul class="m-list">
-                <li class="m-list_item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
-                <li class="m-list_item">A photocopy of a single form of identification that bears both your photograph and signature</li>
+                <li class="m-list__item">A photocopy of two forms of identification, including one form of identification that bears your photograph, and one form of identification that bears your signature; or</li>
+                <li class="m-list__item">A photocopy of a single form of identification that bears both your photograph and signature</li>
             </ul>
             <p>If you are a parent seeking access to the records of a minor or a legal guardian seeking access to the records of an incompetent, you will be required to provide adequate proof of your legal relationship.</p>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                   {% for error in form.supporting_documentation.errors %}
                       {{- notification.render( 'error', true, error ) }}
                   {% endfor %}
@@ -231,7 +231,7 @@ <h4>Files added:</h4>
             </div>
             <h2>Consent for release of records</h2>
             <div class="o-well">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field m-form-field__checkbox">
                         {{ form.consent }}
                         <label class="a-label"
@@ -240,7 +240,7 @@ <h2>Consent for release of records</h2>
                         </label>
                     </div>
                 </div>
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <div class="m-form-field">
                         <label class="a-label a-label__heading"
                                for="{{ form.full_name.id_for_label }}">
@@ -252,11 +252,11 @@ <h2>Consent for release of records</h2>
             </div>
 
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-btn-group">
                     <button id="submit-button" class="a-btn">
                         Submit
-                        <span id="submit-icon" class="a-btn_icon a-btn_icon__on-right">
+                        <span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
                             {{ svg_icon('updating') }}
                         </span>
                     </button>
@@ -272,7 +272,7 @@ <h2>Consent for release of records</h2>
     </div>
 {%- endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     {% include '_sidebar.html' %}
 {%- endblock %}
 
diff --git a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
index 52fe397fcfb..d3df89b16ea 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/browse-regulation.html
@@ -76,7 +76,7 @@
     {{ super() }} content__hide-horizontal-overflow regulations3k
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% if section %}
         <h1>{{section.title}}</h1>
 
@@ -87,15 +87,15 @@ <h1>{{section.title}}</h1>
                 </div>
                 <ul class="m-list m-list__links">
                     {% if num_versions > 1 %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">
                             {{ svg_icon('date') }}
                             View all versions of this regulation
                         </a>
                     </li>
                     {% endif %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="{{ search_url }}">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="{{ search_url }}">
                             {{ svg_icon('search') }}
                             Search this regulation
                         </a>
@@ -107,16 +107,16 @@ <h1>{{section.title}}</h1>
                             m-notification__visible
                             m-notification__warning">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">This version is not the current regulation.</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">This version is not the current regulation.</div>
+                        <p class="m-notification__explanation">
                         {% if requested_version.effective_date < current_version.effective_date %}
                             You are viewing a previous version of this regulation with amendments that went into effect on
                         {% endif %}
                         {% if requested_version.effective_date > current_version.effective_date %}
                             You are viewing a future version of this regulation with amendments that will go into effect on
                         {% endif %}
-                        {{ ap_date(requested_version.effective_date) }}. <a class="m-list_link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">View all versions of this regulation</a>
+                        {{ ap_date(requested_version.effective_date) }}. <a class="m-list__link" href="{{ routablepageurl(page, 'versions', section_label=section.url_path) }}">View all versions of this regulation</a>
                         </p>
                     </div>
                 </div>
@@ -207,9 +207,9 @@ <h1>{{ page.title }}</h1>
                             m-notification__visible
                             m-notification__warning">
                     {{ svg_icon('warning-round') }}
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">This version is not the current regulation.</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">This version is not the current regulation.</div>
+                        <p class="m-notification__explanation">
                             {% if requested_version.effective_date < current_version.effective_date %}
                                 You are viewing a previous version of this regulation with amendments that went into effect on {{ ap_date(requested_version.effective_date) }}.
                             {% endif %}
@@ -225,30 +225,30 @@ <h1>{{ page.title }}</h1>
             <div class="block block__sub">
                     <ul class="m-list m-list__links m-full-width-text">
                         {% if requested_version == current_version %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'section', section_label=sections[0].label.lower()) }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'section', section_label=sections[0].label.lower()) }}">
                                     View current regulation
                                 </a>
                             </li>
                         {% else %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'section', date_str=date_str, section_label=sections[0].label.lower()) }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'section', date_str=date_str, section_label=sections[0].label.lower()) }}">
                                     View this version
                                 </a>
                             </li>
                         {% endif %}
 
                         {% if num_versions > 1 %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ routablepageurl(page, 'versions') }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ routablepageurl(page, 'versions') }}">
                                     View all versions of this regulation
                                 </a>
                             </li>
                         {% endif %}
 
                         {% if requested_version == current_version %}
-                            <li class="m-list_item">
-                                <a class="m-list_link" href="{{ search_url }}">
+                            <li class="m-list__item">
+                                <a class="m-list__link" href="{{ search_url }}">
                                     Search this regulation
                                 </a>
                             </li>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
index 7cc6dcf31b1..dd38c43bf4c 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/inline_interps.html
@@ -6,21 +6,21 @@
             o-expandable__border
             inline-interpretation">
 
-    <button class="o-expandable_header"{% if section_title %} data-section="{{ section_title }}"{% endif %}>
-        <span class="o-expandable_label">
+    <button class="o-expandable__header"{% if section_title %} data-section="{{ section_title }}"{% endif %}>
+        <span class="o-expandable__label">
             Official interpretation {% if section_title %}of {{ section_title }}{% endif %}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
         {{ contents | safe }}
 
         <p><a href="{{ url }}">See interpretation of {% if section_title %}{{ section_title }}{% else %}this section{% endif %} in {{ interp_location }}</a></p>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
index f2e18afd8b8..ff2c2f16988 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/landing-page.html
@@ -24,19 +24,19 @@
 
 {# BODY items #}
 
-{% block content_intro -%}
+{% block content__intro -%}
     {% for block in page.header -%}
         {{ render_block.render(block, loop.index) }}
     {%- endfor %}
 {% endblock %}
 
-{% block content_main scoped %}
+{% block content__main scoped %}
     {% for block in page.content -%}
         {{ render_block.render(block, loop.index) }}
     {%- endfor %}
-{% endblock content_main %}
+{% endblock content__main %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ recent_notices }}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html b/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
index 6fbf71c3142..122f1881e1b 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/recent-notices.html
@@ -1,13 +1,13 @@
 <div class="block block__flush-top">
     <div class="m-related-links">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Recently issued notices
             </h2>
         </header>
         <ul class="m-list m-list__links" id="regs3k-notices">
-            <li class="m-list_item">
-                <a href="https://www.federalregister.gov/agencies/consumer-financial-protection-bureau" class="m-list_link">View all recent Bureau notices</a>
+            <li class="m-list__item">
+                <a href="https://www.federalregister.gov/agencies/consumer-financial-protection-bureau" class="m-list__link">View all recent Bureau notices</a>
             </li>
         </ul>
     </div>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
index e1ba32eb38a..1cbd03a7333 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-bar.html
@@ -14,16 +14,16 @@ <h2 class="h4">
             {% endfor %}
             </div>
         {% endif %}
-        <div class="o-form__input-w-btn_input-container">
+        <div class="o-form--input-w-btn__input-container">
             <div class="m-btn-inside-input input-contains-label">
-                <label for="query" class="input-contains-label_before input-contains-label_before__search">
+                <label for="query" class="input-contains-label__before input-contains-label__before__search">
                     {{ svg_icon('search') }}
                     <span class="u-visually-hidden">Search</span>
                 </label>
                 <input id="query" name="q" type="text" title="Search terms" class="a-text-input" value="{{ q }}" placeholder="Search terms">
             </div>
         </div>
-        <div class="o-form__input-w-btn_btn-container">
+        <div class="o-form--input-w-btn__btn-container">
             <button class="a-btn" aria-label="Search for a term in the regulations">Search</button>
         </div>
     </div>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
index a45babfbd4c..0d0fa92ecdd 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-secondary-nav.html
@@ -15,15 +15,15 @@
     {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
     <nav class="o-regs3k-navigation o-expandable__padded"
          aria-label="Section navigation">
-        <button class="o-regs3k-navigation_header o-expandable_header">
-            <span class="h4 o-expandable_label">
+        <button class="o-regs3k-navigation_header o-expandable__header">
+            <span class="h4 o-expandable__label">
                 Table of Contents
             </span>
-            <span class="o-expandable_cues">
-                <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+            <span class="o-expandable__cues">
+                <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                     {{ svg_icon('down') }}
                 </span>
-                <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                     {{ svg_icon('up') }}
                 </span>
             </span>
@@ -45,9 +45,9 @@
 {% endmacro %}
 
 {% macro _navlink(text, href, current=false) %}
-<a class="o-secondary-nav_link
-          o-secondary-nav_link__parent
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          o-secondary-nav__link__parent
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
index d057f74ec45..0812b7edb57 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-side-nav.html
@@ -4,26 +4,26 @@
     {# Overrides the default skip nav target of #main so that we skip over the
        left side nav on pages that extend this template and go right to the
        main content area. #}
-    #content_main
+    #content__main
 {%- endblock %}
 
 {% block content scoped %}
     <main class="u-layout-grid u-layout-grid__1-3
                  {% block content_modifiers -%}{%- endblock %}"
           id="main">
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
         {% block hero -%}{%- endblock %}
         {% block pre_content scoped -%}
             {% include 'v1/layouts/_breadcrumbs.html' %}
         {%- endblock %}
         {% block body_content scoped %}
-        <aside class="u-layout-grid_secondary-nav o-regs3k-sidebar">
+        <aside class="u-layout-grid__secondary-nav o-regs3k-sidebar">
             {% import 'regulations3k/regulations3k-secondary-nav.html' as secondary_nav with context %}
             {{ secondary_nav.render() }}
         </aside>
-        <div class="u-layout-grid_main"
-                id="content_main">
-            {% block content_main scoped -%}{%- endblock %}
+        <div class="u-layout-grid__main"
+                id="content__main">
+            {% block content__main scoped -%}{%- endblock %}
         </div>
         {% endblock %}
         </div>
diff --git a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
index d1ae4592068..bf49f05733f 100644
--- a/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
+++ b/cfgov/regulations3k/jinja2/regulations3k/search-regulations.html
@@ -45,7 +45,7 @@
     <link rel="stylesheet" href="{{ static('apps/regulations3k/css/main.css') }}">
 {%- endblock css %}
 
-{% block content_main scoped %}
+{% block content__main scoped %}
 
 <div class="block block__flush-top block__flush-bottom search_form">
     <h1>
@@ -66,7 +66,7 @@ <h1>
 {% if page.results.search_query %}
 <div class="search_results">
     <div class="block block__flush-top content content__1-3">
-        <aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+        <aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
             <h3>Refine results</h3>
             <form action="." method="get" data-js-hook="behavior_change-filter">
                 {% set expandable_settings = {
@@ -75,8 +75,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         {% if page.results.search_query %}
                         <input type="hidden" name="q" value="{{ page.results.search_query }}">
                         {% endif %}
@@ -106,8 +106,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         <p> </p>
                         {{ radio.render({
                             'label': '25 per page',
@@ -142,8 +142,8 @@ <h3>Refine results</h3>
                     'is_midtone': true
                 } %}
                 {% call() expandable(expandable_settings) %}
-                <div class="o-form_group">
-                    <fieldset class="o-form_fieldset">
+                <div class="o-form__group">
+                    <fieldset class="o-form__fieldset">
                         <p> </p>
                         {{ radio.render({
                             'label': 'By relevance',
@@ -171,7 +171,7 @@ <h3>Refine results</h3>
                 </div>
             </form>
         </aside>
-        <div id="regs3k-results" class="content_main content__flush-all-on-small content__flush-bottom">
+        <div id="regs3k-results" class="content__main content__flush-all-on-small content__flush-bottom">
             {% include 'search-regulations-results.html' %}
         </div>
     </div>
@@ -184,7 +184,7 @@ <h3>Refine results</h3>
 </div>
 {% endif %}
 
-{% endblock content_main %}
+{% endblock content__main %}
 
 
 {% block javascript scoped %}
diff --git a/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html b/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
index 501ba44c460..5837cd9b8c6 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message">
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message">
             {{ _("This tool is not supported in your browser. Please try a newer browser or confirm that JavaScript is enabled.") }}
         </div>
      </div>
diff --git a/cfgov/retirement_api/jinja2/retirement_api/about.html b/cfgov/retirement_api/jinja2/retirement_api/about.html
index f1d221be511..096e7c262ba 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/about.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/about.html
@@ -4,7 +4,7 @@
     {{ _('About this tool') }} | {{ _('Consumer Financial Protection Bureau') }}
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>
             {{ _("About this tool") }}
@@ -81,7 +81,7 @@ <h4>
     </div>
 {% endblock %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     <div class="block block__flush-top">
         <h2>
             my Social Security
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
index 81b2a93796b..b226194eed5 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming-es.html
@@ -386,6 +386,6 @@
 {% block next_step_one %}
 Crear un
 <a class="a-link a-link__icon" href="https://www.ssa.gov/myaccount/" rel="noopener noreferrer" target="_blank">
-  <span class="a-link_text">mi cuenta de Seguro Social</span>
+  <span class="a-link__text">mi cuenta de Seguro Social</span>
 </a> que revise su historial de ganancias reales y los beneficios esperados.
 {% endblock %}
diff --git a/cfgov/retirement_api/jinja2/retirement_api/claiming.html b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
index e3935583e65..30dd32ed27c 100644
--- a/cfgov/retirement_api/jinja2/retirement_api/claiming.html
+++ b/cfgov/retirement_api/jinja2/retirement_api/claiming.html
@@ -16,7 +16,7 @@
 <link rel="stylesheet" href="{{ static('apps/retirement/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
 
 {% set YES = _("Yes") %}
 {% set NO = _("No") %}
@@ -26,7 +26,7 @@
 <div id="claiming-social-security" class="claiming-social-security">
     <div class="intro block block__flush-top">
         <div class="content-l">
-            <div class="content-l_col content-l_col-2-3">
+            <div class="content-l__col content-l__col-2-3">
                 <h1>{{ _("Planning your Social Security claiming age") }}</h1>
                 <p class="lead-paragraph">
                     {{ _("The age you claim Social Security affects your lifetime income. We’ll help you think through this decision.") }}
@@ -61,7 +61,7 @@ <h1>{{ _("Planning your Social Security claiming age") }}</h1>
                     {% endif %}
                 </div>
             </div>
-            <div class="content-l_col content-l_col-1-3">
+            <div class="content-l__col content-l__col-1-3">
                 <div class="img"></div>
             </div>
         </div>
@@ -73,17 +73,17 @@ <h1>{{ _("Planning your Social Security claiming age") }}</h1>
               block__border-top
               u-js-only">
               <div class="content-l">
-                <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("Explore how the age you start collecting Social Security affects your retirement benefits") }}</h2>
-                <form id="step-one-form" name="step-one-form" action="#" class="content-l_col content-l_col-2-3">
+                <h2 class="content-l__col content-l__col-2-3"><strong>{{STEP}} 1: </strong>{{ _("Explore how the age you start collecting Social Security affects your retirement benefits") }}</h2>
+                <form id="step-one-form" name="step-one-form" action="#" class="content-l__col content-l__col-2-3">
                     <p class="h3 step-one-instructions">{{ _("Enter your information below to calculate your estimated benefits.") }}</p>
                     <div class="m-notification m-notification__warning">
                         {{ svg_icon('warning-round') }}
-                        <div class="m-notification_content">
-                            <div class="h4 m-notification_message">Error message.</div>
+                        <div class="m-notification__content">
+                            <div class="h4 m-notification__message">Error message.</div>
                         </div>
                     </div>
                     <div class="content-l">
-                        <div class="content-l_col content-l_col-1-3 birthdate-inputs">
+                        <div class="content-l__col content-l__col-1-3 birthdate-inputs">
                             <p>{{ _("Date of birth") }}</p>
                             <label for="bd-month" class="input-labels"><input id="bd-month" type="text" maxlength="2"
                                     placeholder="{{ _('MM') }}" value="" autocapitalize="none" autocomplete="off"
@@ -95,7 +95,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                                     placeholder="{{ _('YYYY') }}" value="" autocapitalize="none" autocomplete="off"
                                     autocorrect="off" spellcheck="false"></label>
                         </div>
-                        <div class="content-l_col content-l_col-1-3">
+                        <div class="content-l__col content-l__col-1-3">
                             <label for="salary-input" class="input-labels">
                                 <span class="input-labels_block">{{ _("Highest annual work income") }} <span
                                         data-tooltip-target="salary" aria-describedby="salary-tooltip">{{
@@ -107,7 +107,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                                 <small>{{ _("Enter your total work income before taxes and other deductions. If your work income is 0 (zero) because you are now retired or unemployed, enter the income for the last full year in which you worked.") }}</small>
                             </div>
                         </div>
-                        <div class="content-l_col content-l_col-1-3">
+                        <div class="content-l__col content-l__col-1-3">
                             <button
                                 type="submit"
                                 id="get-your-estimates"
@@ -121,7 +121,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
                         </div>
                     </div>
                 </form>
-                <div class="content-l_col content-l_col-1-3 estimate-info">
+                <div class="content-l__col content-l__col-1-3 estimate-info">
                     <small>
                         {{ _("The calculator bases your benefit estimate on current formulas from the Social Security Administration. Your answers are anonymous. Because we do not access or use your Social Security earnings record, these are rough estimates.") }}
                     </small>
@@ -135,7 +135,7 @@ <h2 class="content-l_col content-l_col-2-3"><strong>{{STEP}} 1: </strong>{{ _("E
     </div>
 
     <div id="graph-container" class="content-l step-one-hidden">
-        <div class="content-l_col content-l_col-1-3">
+        <div class="content-l__col content-l__col-1-3">
             <div class="selected-retirement-age-container">
                 <p class="h3 selected-retirement-age">
                     <span class="selected-retirement-age__not-fra">
@@ -197,7 +197,7 @@ <h3 class="retirement-age">{{ _("About your early benefit claiming age:") }}</h3
             </p>
 
         </div>
-        <div class="content-l_col content-l_col-2-3 canvas-container">
+        <div class="content-l__col content-l__col-2-3 canvas-container">
             <div id="estimated-benefits-input" class="estimated-benefits-input h4 step-one-hidden">
                 <span>{{ _("View estimated benefits as:") }}</span><span><label><input type="radio"
                             name="benefits-display" value="monthly" checked> {{ _("monthly income") }}</label>
@@ -237,11 +237,11 @@ <h3 class="retirement-age">{{ _("About your early benefit claiming age:") }}</h3
     </div>
     <hr class="before-step-two">
     <div class="content-l step-two">
-        <div class="content-l_col content-l_col-1-3">
+        <div class="content-l__col content-l__col-1-3">
             <h2><strong>{{STEP}} 2: </strong>{{ _("Learn tips specific to your situation") }}</h2>
             <p class="question h3">{{ _("Picture your life in retirement to receive claiming tips.") }}</p>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-married">
+        <div class="content-l__col content-l__col-1-3 question question-married">
             <img src="{{ static("apps/retirement/img/lifestyle-married.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -311,7 +311,7 @@ <h4>{{ _("Your claiming age matters for your own retirement benefits and your su
                 </p>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-working age-split">
+        <div class="content-l__col content-l__col-1-3 question question-working age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-working.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -340,7 +340,7 @@ <h4>{{ _("Working in your 60s will help you maximize your income and savings.")
                     for retirement.
                     <a href="https://secure.ssa.gov/RIL/SiView.action"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Review your earnings record on <i>my</i> SocialSecurity</span>
+                        <span class="a-link__text">Review your earnings record on <i>my</i> SocialSecurity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -362,7 +362,7 @@ <h4>{{ _("Working in your 60s will help you maximize your income and savings.")
                     for retirement.
                     <a href="https://secure.ssa.gov/RIL/SiView.action"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Review your earnings record on <i>my</i> SocialSecurity</span>
+                        <span class="a-link__text">Review your earnings record on <i>my</i> SocialSecurity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -390,7 +390,7 @@ <h4>{{ _("You can maximize your benefits even if you work fewer hours or stop wo
                     claiming age.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -418,7 +418,7 @@ <h4>{{ _("You can maximize your benefits even if you work fewer hours or stop wo
                     age.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">
+                        <span class="a-link__text">
                             Learn more about working and collecting Social Security benefits
                         </span>
                     </a>.
@@ -443,7 +443,7 @@ <h4>{{ _("Consider working in your 60s for an extra boost to your income and sav
                     for retirement.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -472,7 +472,7 @@ <h4>{{ _("Consider working extra years in your 60s for an extra boost to your in
                     completely.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -493,7 +493,7 @@ <h4>{{ _("Consider working extra years in your 60s for an extra boost to your in
         </div>
     </div>
     <div class="content-l step-two">
-        <div class="content-l_col content-l_col-1-3 question question-expenses age-split">
+        <div class="content-l__col content-l__col-1-3 question question-expenses age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-expenses.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -519,7 +519,7 @@ <h4>{{ _("Retirement could be more expensive than you expect.") }}</h4>
                     benefit could be reduced by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -538,7 +538,7 @@ <h4>{{ _("Retirement could be more expensive than you expect.") }}</h4>
                     benefit could be reduced by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -557,7 +557,7 @@ <h4>{{ _("Maintain your lifestyle by planning ahead.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -576,7 +576,7 @@ <h4>{{ _("Maintain your lifestyle by planning ahead.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -595,7 +595,7 @@ <h4>{{ _("Many people find retirement is more expensive than expected.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -614,13 +614,13 @@ <h4>{{ _("Many people find retirement is more expensive than expected.") }}</h4>
                     by as much as 30 percent.
                     <a href="https://www.aarp.org/content/dam/aarp/money/budgeting_savings/2014-08/budgeting-worksheet-aarp.pdf"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Create a retirement budget</span>
+                        <span class="a-link__text">Create a retirement budget</span>
                     </a>.
                     {% endblock %}
                 </p>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-income age-split">
+        <div class="content-l__col content-l__col-1-3 question question-income age-split">
             <img src="{{ static("apps/retirement/img/lifestyle-income.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -654,7 +654,7 @@ <h4>{{ _("Continue saving in the coming years.") }}</h4>
                     much as 30 percent.
                     <a href="https://americasaves.org/for-savers/set-a-goal-what-to-save-for/save-for-retirement"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about saving for retirement</span>
+                        <span class="a-link__text">Learn more about saving for retirement</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -682,7 +682,7 @@ <h4>{{ _("You have an opportunity to continue growing your money.") }}</h4>
                     59½, you will likely face an early withdrawal penalty.
                     <a href="https://tools.finra.org/savings_calculator/"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about how retirement savings grow</span>
+                        <span class="a-link__text">Learn more about how retirement savings grow</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -711,7 +711,7 @@ <h4>{{ _("It's a perfect time to start saving.") }}</h4>
                     your full benefit age until age 70.
                     <a href="https://tools.finra.org/savings_calculator/"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about how retirement savings grow</span>
+                        <span class="a-link__text">Learn more about how retirement savings grow</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -741,7 +741,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                     much as 30 percent.
                     <a href="https://americasaves.org/blog/1345-the-faqs-of-iras"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about starting an IRA</span>
+                        <span class="a-link__text">Learn more about starting an IRA</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -767,7 +767,7 @@ <h4>{{ _("There are many ways to plan for a secure retirement outside of Social
                     past your full benefit age until age 70.
                     <a href="https://americasaves.org/blog/1345-the-faqs-of-iras"
                        rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about starting an IRA</span>
+                        <span class="a-link__text">Learn more about starting an IRA</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -795,7 +795,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                     past your full benefit age until age 70.
                     <a href="https://www.ssa.gov/planners/retire/whileworking.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Learn more about working and collecting Social Security
+                        <span class="a-link__text">Learn more about working and collecting Social Security
                             benefits</span>
                     </a>.
                     {% endblock %}
@@ -817,7 +817,7 @@ <h4>{{ _("It's never too late to start saving!") }}</h4>
                 <small>{{ _("Catch-up contributions are additional contributions that individuals who are age 50 or older can make to their 401(k) or IRA accounts to help them boost their savings as they approach retirement.") }}</small>
             </div>
         </div>
-        <div class="content-l_col content-l_col-1-3 question question-longevity">
+        <div class="content-l__col content-l__col-1-3 question question-longevity">
             <img src="{{ static("apps/retirement/img/lifestyle-longevity.png") }}" class="lifestyle-img" alt="">
             <div class="lifestyle-question_container">
                 <hr>
@@ -843,7 +843,7 @@ <h4>{{ _("Many people live longer than they expect.") }}</h4>
                     will be lower by thousands of dollars.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your expected longevity</span>
+                        <span class="a-link__text">Calculate your expected longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -865,7 +865,7 @@ <h4>{{ _("Claiming at your full benefit age could still make sense for you.") }}
                     you age.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your longevity</span>
+                        <span class="a-link__text">Calculate your longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -887,7 +887,7 @@ <h4>{{ _("There's a good chance that you'll live into your 80s and beyond.") }}<
                     will be lower by thousands of dollars.
                     <a href="https://www.ssa.gov/oact/population/longevity.html"
                         rel="noopener noreferrer" target="_blank">
-                        <span class="a-link_text">Calculate your longevity</span>
+                        <span class="a-link__text">Calculate your longevity</span>
                     </a>.
                     {% endblock %}
                 </p>
@@ -942,16 +942,16 @@ <h3>{{ _("You’ve chosen age") }} <span class="age-response-value"></span>{{ _(
                     <p>{{ _("If you start collecting at this age you will receive less than your full benefit amount. Here are a few things to keep in mind in the next few years.") }}</p>
                 </div>
                 <ol class="next-steps content-l">
-                    <li class="content-l_col content-l_col-1-3 next-step-one">
+                    <li class="content-l__col content-l__col-1-3 next-step-one">
                         {% block next_step_one %}
                         Create a <a href="https://www.ssa.gov/myaccount/"
-                            rel="noopener noreferrer" target="_blank"><span class="a-link_text"><em>my</em> Social
+                            rel="noopener noreferrer" target="_blank"><span class="a-link__text"><em>my</em> Social
                                 Security account</span></a> to review your expected benefits based on your actual Social
                         Security record. You will also find additional information about your eligibility and other
                         benefits including disability and survivor benefits.
                         {% endblock %}
                     </li>
-                    <li class="content-l_col content-l_col-1-3 next-step-three">
+                    <li class="content-l__col content-l__col-1-3 next-step-three">
                         {{ _("If your income, employment, or marital status changes, you may need to reconsider the age you want to start collecting your benefits. Visit us again!") }}
                     </li>
                 </ol>
diff --git a/cfgov/tccp/jinja2/tccp/card.html b/cfgov/tccp/jinja2/tccp/card.html
index e64beed1dde..243818bad68 100644
--- a/cfgov/tccp/jinja2/tccp/card.html
+++ b/cfgov/tccp/jinja2/tccp/card.html
@@ -18,7 +18,7 @@
     <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
 <div class="block block__flush-top">
 
     <div class="eyebrow">{{ card.institution_name }}</div>
@@ -756,8 +756,8 @@ <h2>Contact information</h2>
     </dl>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {%- include "tccp/includes/sidebar.html" -%}
-{% endblock content_sidebar %}
+{% endblock content__sidebar %}
diff --git a/cfgov/tccp/jinja2/tccp/cards.html b/cfgov/tccp/jinja2/tccp/cards.html
index 93da9710734..2abc0d561e2 100644
--- a/cfgov/tccp/jinja2/tccp/cards.html
+++ b/cfgov/tccp/jinja2/tccp/cards.html
@@ -19,11 +19,11 @@
 <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
 {% endblock %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     {{ super() }} htmx-container
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
 
 <div class="htmx-progress">
     <div class="htmx-progress-bar"></div>
@@ -73,4 +73,4 @@ <h3>{{ situation.title }}</h3>
     </button>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/tccp/jinja2/tccp/includes/filter_form.html b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
index 9ab6078f8bc..7db1a093e21 100644
--- a/cfgov/tccp/jinja2/tccp/includes/filter_form.html
+++ b/cfgov/tccp/jinja2/tccp/includes/filter_form.html
@@ -23,17 +23,17 @@
 {%- endmacro -%}
 
 {%- macro render_form_fields(form) -%}
-<div class="content-l_col content-l_col-1">
-    <div class="o-form_group">
+<div class="content-l__col content-l__col-1">
+    <div class="o-form__group">
         {{ render_field(form.credit_tier, "select") }}
     </div>
 
-    <div class="o-form_group">
+    <div class="o-form__group">
         {{ render_field(form.location, "select") }}
     </div>
 
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <legend class="a-legend">Features</legend>
 
             {{ render_field(form.small_institution, "checkbox") }}
@@ -42,15 +42,15 @@
         </fieldset>
     </div>
 
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <legend class="a-legend">Rewards</legend>
 
             {{ form.rewards }}
         </fieldset>
     </div>
 
-    <div class="o-form_group">
+    <div class="o-form__group">
         {{ render_field(form.ordering, "select") }}
     </div>
 
@@ -73,7 +73,7 @@
 
         {{ render_form_fields(form) }}
 
-        <div class="content-l_col content-l_col-1 m-btn-group">
+        <div class="content-l__col content-l__col-1 m-btn-group">
             <button type="submit" class="a-btn" title="Apply filters">
                 Apply filters
             </button>
diff --git a/cfgov/tccp/jinja2/tccp/includes/sidebar.html b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
index 5aba92847fe..70b0b0ccaba 100644
--- a/cfgov/tccp/jinja2/tccp/includes/sidebar.html
+++ b/cfgov/tccp/jinja2/tccp/includes/sidebar.html
@@ -6,6 +6,6 @@ <h3>About us</h3>
         and other financial companies treat you fairly.
     </p>
     <a class="a-link a-link__jump" href="/about-us/the-bureau/">
-        <span class="a-link_text">Learn how the CFPB can help you</span>
+        <span class="a-link__text">Learn how the CFPB can help you</span>
     </a>
 </div>
diff --git a/cfgov/tccp/jinja2/tccp/landing_page.html b/cfgov/tccp/jinja2/tccp/landing_page.html
index 4929478dd37..cb66eeb4ecf 100644
--- a/cfgov/tccp/jinja2/tccp/landing_page.html
+++ b/cfgov/tccp/jinja2/tccp/landing_page.html
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
 {% endblock %}
 
-{% block content_intro %}
+{% block content__intro %}
 
 {% with
     value = {
@@ -38,29 +38,29 @@
     {% include "v1/includes/molecules/hero.html" with context %}
 {% endwith %}
 
-{% endblock content_intro %}
+{% endblock content__intro %}
 
-{% block content_main %}
+{% block content__main %}
 
-<div class="content_wrapper">
+<div class="content__wrapper">
     <div class="block block__sub block__flush-top">
         <h2>
             How is this comparison tool different than others you may have used?
         </h2>
         <p>
             <ul class="m-list">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     Larger pool of cards, likely including banks you’ve never heard of with great rates
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     <a
                         href="/data-research/credit-card-data/terms-credit-card-plans-survey/"
                     >Issuers required by law to submit data to us</a>
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     No paid advertising
                 </li>
-                <li class="m-list_item m-list_item__has-icon">
+                <li class="m-list__item m-list__item__has-icon">
                     Card interest is rated, to help you compare
                 </li>
             </ul>
@@ -70,7 +70,7 @@ <h2>
     <div class="block block__sub">
         <form action="." method="get">
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
                         class="a-label a-label__heading"
@@ -81,7 +81,7 @@ <h2>
 
                     {{ form.credit_tier }}
 
-                    <small class="a-label_helper a-label_helper__block">
+                    <small class="a-label__helper a-label__helper__block">
                         If you don’t know it,
                         <a href="/ask-cfpb/where-can-i-get-my-credit-scores-en-316/"
                             >find your credit score</a>.
@@ -89,7 +89,7 @@ <h2>
                 </div>
             </div>
 
-            <div class="o-form_group">
+            <div class="o-form__group">
                 <div class="m-form-field m-form-field__select">
                     <label
                         class="a-label a-label__heading"
@@ -106,8 +106,8 @@ <h2>
                 I’m looking for a card that will help me...
             </legend>
 
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     {{ form.situations }}
                 </fieldset>
             </div>
@@ -123,8 +123,8 @@ <h2>
     </div>
 </div>
 
-{% endblock content_main %}
+{% endblock content__main %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {%- include "tccp/includes/sidebar.html" -%}
-{% endblock content_sidebar %}
+{% endblock content__sidebar %}
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html b/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
index dfd658beab0..9201ba7c0e9 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/avoid-fees.html
@@ -2,7 +2,7 @@
     We’ll show you cards that have:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>No annual fee</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html b/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
index 17e565311bd..a5502db1955 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/build-credit.html
@@ -2,7 +2,7 @@
     We’ll show you cards that:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Are targeted for your credit score range</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html b/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
index f828fda5567..5a61b5e632d 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/earn-rewards.html
@@ -2,7 +2,7 @@
     We’ll show you cards that:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Offer rewards</strong>
         (like cash back, travel points, or other rewards)
     </li>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html b/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
index 02d10d717c6..576b36d3900 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/make-a-big-purchase.html
@@ -4,7 +4,7 @@
     We’ll show you cards where you’ll:
 </p>
 <ul class="m-list m-list__unstyled">
-    <li class="m-list_item m-list_item__has-icon">
+    <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
             <strong>Pay less than average interest</strong>
@@ -16,12 +16,12 @@
     <div class="m-notification m-notification__warning m-notification__visible">
         {{ svg_icon("warning-round") }}
 
-        <div class="m-notification_content">
-            <div class="h4 m-notification_message">
+        <div class="m-notification__content">
+            <div class="h4 m-notification__message">
                 What about 0% offers?
             </div>
 
-            <div class="m-notification_explanation">
+            <div class="m-notification__explanation">
                 If a card has promotional interest, ensure you’re on track to
                 pay off the balance within the promotional period, or you
                 could end up owing more in interest than the original
@@ -33,7 +33,7 @@
                     class="a-link a-link__jump"
                     href="/ask-cfpb/what-is-a-credit-card-interest-rate-what-does-apr-mean-en-44/"
                 >
-                    <span class="a-link_text">More about intro APRs</span>
+                    <span class="a-link__text">More about intro APRs</span>
                 </a>
             </p>
         </div>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html b/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
index 5f04bc9b030..9d9e0646df0 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/pay-less-interest.html
@@ -2,7 +2,7 @@
     We’ll show you cards where you’ll:
 </p>
 <ul class="m-list m-list__unstyled">
-    <li class="m-list_item m-list_item__has-icon">
+    <li class="m-list__item m-list__item__has-icon">
         {{ svg_icon("dollar-round") }}
         <span>
             <strong>Pay less than average interest</strong>
diff --git a/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html b/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
index 08a8912f166..5363bb138a7 100644
--- a/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
+++ b/cfgov/tccp/jinja2/tccp/situations/select/transfer-a-balance.html
@@ -2,7 +2,7 @@
     We’ll show you cards that have:
 </p>
 <ul class="m-list">
-    <li class="m-list_item">
+    <li class="m-list__item">
         <strong>Low balance transfer interest rates</strong>
     </li>
 </ul>
diff --git a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
index be78efc6bb1..8905774dabd 100644
--- a/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
+++ b/cfgov/tccp/templates/tccp/widgets/situation_checkbox_option.html
@@ -4,7 +4,7 @@
     <label class="a-label" for="{{ widget.attrs.id }}">
         {{ widget.label }}
 
-        <div class="a-label_helper">
+        <div class="a-label__helper">
             {{ widget.value.select_html }}
 
             <p>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_index_page.html
index 93c5f7e3c5d..8e770abf322 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
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="{{ static('apps/teachers-digital-platform/css/main.css') }}">
 {%- endblock css %}
 
-{% block content_main scoped %}
+{% block content__main scoped %}
 <div class="tdp-activity-search">
     <div class="content content__1-3">
         <section class="m-search-hero">
@@ -30,9 +30,9 @@
             <h2>Search for activities</h2>
             <form class="u-mt30" method="get" action="." data-js-hook="behavior_submit-search">
                 <div class="o-form__input-w-btn">
-                    <div class="o-form__input-w-btn_input-container">
+                    <div class="o-form--input-w-btn__input-container">
                         <div class="m-btn-inside-input input-contains-label">
-                            <label for="search-text" class="input-contains-label_before input-contains-label_before__search">
+                            <label for="search-text" class="input-contains-label__before input-contains-label__before__search">
                                 {{ svg_icon('search') }}
                                 <span class="u-visually-hidden">The term to search for</span>
                             </label>
@@ -40,14 +40,14 @@ <h2>Search for activities</h2>
                                     placeholder="Enter your search term(s)"
                                     value="{% if page.results.search_query: %}{{ page.results.search_query }}{% endif %}">
                             <label for="search-text"
-                                  class="input-contains-label_after
-                                         input-contains-label_after__clear
+                                  class="input-contains-label__after
+                                         input-contains-label__after__clear
                                          u-hidden" data-js-hook="behavior_clear-search">
                                 Clear {{ svg_icon('error') }}
                             </label>
                         </div>
                     </div>
-                    <div class="o-form__input-w-btn_btn-container">
+                    <div class="o-form--input-w-btn__btn-container">
                         <button class="a-btn" aria-label="Search for an activity">Search</button>
                     </div>
                 </div>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_page.html
index cd994be7d8d..43d162e522b 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
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="{{ static('apps/teachers-digital-platform/css/main.css') }}">
 {%- endblock css %}
 
-{% block content_main scoped %}
+{% block content__main scoped %}
     <h1>{{ page.title | striptags }}</h1>
     <div class="meta">
         <span class="a-date">
@@ -77,7 +77,7 @@ <h3 class="h5">Student materials</h3>
                 </p>
             {% endfor %}
         {% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
         <p><strong>Note:</strong> Please remember to consider your students’ accommodations and special needs to ensure that all students are able to participate in a meaningful way.</p>
     </div>
     <div class="block">
@@ -88,9 +88,9 @@ <h2>Explore related resources</h2>
             <li><a href="https://www.federalreserveeducation.org/" target="_blank" rel="noopener noreferrer">View financial education resources from the Federal Reserve</a></li>
         </ul>
     </div>
-{% endblock content_main %}
+{% endblock content__main %}
 
-{% block content_sidebar scoped %}
+{% block content__sidebar scoped %}
     <h3>Key information for this activity</h3>
 
     {% if page.building_block %}
@@ -98,7 +98,7 @@ <h4 class="u-mb5">Building block</h4>
         <p class="u-mb20"><small>(<a href="/consumer-tools/educator-tools/youth-financial-education/learn/">What are the building blocks?</a>)</small></p>
         <ul class="m-list m-list__unstyled">
             {% for block_item in page.building_block.all() %}
-                <li class="m-list_item">{{ svg_icon(block_item.svg_icon ~ '-round') }} {{ block_item.title }}</li>
+                <li class="m-list__item">{{ svg_icon(block_item.svg_icon ~ '-round') }} {{ block_item.title }}</li>
             {% endfor %}
         </ul>
     {% endif %}
@@ -113,14 +113,14 @@ <h4>School subject</h4>
         <p>{{ page.school_subject.all() | join(', ') }}</p>
     {% endif %}
 
-    <div class="content_line u-mt30 u-mb30"></div>
+    <div class="content__line u-mt30 u-mb30"></div>
 
     {% if page.grade_level.all() or page.age_range.all() or page.student_characteristics.all() %}
         <h4>Audience</h4>
         {% if page.grade_level.all() %}<p><strong>Grade level:</strong> {{ page.grade_level.all() | join(', ') }}</p>{% endif %}
         {% if page.age_range.all() %}<p><strong>Age range:</strong> {{ page.age_range.all() | join(', ') }}</p>{% endif %}
         {% if page.student_characteristics.all() %}<p><strong>Student characteristics:</strong> {{ page.student_characteristics.all() | join(', ') }}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     {% if page.activity_type.all() or page.teaching_strategy.all() or page.blooms_taxonomy_level.all() or page.activity_duration %}
@@ -129,7 +129,7 @@ <h4>Activity characteristics</h4>
         {% if page.teaching_strategy.all() %}<p><strong>Teaching strategy:</strong> {{ page.teaching_strategy.all() | join(', ') }}</p>{% endif %}
         {% if page.blooms_taxonomy_level.all() %}<p><strong>Bloom’s Taxonomy level:</strong> {{ page.blooms_taxonomy_level.all() | join(', ') }}</p>{% endif %}
         {% if page.activity_duration %}<p><strong>Activity duration:</strong> {{page.activity_duration}}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     {% if page.jump_start_coalition.all() or page.council_for_economic_education.all() %}
@@ -138,12 +138,12 @@ <h4 class="u-mb5">National standards</h4>
             (<a
             class="a-link a-link__icon" target="_blank" rel="noreferrer noopener"
             href="https://files.consumerfinance.gov/f/documents/2021_Natl_Standards_Downloadable_final.pdf"
-            ><span class="a-link_text">What are the national standards? </span>
+            ><span class="a-link__text">What are the national standards? </span>
             <span class="a-icon">{{ svg_icon('download') }}</span></a>)
         </small></p>
         {% if page.council_for_economic_education.all() %}<p><strong>Standards:</strong>
             {{ page.council_for_economic_education.all() | join(', ') }}</p>{% endif %}
-        <div class="content_line u-mt30 u-mb30"></div>
+        <div class="content__line u-mt30 u-mb30"></div>
     {% endif %}
 
     <div class="block block__flush-top">
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
index e037f99945c..f5590696cc4 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_facets_and_results.html
@@ -19,8 +19,8 @@
 {% endmacro %}
 
 {% macro build_form_group(name, items) %}
-    <div class="o-form_group">
-        <fieldset class="o-form_fieldset">
+    <div class="o-form__group">
+        <fieldset class="o-form__fieldset">
             <ul class="m-list m-list__unstyled">
                 {% for facet in items %}
                 <li>
@@ -69,7 +69,7 @@ <h3>No results match your search.</h3>
     {% endif %}
 </div>
 
-<aside class="content_sidebar content__flush-top-on-small content__flush-sides-on-small filters">
+<aside class="content__sidebar content__flush-top-on-small content__flush-sides-on-small filters">
     <h3 class="h2">Filter results by</h3>
     <form action="." method="get" data-js-hook="behavior_change-filter">
         <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
@@ -102,7 +102,7 @@ <h5>{{topic_dict[topic.title]}}</h5>
     </form>
 
 </aside>
-<section id="tdp-search-results" class="content_main results" tabindex="-1">
+<section id="tdp-search-results" class="content__main results" tabindex="-1">
     <div class="results_header">
         {% if page.results.total_results and page.results.total_results > 0 %}
             <div class="results_count u-hide-on-sm u-hide-on-xs" data-results-count="{{ page.results.total_results }}">
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
index f96b7207816..ad04e512735 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/activity_search_result.html
@@ -38,7 +38,7 @@ <h5 class="activity_meta-key">Activity duration:</h5>
             <h4 class="h5">Building block</h4>
             <ul class="m-list m-list__unstyled">
                 {% for block in result.building_block %}
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <span class="a-icon a-icon__large a-icon__space-after">
                             {{ svg_icon(block.svg_icon ~ '-round') }}
                         </span>
diff --git a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
index 3c8271962fa..da83f86c1c5 100644
--- a/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
+++ b/cfgov/teachers_digital_platform/jinja2/teachers_digital_platform/tdp_expandable.html
@@ -39,22 +39,22 @@
 <div class="o-expandable
             {{ 'o-expandable__background' if value.is_midtone else '' }}
             {{ 'o-expandable__border' if value.is_bordered else '' }}">
-    <button class="o-expandable_header" type="button">
-        <span class="h4 o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="h4 o-expandable__label">
             {{ value.label }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content
-                {{ 'o-expandable_content__onload-open'
+    <div class="o-expandable__content
+                {{ 'o-expandable__content__onload-open'
                     if value.is_expanded else '' }}
                 {{ 'o-expandable__mobile-collapsed'
                     if value.is_collapsed_for_mobile else '' }}">
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js b/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
index 0b0dab1db38..77a41b55dd6 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/accessibility-interactions-listeners.js
@@ -5,7 +5,7 @@ import { addEventListenerToElem } from './util/analytics-util';
   /* Listen for focus on the "skip link" button. This will grab the top link.
      Only the first link is needed since we're aiming to track users that use
      the tab-key from the get-go for navigation. */
-  const skipLinkButton = document.querySelector('.skip-nav_link');
+  const skipLinkButton = document.querySelector('.skip-nav__link');
   addEventListenerToElem(skipLinkButton, 'focus', () => {
     analyticsSendEvent({
       event: 'Accessibility Interactions',
diff --git a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
index ec182b8bd5b..61f40558e9f 100644
--- a/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
+++ b/cfgov/unprocessed/apps/analytics-gtm/js/bah-explainers.js
@@ -88,7 +88,7 @@ export default function (label) {
     recordExpandableState(expandableID);
 
     let action = 'Expandable collapsed';
-    const label = elem.querySelector('.o-expandable_label');
+    const label = elem.querySelector('.o-expandable__label');
     const text = label.textContent.trim();
     if (expandableStates[expandableID] === true) {
       action = 'Expandable expanded';
@@ -128,7 +128,7 @@ export default function (label) {
     trackFormExplainerPageButtonClick,
   );
   addEventListenerToSelector(
-    '.o-expandable_header',
+    '.o-expandable__header',
     'mouseup',
     trackExpandableTargetsClick,
   );
diff --git a/cfgov/unprocessed/apps/ccdb-search/css/main.less b/cfgov/unprocessed/apps/ccdb-search/css/main.less
index 1903e50cccd..bdb7adfe2e5 100644
--- a/cfgov/unprocessed/apps/ccdb-search/css/main.less
+++ b/cfgov/unprocessed/apps/ccdb-search/css/main.less
@@ -31,12 +31,12 @@
   });
 
   // Overrides for design system.
-  .o-expandable_header .o-expandable_cue-close,
-  .o-expandable_header .o-expandable_cue-open {
+  .o-expandable__header .o-expandable__cue-close,
+  .o-expandable__header .o-expandable__cue-open {
     display: block !important;
   }
 
-  .o-expandable_label {
+  .o-expandable__label {
     margin-bottom: 0.83333333em !important;
   }
 
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
index eb15d9358fd..19e292b80e0 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
@@ -17,7 +17,7 @@
     margin-top: 45px;
   }
 
-  :not(.m-info-unit_heading-text) > h4 {
+  :not(.m-info-unit__heading-text) > h4 {
     .h3();
     margin-top: 30px;
   }
@@ -94,16 +94,16 @@
 
 // TODO: convert FIG secondary nav override abuse to modifiers on secondary nav.
 .o-fig_sidebar {
-  .o-secondary-nav_label {
+  .o-secondary-nav__label {
     width: 95%;
   }
 
   // When the sidebar collapses into an expandable,
   // make the expandable's content scrollable
-  .o-secondary-nav_content[data-open='true'] {
+  .o-secondary-nav__content[data-open='true'] {
     overflow-y: auto;
     height: 100vh;
-    > .o-secondary-nav_list {
+    > .o-secondary-nav__list {
       // Add a large buffer underneath to ensure mobile users
       // can use assistive technology like Reachability to access
       // items at the bottom of the list
@@ -113,17 +113,17 @@
 
   // Tablet and below.
   .respond-to-max(@bp-sm-max, {
-    .o-secondary-nav_link {
+    .o-secondary-nav__link {
       padding: unit( 10px / @base-font-size-px, em );
     }
   });
 
-  .o-secondary-nav_link {
+  .o-secondary-nav__link {
     padding-left: unit(24px / @base-font-size-px, em);
     text-indent: unit(-18px / @base-font-size-px, em);
   }
 
-  .o-secondary-nav_list__parents > .o-secondary-nav_link {
+  .o-secondary-nav__list--parents > .o-secondary-nav__link {
     padding-left: unit(10px / @base-font-size-px, em);
     text-indent: unit(-10px / @base-font-size-px, em);
   }
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
index 6d0a7eacade..9439b937170 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav-utils.js
@@ -11,7 +11,7 @@ let prevTarget;
  */
 function init() {
   appRoot = document.querySelector('main.o-fig');
-  navItems = appRoot.querySelectorAll('.o-secondary-nav_link[href]');
+  navItems = appRoot.querySelectorAll('.o-secondary-nav__link[href]');
 
   navItems = Array.from(navItems).reduce(
     (map, navItem) => map.set(navItem.getAttribute('href'), navItem),
@@ -20,7 +20,7 @@ function init() {
 
   navItemContainers = Array.from(navItems).reduce((map, [key, navItem]) => {
     const container =
-      navItem.closest('.o-secondary-nav_list__children') ||
+      navItem.closest('.o-secondary-nav__list__children') ||
       navItem.nextElementSibling;
     return map.set(key, container);
   }, new Map());
@@ -28,10 +28,10 @@ function init() {
   // TODO: Add these methods to SecondaryNav API to avoid adjusting
   // internal secondary nav state here.
   highlightNavItem = (target) =>
-    navItems.get(target).classList.add('o-secondary-nav_link__current');
+    navItems.get(target).classList.add('o-secondary-nav__link__current');
 
   unHighlightNavItem = (target) =>
-    navItems.get(target).classList.remove('o-secondary-nav_link__current');
+    navItems.get(target).classList.remove('o-secondary-nav__link__current');
 
   scrollNavItem = (target) =>
     navItems.get(target).scrollIntoView({
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
index a721666bfaf..5ed188ec907 100644
--- a/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/js/fig-sidenav.js
@@ -37,7 +37,7 @@ const defaultScrollOffset = (target) => {
  */
 const handleMobileNav = (event) => {
   event.preventDefault();
-  if (event.target.matches('.o-secondary-nav_link')) {
+  if (event.target.matches('.o-secondary-nav__link')) {
     secondaryNav.collapse();
 
     // Scrolling before the expandable closes causes jitters on some devices.
@@ -74,7 +74,7 @@ const init = (secondaryNavArg) => {
      See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API */
   if ('IntersectionObserver' in window) {
     appRoot
-      .querySelectorAll('.o-secondary-nav_list__children')
+      .querySelectorAll('.o-secondary-nav__list__children')
       .forEach((ul) => {
         hideElement(ul);
       });
@@ -99,7 +99,7 @@ const init = (secondaryNavArg) => {
 
   // Track clicks on the FIG sidebar nav links
   addEventListenerToSelector(
-    '.o-fig_sidebar .o-secondary-nav_link',
+    '.o-fig_sidebar .o-secondary-nav__link',
     'click',
     (event) => {
       analyticsSendEvent({
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/cfgov/unprocessed/apps/financial-well-being/css/main.less
index 646034a53ad..daecfbfc6f3 100644
--- a/cfgov/unprocessed/apps/financial-well-being/css/main.less
+++ b/cfgov/unprocessed/apps/financial-well-being/css/main.less
@@ -226,41 +226,41 @@
     display: inline-block !important;
   }
 
-  .o-expandable_content {
+  .o-expandable__content {
     /* Using !important to work around IE not handling the
          :not([aria-expanded="true"]) selector */
     height: auto !important;
   }
 
-  .o-expandable_content table {
+  .o-expandable__content table {
     height: 510px;
   }
 
-  .o-expandable_content thead {
+  .o-expandable__content thead {
     border-bottom: none;
   }
 
-  .o-expandable_content th:last-child {
+  .o-expandable__content th:last-child {
     width: 25% !important;
   }
 
-  .o-expandable_content tbody tr {
+  .o-expandable__content tbody tr {
     border-bottom: none;
   }
 
-  .content_main {
+  .content__main {
     display: block !important;
   }
 
-  .content_main * {
+  .content__main * {
     overflow: visible !important;
   }
 
   /* Hide various things when printing */
   .save-links,
-  .o-expandable_cues,
+  .o-expandable__cues,
   .comparison-chart_toggle,
-  .content_sidebar,
+  .content__sidebar,
   .o-footer {
     display: none !important;
   }
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
index 85b8c8b5309..2436798e20c 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
@@ -71,7 +71,7 @@
   &.o-featured-content-module {
     min-height: auto;
 
-    .o-featured-content-module_text {
+    .o-featured-content-module__text {
       width: auto;
     }
   }
diff --git a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
index 740be99c7cb..94fb0e08460 100644
--- a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
+++ b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
@@ -93,16 +93,16 @@
         transform: translateX( unit( -@grid_gutter-width / 2 / @base-font-size-px, em ) );
       });
 
-      .o-expandable_cues {
+      .o-expandable__cues {
         color: var(--black);
       }
     }
 
-    .o-expandable_content[data-open='true']::before {
+    .o-expandable__content[data-open='true']::before {
       border: none;
     }
 
-    .o-expandable_label {
+    .o-expandable__label {
       font-size: unit(16 / @base-font-size-px, em);
     }
 
@@ -114,7 +114,7 @@
       &.o-expandable__form-explainer-category-@{index} {
         background-color: @@tint;
 
-        .o-expandable_header {
+        .o-expandable__header {
           background-color: @@light;
         }
 
@@ -126,13 +126,13 @@
         }
 
         &.has-attention {
-          .o-expandable_header {
+          .o-expandable__header {
             background-color: @@med;
           }
         }
 
         &.has-attention {
-          .o-expandable_header {
+          .o-expandable__header {
             background-color: @@med;
           }
         }
@@ -144,11 +144,11 @@
     }
   }
 
-  .o-expandable_label {
+  .o-expandable__label {
     max-width: 80%;
   }
 
-  .o-expandable_cues {
+  .o-expandable__cues {
     display: block;
     width: 20%;
     text-align: right;
diff --git a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
index 3fb47784846..ba0e036a9c9 100644
--- a/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
+++ b/cfgov/unprocessed/apps/form-explainer/js/FormExplainer.js
@@ -120,7 +120,7 @@ class FormExplainer {
    */
   openAndScrollToExpandable(imageOverlay, targetExpandable) {
     const targetExpandableTarget = targetExpandable.querySelector(
-      '.o-expandable_header',
+      '.o-expandable__header',
     );
 
     window.setTimeout(() => {
@@ -280,7 +280,7 @@ class FormExplainer {
     /* When a form explainer expandable target has the focus,
      * update the image overlay.
      */
-    DT.bindEvents('.o-expandable_header', 'focus', (event) => {
+    DT.bindEvents('.o-expandable__header', 'focus', (event) => {
       const expandable = event.target.closest('.o-expandable__form-explainer');
       this.updateAttention(expandable, CSS.HOVER_HAS_ATTENTION);
     });
@@ -302,7 +302,7 @@ class FormExplainer {
      * update the image overlay position and hover styles.
      */
     DT.bindEvents(
-      '.o-expandable__form-explainer .o-expandable_header',
+      '.o-expandable__form-explainer .o-expandable__header',
       ['click', 'keypress'],
       (event) => {
         if (event.which === 13 || event.type === 'click') {
diff --git a/cfgov/unprocessed/apps/homepage/css/main.less b/cfgov/unprocessed/apps/homepage/css/main.less
index 87ebe721bb7..6001ae781f7 100644
--- a/cfgov/unprocessed/apps/homepage/css/main.less
+++ b/cfgov/unprocessed/apps/homepage/css/main.less
@@ -16,7 +16,7 @@
   margin-right: auto;
 }
 
-.content_main__flush-inner {
+.content__main__flush-inner {
   padding-top: 0;
   margin-top: 0;
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
index 4b505cabb19..1f03f9ca1b9 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
@@ -276,6 +276,6 @@
    Accessible bleedbar
    ========================================================================== */
 
-.content__bleedbar .content_wrapper::after {
+.content__bleedbar .content__wrapper::after {
   background-color: var(--gray-5);
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
index df773c1b99c..b31612add78 100755
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-theme-overrides.less
@@ -158,14 +158,14 @@
 @block__bg: var(--gray-10);
 
 // .content_main
-@content_main-border: var(--gray-40);
+@content__main-border: var(--gray-40);
 
 // .content_sidebar
-@content_sidebar-bg: var(--gray-10);
-@content_sidebar-border: var(--gray-40);
+@content__sidebar-bg: var(--gray-10);
+@content__sidebar-border: var(--gray-40);
 
 // .content_line
-@content_line: var(--gray-40);
+@content__line: var(--gray-40);
 
 /* cf-pagination
    ========================================================================== */
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
index 0399dc20565..915d904c610 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
@@ -1,6 +1,6 @@
 .college-costs {
   // remove border between sidebar and main content
-  & .content_main {
+  & .content__main {
     position: relative;
 
     &::after {
@@ -41,11 +41,11 @@
   }
 
   // Notification explanation doesn't need top margin unless it follows message
-  .m-notification_explanation {
+  .m-notification__explanation {
     margin-top: 0;
   }
 
-  .m-notification_message + .m-notification_explanation {
+  .m-notification__message + .m-notification__explanation {
     margin-top: unit(5px / @base-font-size-px, em);
   }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
index 48fe0e0ff4b..f3670389a0d 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
@@ -30,7 +30,7 @@
       display: block;
     }
 
-    .a-link_text,
+    .a-link__text,
     .inline {
       display: inline;
     }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
index d4340f295e3..9267c3ded90 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
@@ -6,22 +6,22 @@
     border-width: 0;
   });
 
-  .o-secondary-nav_list__parents {
+  .o-secondary-nav__list--parents {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       border-top: 1px solid var(--gray-20);
       border-left: 0;
       padding-left: 0;
 
-      > .o-secondary-nav_list-item__parent {
+      > .o-secondary-nav__list-item--parent {
         border-bottom: 1px solid var(--gray-20);
 
-        & > .o-secondary-nav_link {
+        & > .o-secondary-nav__link {
           font-size: unit( 18px / @base-font-size-px, em );
         }
       }
 
-      .o-secondary-nav_link {
+      .o-secondary-nav__link {
         border: none;
         font-weight: normal;
         color: var(--black);
@@ -38,23 +38,23 @@
         }
       }
 
-      .o-secondary-nav_list__children {
+      .o-secondary-nav__list__children {
         margin-top: 0;
         display: none;
       }
 
-      li.o-secondary-nav_list-item__parent[data-nav-is-active='True'] > a {
+      li.o-secondary-nav__list-item__parent[data-nav-is-active='True'] > a {
         font-weight: 600;
       }
 
       li[data-nav-is-active='True'],
       li[data-nav-is-open='True'] {
-        .o-secondary-nav_list__children {
+        .o-secondary-nav__list__children {
           display: block;
         }
       }
 
-      .o-secondary-nav_list-item__parent li[data-nav-is-active='True'] {
+      .o-secondary-nav__list-item__parent li[data-nav-is-active='True'] {
         .active-section {
           border-left: 3px solid var(--green);
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
index 312ba4d8cc7..829017127ea 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
@@ -97,12 +97,12 @@
    Tool intro
    ========================================================================== */
 
-.understanding-financial-aid-offer .m-hero_image {
+.understanding-financial-aid-offer .m-hero__image {
   background-image: url('/static/apps/paying-for-college/img/intro-195.png');
 }
 
 @media (min-resolution: 192dpi) {
-  .understanding-financial-aid-offer .m-hero_image {
+  .understanding-financial-aid-offer .m-hero__image {
     background-image: url('/static/apps/paying-for-college/img/intro-390.png');
   }
 }
@@ -1537,7 +1537,7 @@
     margin-top: unit(20px / @base-font-size-px, em);
   }
 
-  & + .content_line {
+  & + .content__line {
     display: none;
 
     // Tablet and above.
@@ -1802,7 +1802,7 @@
     });
   }
 
-  .content_line {
+  .content__line {
     display: none;
 
     // Tablet and above.
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
index 51cf97b4ea1..c98c7391992 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/app-view.js
@@ -161,7 +161,7 @@ function _addButtonListeners() {
  * @param {MouseEvent} event - Click event object.
  */
 function _handleDidThisHelpClick(event) {
-  const parent = event.target.closest('.o-form_fieldset');
+  const parent = event.target.closest('.o-form__fieldset');
   sendAnalyticsEvent(
     'Impact question click: ' + parent.dataset.impact,
     event.target.value,
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
index 0a15362f5ec..212950d708f 100644
--- a/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/college-costs/views/navigation-view.js
@@ -52,7 +52,7 @@ const navigationView = {
     );
     const activeElem = navItem.closest('li');
     const activeParent = activeElem.closest(
-      '.o-secondary-nav_list-item__parent',
+      '.o-secondary-nav__list-item__parent',
     );
 
     this._navListItems.forEach((elem) => {
@@ -66,7 +66,7 @@ const navigationView = {
     activeParent.setAttribute('data-nav-is-active', 'True');
     activeElem.setAttribute('aria-selected', true);
     activeParent
-      .querySelectorAll('.o-secondary-nav_list__children li')
+      .querySelectorAll('.o-secondary-nav__list__children li')
       .forEach((elem) => {
         elem.setAttribute('data-nav-is-active', 'True');
       });
@@ -133,7 +133,7 @@ const navigationView = {
     this._nextButton = body.querySelector(
       '.college-costs_tool-section_buttons .btn__next-step',
     );
-    this._contentSidebar = body.querySelector('.content_sidebar');
+    this._contentSidebar = body.querySelector('.content__sidebar');
     this._introduction = body.querySelector('.college-costs_intro-segment');
     this._getStartedBtn = body.querySelector(
       '.college-costs_intro-segment .btn__get-started',
diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
index f4dffa6b030..e1079819001 100755
--- a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
+++ b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
@@ -39,7 +39,7 @@ const questionView = {
       questionView.$nonsettlementBigQuestion.hide();
       $('#question_answer-no').hide();
       questionView.$optionsWrapper.addClass(
-        'get-options__settlement content_main',
+        'get-options__settlement content__main',
       );
       questionView.$transferCredits.remove();
       questionView.$exploreSchools.remove();
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
index 4a7245ba571..695dd3905c6 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
@@ -47,17 +47,17 @@
     &_applied {
       padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
     }
-    .o-multiselect_choices {
+    .o-multiselect__choices {
       display: none;
     }
   }
 
   .respond-to-min(@bp-lg-min, {
-    .content_sidebar {
+    .content__sidebar {
       width: 33% !important;
     }
 
-    .content_main {
+    .content__main {
       width: 67% !important;
     }
   });
@@ -71,7 +71,7 @@
   }
 
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       .o-expandable:nth-child(4n) {
         border-bottom: none;
       }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
index 76afa438149..3f5fea95962 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
@@ -22,7 +22,7 @@
 }
 
 .search_results {
-  .content_sidebar {
+  .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
@@ -39,8 +39,8 @@
       }
 
       // Override for left/right padding on the label and content.
-      .o-expandable_content,
-      .o-expandable_header {
+      .o-expandable__content,
+      .o-expandable__header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -50,11 +50,11 @@
       float: right;
     }
 
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
   }
-  .content_main {
+  .content__main {
     &::after {
       border: 0;
     }
@@ -101,10 +101,10 @@
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .content_main {
+    .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
index 95f4261b6f0..799e0b098ed 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
@@ -22,12 +22,12 @@
 
   // TODO - this will be updated to data-open='true' in newer expandables.
   .o-expandable_target__expanded {
-    .o-expandable_cue-close {
+    .o-expandable__cue-close {
       display: block;
     }
   }
   .o-expandable_target__collapsed {
-    .o-expandable_cue-open {
+    .o-expandable__cue-open {
       display: block;
     }
   }
@@ -35,7 +35,7 @@
 
 // Regs3K secondary nav sections
 .o-regs3k-sections {
-  .o-expandable_header {
+  .o-expandable__header {
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
       padding-left: 0;
@@ -44,7 +44,7 @@
     padding-right: 0;
   }
 
-  .o-expandable_content {
+  .o-expandable__content {
     padding: 0;
     // Desktop and above.
     .respond-to-min(@bp-med-min, {
@@ -72,7 +72,7 @@
   // TODO:
   // This is an override for the non-conforming use of o-expandable__padded
   // in the iRegs secondary nav. Remove this when that component is overhauled.
-  &.o-expandable__padded .o-expandable_label {
+  &.o-expandable__padded .o-expandable__label {
     padding: 0 !important;
   }
 
@@ -92,14 +92,14 @@
 
     padding: unit(10px / @base-font-size-px, em) 0
       unit(5px / @base-font-size-px, em);
-    .o-expandable_label {
+    .o-expandable__label {
       text-transform: uppercase;
     }
   }
 }
 
 // TODO: convert iRegs secondary nav override abuse to modifiers on secondary nav.
-.o-secondary-nav_link {
+.o-secondary-nav__link {
   color: var(--pacific);
 
   &__current {
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
index 40acdb01bdb..a49e812fbf3 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
@@ -29,13 +29,13 @@
 }
 
 .search_results {
-  .content_sidebar {
+  .content__sidebar {
     padding: 45px 15px 0;
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
 
-    .o-expandable_content,
-    .o-expandable_header {
+    .o-expandable__content,
+    .o-expandable__header {
       border: 0;
       padding: 0;
       &::before,
@@ -63,11 +63,11 @@
         margin-bottom: 0;
       }
     }
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
   }
-  .content_main {
+  .content__main {
     &::after {
       border: 0;
     }
@@ -114,10 +114,10 @@
 // Tablet and below.
 .respond-to-max(@bp-sm-max, {
   .search_results {
-    .content_sidebar {
+    .content__sidebar {
       padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
-    .content_main {
+    .content__main {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
     .results_count {
diff --git a/cfgov/unprocessed/apps/regulations3k/js/analytics.js b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
index dc02a99d985..c16ae6a059c 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/analytics.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/analytics.js
@@ -20,8 +20,8 @@ const sendEvent = (action, label, category) => {
  * @returns {HTMLElement|null} The expandable or null if it's not an expandable
  */
 const getExpandable = (event) => {
-  const el = event.target.closest('.o-expandable_header') || event.target;
-  if (el.classList.contains('o-expandable_header')) {
+  const el = event.target.closest('.o-expandable__header') || event.target;
+  if (el.classList.contains('o-expandable__header')) {
     return el;
   }
   return null;
diff --git a/cfgov/unprocessed/apps/regulations3k/js/index.js b/cfgov/unprocessed/apps/regulations3k/js/index.js
index f06ce4b3bbe..882b033eb5b 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/index.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/index.js
@@ -3,7 +3,7 @@ import { Expandable } from '@cfpb/cfpb-expandables';
 
 const navHeader = document.querySelector('.o-regs3k-navigation_header');
 const navItems = document.querySelector('.o-regs3k-sections');
-const regContent = document.querySelector('.regulations3k #content_main');
+const regContent = document.querySelector('.regulations3k #content__main');
 
 /**
  * toggleSecondaryNav - Show/hide the secondary nav on smaller screens
diff --git a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
index cd17c8ed911..afd1899d68c 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/permalinks-utils.js
@@ -1,7 +1,7 @@
 // Array that tracks paragraph positions
 let paragraphPositions;
 const regs3kMainContent = document.querySelector(
-  '.regulations3k #content_main',
+  '.regulations3k #content__main',
 );
 const regs3kWayfinder = document.querySelector('.o-regulations-wayfinder');
 let wayfinderOffset = 0;
diff --git a/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js b/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
index 1be504591de..32f313b7ca0 100644
--- a/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
+++ b/cfgov/unprocessed/apps/regulations3k/js/recent-notices.js
@@ -7,7 +7,7 @@ const processNotice = (notice) => {
   const li = document.createElement('li');
   a.href = encodeURI(notice.html_url);
   a.textContent = notice.title;
-  li.className = 'm-list_link';
+  li.className = 'm-list__link';
   li.appendChild(a);
   return li;
 };
diff --git a/cfgov/unprocessed/apps/retirement/css/claiming.less b/cfgov/unprocessed/apps/retirement/css/claiming.less
index 9c7065e7b76..6ec0f4eaf35 100644
--- a/cfgov/unprocessed/apps/retirement/css/claiming.less
+++ b/cfgov/unprocessed/apps/retirement/css/claiming.less
@@ -32,7 +32,7 @@
     margin-top: 15px;
     margin-bottom: 30px;
 
-    .content-l_col + .content-l_col {
+    .content-l__col + .content-l__col {
       margin-top: 0;
     }
   }
@@ -95,12 +95,12 @@
     padding: 0 0 30px 40px;
   }
 
-  #graph-container .content-l_col {
+  #graph-container .content-l__col {
     margin-top: 0;
     padding: 30px 0 60px;
   }
 
-  .step-one .content-l_col {
+  .step-one .content-l__col {
     vertical-align: bottom;
   }
 
@@ -311,7 +311,7 @@
     margin: 50px 0;
   }
 
-  .step-two .content-l_col.content-l_col-1-3 {
+  .step-two .content-l__col.content-l__col-1-3 {
     height: 100%;
   }
 
@@ -428,16 +428,16 @@
       padding-top: 30px;
     }
 
-    .step-one .content-l_col-2-3,
+    .step-one .content-l__col-2-3,
     .estimate-info {
       width: 100%;
     }
 
-    #graph-container .content-l_col-1-3 {
+    #graph-container .content-l__col-1-3 {
       width: 40%;
     }
 
-    #graph-container .content-l_col-2-3 {
+    #graph-container .content-l__col-2-3 {
       width: 60%;
     }
 
@@ -451,7 +451,7 @@
       margin-left: 0;
     }
 
-    .step-two .content-l_col {
+    .step-two .content-l__col {
       margin-right: 0;
       width: 100%;
     }
@@ -529,7 +529,7 @@
       margin-right: 0;
     }
 
-    .content-l_col {
+    .content-l__col {
       border: none;
       display: block;
       width: auto;
@@ -539,7 +539,7 @@
       padding-top: 30px;
     }
 
-    #step-one-form .content-l_col-1-3 {
+    #step-one-form .content-l__col-1-3 {
       max-width: 236px;
     }
 
@@ -562,7 +562,7 @@
       }
     }
 
-    #graph-container .content-l_col {
+    #graph-container .content-l__col {
       padding-top: 30px;
       padding-bottom: 30px;
     }
@@ -577,12 +577,12 @@
     }
 
     #step-one-form
-      .content-l_col.content-l_col-1-3
-      + .content-l_col.content-l_col-1-3 {
+      .content-l__col.content-l__col-1-3
+      + .content-l__col.content-l__col-1-3 {
       margin-top: 1.875em;
     }
 
-    .content-l_col.content-l_col-1-3 + .content-l_col.content-l_col-1-3 {
+    .content-l__col.content-l__col-1-3 + .content-l__col.content-l__col-1-3 {
       margin-top: 0;
     }
 
@@ -605,7 +605,7 @@
       margin-top: 0;
     }
 
-    .step-two .content-l_col {
+    .step-two .content-l__col {
       width: 100%;
     }
 
diff --git a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
index 4501be20208..a729c600c82 100644
--- a/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
+++ b/cfgov/unprocessed/apps/retirement/js/views/graph-view.js
@@ -282,7 +282,7 @@ function getYourEstimates() {
       }
     } else {
       $('.m-notification').slideDown();
-      $('.m-notification .m-notification_content').html(resp.note);
+      $('.m-notification .m-notification__content').html(resp.note);
       if (resp.current_age >= 71 || resp.current_age < 21) {
         highlightAgeFields(true);
       }
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
index 4b33b84abc0..7dfeec18558 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
@@ -29,7 +29,7 @@
 }
 
 // Position search result totals.
-#results-total .content-l_col {
+#results-total .content-l__col {
   display: inline-flex;
   min-width: 12em;
 
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
index 86823b62ca7..a59ac3b4069 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/no-js.less
@@ -1,6 +1,6 @@
 .no-js {
   /* Hide ROUT when JavaScript is disabled. */
-  .content_intro {
+  .content__intro {
     display: none;
   }
 }
diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
index 73669ce87db..4aa3d8cae5a 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), em);
   }
 });
 
 // @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), em);
   }
 
-  .m-list_item__has-icon {
+  .m-list__item__has-icon {
     display: flex;
     margin-left: 0;
 
@@ -205,7 +205,7 @@ html.js .o-filterable-list-results__partial {
   }
 
   @media only screen and (min-width: @bp-sm-min) {
-    // Override .o-table_cell__right-align on non-mobile devices
+    // Override .o-table__cell--right-align on non-mobile devices
     th,
     td {
       text-align: left;
@@ -315,7 +315,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/organisms/expandable.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
index 8b071e86344..fcb3d6a2cb0 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
@@ -16,10 +16,10 @@
 @expandable-focus: var(--black);
 
 // .o-expandable_label
-@expandable_label-text: var(--black);
+@expandable__label-text: var(--black);
 
 // .o-expandable_cues
-@expandable_cues-text: var(--pacific);
+@expandable__cues-text: var(--pacific);
 
 // .o-expandable modifiers
 @expandable__background: var(--gray-5);
@@ -27,12 +27,12 @@
 
 // Sizing variables
 
-// .o-expandable_cues
-@expandable_cues-font-size: @btn-font-size;
+// .o-expandable__cues
+@expandable__cues-font-size: @btn-font-size;
 
 // Timing variables
 
-// .o-expandable_content__transition
+// .o-expandable__content__transition
 @expandable__transition-speed: 0.25s;
 
 //
@@ -53,16 +53,16 @@
       outline-offset: 1px;
     }
 
-    .o-expandable_cue-close,
-    .o-expandable_cue-open {
+    .o-expandable__cue-close,
+    .o-expandable__cue-open {
       display: none;
     }
 
-    &__expanded .o-expandable_cue-close {
+    &__expanded .o-expandable__cue-close {
       display: block;
     }
 
-    &__collapsed .o-expandable_cue-open {
+    &__collapsed .o-expandable__cue-open {
       display: block;
     }
   }
@@ -133,14 +133,14 @@
     display: flex;
     justify-content: space-between;
 
-    // Using the button element with .o-expandable_header requires setting
+    // Using the button element with .o-expandable__header requires setting
     // an explicit width.
     button& {
       width: 100%;
       text-align: left;
     }
 
-    .o-expandable_label {
+    .o-expandable__label {
       // Grow to available width.
       flex-grow: 1;
     }
@@ -194,7 +194,7 @@
 }
 
 // Used when the set language reads right-to-left
-div[dir='rtl'] .o-expandable_header {
+div[dir='rtl'] .o-expandable__header {
   width: 100%;
   text-align: right;
 }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
index 4f54a765a23..d5027aa0ee1 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
@@ -3,12 +3,12 @@
     background-color: transparent;
   }
 
-  .m-hero_wrapper {
+  .m-hero__wrapper {
     margin: 0 -15px;
     padding-top: 0;
   }
 
-  .m-hero_image-wrapper {
+  .m-hero__image-wrapper {
     display: none;
 
     // Tablet and above.
@@ -37,7 +37,7 @@
     display: none;
   }
 
-  .content_sidebar {
+  .content__sidebar {
     padding: unit(15px / @base-font-size-px, em)
       unit(15px / @base-font-size-px, em) 0;
     border: 1px solid var(--gray-40);
@@ -50,8 +50,8 @@
       padding-top: unit( 30px / @base-font-size-px, em );
     });
 
-    .o-expandable_header,
-    .o-expandable_content {
+    .o-expandable__header,
+    .o-expandable__content {
       border: 0;
       padding: 0;
       overflow: hidden;
@@ -66,7 +66,7 @@
       }
     }
 
-    .o-expandable_header {
+    .o-expandable__header {
       padding: unit(13px / @base-font-size-px, em) 0;
       margin-bottom: 2px;
     }
@@ -86,7 +86,7 @@
       });
     }
 
-    .o-form_group {
+    .o-form__group {
       margin-bottom: 0;
     }
 
@@ -95,7 +95,7 @@
     }
   }
 
-  .content_main {
+  .content__main {
     border: 0;
 
     &::after {
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
index 65645331563..8fae1bb7270 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/Expandable.js
@@ -116,10 +116,10 @@ function getLabelText() {
 const Expandable = AtomicComponent.extend({
   ui: {
     base: '.o-expandable',
-    target: '.o-expandable_header',
-    content: '.o-expandable_content',
-    header: '.o-expandable_header',
-    label: '.o-expandable_label',
+    target: '.o-expandable__header',
+    content: '.o-expandable__content',
+    header: '.o-expandable__header',
+    label: '.o-expandable__label',
   },
 
   classes: {
@@ -130,7 +130,7 @@ const Expandable = AtomicComponent.extend({
   },
 
   events: {
-    'click .o-expandable_header': 'expandableClickHandler',
+    'click .o-expandable__header': 'expandableClickHandler',
   },
 
   transition: null,
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
index 79de875ac11..e81858f1635 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/ExpandableTransition.js
@@ -5,10 +5,10 @@ import { EventObserver } from '@cfpb/cfpb-atomic-component';
 // Exported constants.
 const CLASSES = {
   CSS_PROPERTY: 'max-height',
-  BASE_CLASS: 'o-expandable_content__transition',
-  EXPANDED: 'o-expandable_content__expanded',
-  COLLAPSED: 'o-expandable_content__collapsed',
-  OPEN_DEFAULT: 'o-expandable_content__onload-open',
+  BASE_CLASS: 'o-expandable__content__transition',
+  EXPANDED: 'o-expandable__content__expanded',
+  COLLAPSED: 'o-expandable__content__collapsed',
+  OPEN_DEFAULT: 'o-expandable__content__onload-open',
 };
 
 /* eslint-disable max-lines-per-function */
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
index abebe2a1573..dde50abbd7a 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-facets.js
@@ -10,7 +10,7 @@ const ExpandableFacets = AtomicComponent.extend({
     base: '.o-expandable-facets',
     target: '.o-expandable-facets_target',
     content: '.o-expandable-facets_content',
-    header: '.o-expandable_header',
+    header: '.o-expandable__header',
     facetCheckbox: '.o-expandable-facets_checkbox',
     facetLabel: '.o-expandable-facets_checkbox ~ .a-label',
   },
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
index d53290f3a48..b8d08667948 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/expandable-mobile.js
@@ -1,4 +1,4 @@
-const OPEN_DEFAULT = 'o-expandable_content__onload-open';
+const OPEN_DEFAULT = 'o-expandable__content__onload-open';
 const MOBILE_COLLAPSED_CLASS = 'o-expandable__mobile-collapsed';
 const MOBILE_WIDTH = 900;
 
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
index dac135c55db..d57483f2334 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/search.js
@@ -57,7 +57,7 @@ function attachHandlers() {
  * Ignore analytics for previous and next pagination buttons
  */
 function addDataGtmIgnore() {
-  const ignoreBtns = ['a.m-pagination_btn-next', 'a.m-pagination_btn-prev'];
+  const ignoreBtns = ['a.m-pagination__btn-next', 'a.m-pagination__btn-prev'];
 
   for (let i = 0; i < ignoreBtns.length; i++) {
     const btn = document.querySelector(ignoreBtns[i]);
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js b/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
index d65f7b1b476..63bd5429a1a 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/js/tdp-analytics.js
@@ -18,12 +18,12 @@ let sendEvent = (payload) => {
  * @returns {HTMLElement|null} The expandable or null if it's not an expandable
  */
 const getExpandable = (event) => {
-  let el = event.target.closest('.o-expandable_header');
+  let el = event.target.closest('.o-expandable__header');
   el = el ? el : event.target.closest('.o-expandable-facets_target');
   el = el ? el : event.target;
 
   if (
-    el.classList.contains('o-expandable_header') ||
+    el.classList.contains('o-expandable__header') ||
     el.classList.contains('o-expandable-facets_target')
   ) {
     return el;
@@ -61,7 +61,7 @@ const handleExpandableClick = (event) => {
     return;
   }
   const action = `${getExpandableState(expandable)} filter`;
-  let label = expandable.querySelector('span.o-expandable_label');
+  let label = expandable.querySelector('span.o-expandable__label');
   label = label ? label : expandable.querySelector('span[aria-hidden=true]');
   if (!label) {
     return;
@@ -147,23 +147,23 @@ const handlePaginationClick = (event) => {
     return;
   }
 
-  const isNextButton = paginator.classList.contains('m-pagination_btn-next');
-  const isPrevButton = paginator.classList.contains('m-pagination_btn-prev');
-  const isGoButton = paginator.classList.contains('m-pagination_btn-submit');
+  const isNextButton = paginator.classList.contains('m-pagination__btn-next');
+  const isPrevButton = paginator.classList.contains('m-pagination__btn-prev');
+  const isGoButton = paginator.classList.contains('m-pagination__btn-submit');
   const isDisabled = paginator.classList.contains('a-btn__disabled');
 
   if (isDisabled || (!isNextButton && !isPrevButton && !isGoButton)) {
     return;
   }
 
-  const currPageDom = searchContent.querySelector('.m-pagination_current-page');
+  const currPageDom = searchContent.querySelector('.m-pagination__current-page');
 
   // This is the actual page number we're on.
   const currPage = parseInt(currPageDom.getAttribute('value'), 10);
   // This is the page that's set in the page counter.
   const selPage = parseInt(currPageDom.value, 10);
   const ofTotalPagesTxt = searchContent.querySelectorAll(
-    '.m-pagination_label',
+    '.m-pagination__label',
   )[1].textContent;
   let usePage = currPage;
 
diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.less
index 42bc928c567..debc2d0a455 100644
--- a/cfgov/unprocessed/css/breadcrumbs.less
+++ b/cfgov/unprocessed/css/breadcrumbs.less
@@ -35,7 +35,7 @@
 });
 
 // TODO: When all full-width templates use layout-full.html this can be removed.
-.content_wrapper .m-breadcrumbs {
+.content__wrapper .m-breadcrumbs {
   margin-left: unit(15px / @base-font-size-px, rem);
 
   // Tablet only.
diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.less
index 7c76976a11c..3347cbf4276 100644
--- a/cfgov/unprocessed/css/enhancements/layout-1-3.less
+++ b/cfgov/unprocessed/css/enhancements/layout-1-3.less
@@ -73,7 +73,7 @@
 
           &:after {
             content: '';
-            border-left: 1px solid @content_main-border;
+            border-left: 1px solid @content__main-border;
             position: absolute;
             top: unit(30px / @base-font-size-px, rem );
             bottom: 0;
@@ -99,7 +99,7 @@
 
           &:after {
             content: '';
-            border-left: 1px solid @content_main-border;
+            border-left: 1px solid @content__main-border;
             position: absolute;
             top: unit(30px / @base-font-size-px, rem );
             bottom: 0;
@@ -115,7 +115,7 @@
   }
 
   // Optionally make the secondary nav sticky
-  .u-layout-grid_secondary-nav__sticky {
+  .u-layout-grid__secondary-nav__sticky {
     position: sticky;
     top: 0;
     align-self: start;
diff --git a/cfgov/unprocessed/css/enhancements/layout-2-1.less b/cfgov/unprocessed/css/enhancements/layout-2-1.less
index d7f17a2db6b..70412d0a81b 100644
--- a/cfgov/unprocessed/css/enhancements/layout-2-1.less
+++ b/cfgov/unprocessed/css/enhancements/layout-2-1.less
@@ -30,7 +30,7 @@
     // Mobile and above
     // TODO: The hero has a wrapper we need to ignore, so the direct reference to m-hero is a temp workaround.
     .m-hero,
-    .u-layout-grid_hero {
+    .u-layout-grid__hero {
       position: relative;
 
       // Create the hero background bleed.
diff --git a/cfgov/unprocessed/css/enhancements/layout-base.less b/cfgov/unprocessed/css/enhancements/layout-base.less
index f759a2978a6..7e16bfe47a4 100644
--- a/cfgov/unprocessed/css/enhancements/layout-base.less
+++ b/cfgov/unprocessed/css/enhancements/layout-base.less
@@ -92,14 +92,14 @@
 
   // Modifier to remove max-width value. Used on CCDB, for example.
   .u-layout-grid__full-width {
-    .u-layout-grid_wrapper {
+    .u-layout-grid__wrapper {
       max-width: initial;
     }
   }
 
   // Set default line width.
-  .u-layout-grid_main,
-  .u-layout-grid_content-intro {
+  .u-layout-grid__main,
+  .u-layout-grid__content-intro {
     dd,
     dt,
     h3,
@@ -114,7 +114,7 @@
   }
 
   // "Breakout" container that bleeds out of the grid to the screen edge.
-  .u-layout-grid_breakout {
+  .u-layout-grid__breakout {
     width: 100vw;
     position: relative;
     left: 50%;
diff --git a/cfgov/unprocessed/css/enhancements/layout.less b/cfgov/unprocessed/css/enhancements/layout.less
index b6b10e0d05e..d2f5f4b9c0c 100644
--- a/cfgov/unprocessed/css/enhancements/layout.less
+++ b/cfgov/unprocessed/css/enhancements/layout.less
@@ -29,8 +29,8 @@
   });
 }
 
-.content-l_col {
-  &.content-l_col-1 + &.content-l_col-1 {
+.content-l__col {
+  &.content-l__col-1 + &.content-l__col-1 {
     margin-top: 0;
   }
 }
@@ -42,7 +42,7 @@
 // Center content and bleed full-width images into gutters
 // Used on our story pages
 .content__center-image-bleed {
-  .u-layout-grid_main {
+  .u-layout-grid__main {
     max-width: 41.875rem;
     margin-left: auto;
     margin-right: auto;
diff --git a/cfgov/unprocessed/css/enhancements/typography.less b/cfgov/unprocessed/css/enhancements/typography.less
index f0c24ad01c0..da329d557d6 100644
--- a/cfgov/unprocessed/css/enhancements/typography.less
+++ b/cfgov/unprocessed/css/enhancements/typography.less
@@ -23,6 +23,6 @@ dd {
   .heading-5();
 }
 
-.a-link_text {
+.a-link__text {
   overflow-wrap: break-word;
 }
diff --git a/cfgov/unprocessed/css/images.less b/cfgov/unprocessed/css/images.less
index 2a3b5c58107..7d7ba8068dc 100644
--- a/cfgov/unprocessed/css/images.less
+++ b/cfgov/unprocessed/css/images.less
@@ -12,10 +12,10 @@
 // Styles for adding radial masks to images.
 // Used by info unit groups.
 
-.u-image_border-circle {
+.u-image__border-circle {
   border-radius: 50%;
 }
 
-.u-image_border-rounded {
+.u-image__border-rounded {
   border-radius: 12.5%;
 }
diff --git a/cfgov/unprocessed/css/molecules/autocomplete.less b/cfgov/unprocessed/css/molecules/autocomplete.less
index 4996e305e77..e8f1b025cf9 100644
--- a/cfgov/unprocessed/css/molecules/autocomplete.less
+++ b/cfgov/unprocessed/css/molecules/autocomplete.less
@@ -6,7 +6,7 @@
   }
 }
 
-.m-autocomplete_results {
+.m-autocomplete__results {
   box-sizing: border-box;
   width: 100%;
   // Restrict height of autocomplete suggestions
@@ -26,7 +26,7 @@
     margin-bottom: 0;
 
     &:hover,
-    &.m-autocomplete_selected {
+    &.m-autocomplete__selected {
       background-color: @block__bg;
     }
 
diff --git a/cfgov/unprocessed/css/molecules/global-eyebrow.less b/cfgov/unprocessed/css/molecules/global-eyebrow.less
index a18dff6e58e..84faa874684 100644
--- a/cfgov/unprocessed/css/molecules/global-eyebrow.less
+++ b/cfgov/unprocessed/css/molecules/global-eyebrow.less
@@ -8,7 +8,7 @@
   &_languages {
     display: inline;
 
-    .m-list_item:not(:last-child) {
+    .m-list__item:not(:last-child) {
       margin-right: unit(7px / 12px, em);
       margin-bottom: 0;
 
@@ -39,13 +39,13 @@
       float: left;
     }
 
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__languages {
       text-align: right;
     }
 
     // Tablet and below.
     .respond-to-max(@bp-sm-max, {
-      .m-global-eyebrow_actions {
+      .m-global-eyebrow__actions {
         display: none;
       }
       /* Prevent spacing issues since the languages aren't displayed */
@@ -61,7 +61,7 @@
     padding-right: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
     padding-bottom: unit(@grid_gutter-width / @base-font-size-px, rem);
 
-    .m-global-eyebrow_actions {
+    .m-global-eyebrow__actions {
       padding: 0;
       border: 0;
       margin: 0;
@@ -69,13 +69,13 @@
       text-align: left;
     }
 
-    .m-global-eyebrow_phone,
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__phone,
+    .m-global-eyebrow__languages {
       display: block;
       padding-left: 0;
     }
 
-    .m-global-eyebrow_phone {
+    .m-global-eyebrow__phone {
       border-top: 1px solid var(--gray-40);
       padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
 
@@ -86,10 +86,10 @@
       }
     }
 
-    .m-global-eyebrow_languages {
+    .m-global-eyebrow__languages {
       margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
 
-      .m-list_item {
+      .m-list__item {
         // Apply padding to the language links to increase their touch area.
         a {
           display: block;
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.less
index d8d9c05a763..112634d5ea0 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.less
@@ -76,11 +76,11 @@
         background: var(--gray-10);
         border-left: 1px solid var(--gray-40);
 
-        .m-global-search_trigger-open-label {
+        .m-global-search__trigger-open-label {
           display: none;
         }
 
-        .m-global-search_trigger-close-label {
+        .m-global-search__trigger-close-label {
           display: block;
         }
       }
@@ -174,13 +174,13 @@
         padding-right: 0.25em;
       }
 
-      .o-form__input-w-btn_input-container {
+      .o-form--input-w-btn__input-container {
         display: flex;
         width: initial;
         flex: 0 1 75%;
       }
 
-      .o-form__input-w-btn_btn-container {
+      .o-form--input-w-btn__btn-container {
         width: initial;
         border-left: 0;
         flex: 1 1 25%;
diff --git a/cfgov/unprocessed/css/molecules/info-unit.less b/cfgov/unprocessed/css/molecules/info-unit.less
index 7be8f6b9b9a..16f2cb29980 100644
--- a/cfgov/unprocessed/css/molecules/info-unit.less
+++ b/cfgov/unprocessed/css/molecules/info-unit.less
@@ -43,13 +43,13 @@
 .u-info-unit-base__inline( @img_size ) {
   .u-clearfix();
 
-  .m-info-unit_image {
+  .m-info-unit__image {
     float: left;
     margin-bottom: 0;
   }
 
-  .m-info-unit_content,
-  .m-info-unit_heading-text {
+  .m-info-unit__content,
+  .m-info-unit__heading-text {
     margin-left: unit(
       (@img_size + @grid_gutter-width) / @base-font-size-px,
       em
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.less b/cfgov/unprocessed/css/molecules/related-metadata.less
index 66f8fbcb529..60a23e57eaa 100644
--- a/cfgov/unprocessed/css/molecules/related-metadata.less
+++ b/cfgov/unprocessed/css/molecules/related-metadata.less
@@ -3,8 +3,8 @@
 @bullet-font-size__em: unit(15px / @base-font-size-px, em);
 
 .m-related-metadata {
-  .m-list_link {
-    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
+  .m-list__link {
+    .u-link--colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
   }
 
   // Tablet only.
@@ -14,7 +14,7 @@
   });
 }
 
-.m-related-metadata_item-container {
+.m-related-metadata__item-container {
   &:not(:last-child) {
     margin-bottom: @margin_half__em * 2;
   }
@@ -24,7 +24,7 @@
   }
 }
 
-.m-related-metadata_status {
+.m-related-metadata__status {
   div {
     margin-bottom: 1.25em;
   }
@@ -35,10 +35,10 @@
   }
 }
 
-.m-related-metadata_topics {
+.m-related-metadata__topics {
   line-height: 1em;
 
-  .m-list_link {
+  .m-list__link {
     .h6();
     position: relative;
     margin: 0 0 0 @bullet-font-size__em;
@@ -59,7 +59,7 @@
   }
 
   .respond-to-max(@bp-sm-min, {
-    .m-list_link {
+    .m-list__link {
       margin-left: 0;
 
       &:before {
diff --git a/cfgov/unprocessed/css/molecules/related-posts.less b/cfgov/unprocessed/css/molecules/related-posts.less
index 8e582f25cf0..97581b60cb8 100644
--- a/cfgov/unprocessed/css/molecules/related-posts.less
+++ b/cfgov/unprocessed/css/molecules/related-posts.less
@@ -1,6 +1,6 @@
 @gap: unit(15px / @base-font-size-px, rem);
 
-.m-related-posts_list {
+.m-related-posts__list {
   display: grid;
   column-gap: @gap * 2;
   row-gap: @gap;
@@ -11,22 +11,22 @@
     minmax(230px, calc(50% - @gap))
   );
 
-  .m-list_link {
-    .u-link__colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
-    .u-link__no-border();
+  .m-list__link {
+    .u-link--colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
+    .u-link--no-border();
 
     &:hover {
       border-bottom: 1px dotted;
     }
   }
 
-  .m-list_item .a-date {
+  .m-list__item .a-date {
     margin-bottom: 0;
     margin-top: unit(10px / @base-font-size-px, rem);
   }
 }
 
-.m-related-posts_list-container {
+.m-related-posts__list-container {
   margin-bottom: @gap * 2;
 
   &:last-child {
@@ -36,7 +36,7 @@
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
   // Always remove columns at mobile size.
-  .m-related-posts_list {
+  .m-related-posts__list {
     grid-template-columns: initial;
   }
 });
@@ -45,7 +45,7 @@
 .respond-to-min(@bp-med-min, {
   // If in the sidebar at desktop sizes, do not break into columns.
   // Related posts also appear in the pre-footer, so we exclude that here.
-  .u-layout-grid_sidebar .m-related-posts_list {
+  .u-layout-grid__sidebar .m-related-posts__list {
     grid-template-columns: initial;
   }
 });
diff --git a/cfgov/unprocessed/css/molecules/social-media.less b/cfgov/unprocessed/css/molecules/social-media.less
index 9cf18282c8f..6e9f4ca40fb 100644
--- a/cfgov/unprocessed/css/molecules/social-media.less
+++ b/cfgov/unprocessed/css/molecules/social-media.less
@@ -19,12 +19,12 @@
 
   // Only for elements in "share" (m-social-media__share) section.
   &__share {
-    .m-social-media_heading {
+    .m-social-media__heading {
       .heading-5();
       margin: auto 0;
     }
 
-    .m-social-media_print {
+    .m-social-media__print {
       padding-left: unit(10px / @base-font-size-px, rem);
       border-left: 1px solid var(--black);
     }
@@ -43,7 +43,7 @@
 
 // Right-to-left (RTL) layout.
 html[lang='ar'] .m-social-media__share {
-  .m-social-media_print {
+  .m-social-media__print {
     padding-left: 0;
     border-left: none;
     padding-right: unit(10px / @base-font-size-px, rem);
@@ -51,7 +51,7 @@ html[lang='ar'] .m-social-media__share {
   }
 
   // TODO: Scrutinize usage of unordered list and see if it can be removed.
-  .m-list_item:first-child {
+  .m-list__item:first-child {
     margin-right: 0;
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/tags.less b/cfgov/unprocessed/css/molecules/tags.less
index e9ec563cf47..575ac6ab54e 100755
--- a/cfgov/unprocessed/css/molecules/tags.less
+++ b/cfgov/unprocessed/css/molecules/tags.less
@@ -43,7 +43,7 @@
     margin-left: @bullet-font-size;
   }
 
-  a.m-tags_tag {
+  a.m-tags__tag {
     .u-link__colors(
       var(--gray), var(--gray), var(--gray), var(--gray), var(--gray),
       var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80)
@@ -52,7 +52,7 @@
 
   // Negate the border of the sibling when hovering.
   &_item:hover + &_item {
-    a.m-tags_tag {
+    a.m-tags__tag {
       border-top: none;
     }
   }
@@ -68,7 +68,7 @@
       border-top: 1px dotted var(--gold-80);
     }
 
-    a.m-tags_tag {
+    a.m-tags__tag {
       border-bottom-width: 0;
 
       &:hover {
@@ -80,7 +80,7 @@
     // Add bottom border to last tag.
     &_item:last-child {
       // This needs to appear after border-bottom-width: 0;
-      .m-tags_tag {
+      .m-tags__tag {
         border-bottom: 1px dotted var(--gold-80);
       }
     }
diff --git a/cfgov/unprocessed/css/on-demand/ask.less b/cfgov/unprocessed/css/on-demand/ask.less
index ca784800d11..172e0b5f059 100644
--- a/cfgov/unprocessed/css/on-demand/ask.less
+++ b/cfgov/unprocessed/css/on-demand/ask.less
@@ -129,12 +129,12 @@
   }
 
   .respond-to-min(@bp-lg-min, {
-    .content_sidebar {
+    .content__sidebar {
       padding-top: 0;
     }
   });
 
-  .o-expandable_cue-close {
+  .o-expandable__cue-close {
     display: none;
   }
 
@@ -193,7 +193,7 @@
     font-weight: 500;
   }
 
-  .m-list_item__last {
+  .m-list__item__last {
     padding-top: unit(7px / @base-font-size-px, em);
   }
 
@@ -206,7 +206,7 @@
   // the width of that button to auto lets it overrun its container if needed.
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .o-form__input-w-btn_btn-container .a-btn {
+    .o-form--input-w-btn__btn-container .a-btn {
       width: auto;
     }
   });
@@ -292,7 +292,7 @@
   // of that button to auto lets it overrun its container if needed.
   // Desktop and above.
   .respond-to-min(@bp-med-min, {
-    .o-form__input-w-btn_btn-container .a-btn {
+    .o-form--input-w-btn__btn-container .a-btn {
       width: auto;
     }
   });
diff --git a/cfgov/unprocessed/css/on-demand/car-buying-guide.less b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
index 721ed50dbb0..ef7fc217fa6 100644
--- a/cfgov/unprocessed/css/on-demand/car-buying-guide.less
+++ b/cfgov/unprocessed/css/on-demand/car-buying-guide.less
@@ -1,7 +1,7 @@
 @import (reference) '../main.less';
 
 .respond-to-print( {
-  .content_main {
+  .content__main {
     border-width: 0 !important;
     margin: 0 !important;
     display: block !important;
@@ -26,7 +26,7 @@
 
   header,
   footer,
-  .content_sidebar,
+  .content__sidebar,
   .cbg-checklist {
     display: none !important;
   }
diff --git a/cfgov/unprocessed/css/on-demand/error.less b/cfgov/unprocessed/css/on-demand/error.less
index a659fac6da8..e8a2d57ed18 100644
--- a/cfgov/unprocessed/css/on-demand/error.less
+++ b/cfgov/unprocessed/css/on-demand/error.less
@@ -14,7 +14,7 @@
   .respond-to-min(@bp-sm-min, {
     flex-direction: row;
 
-    .m-list_item + .m-list_item {
+    .m-list__item + .m-list__item {
       border-left: 1px solid var(--white);
       padding-left: unit( 30px / @base-font-size-px, rem);
     }
diff --git a/cfgov/unprocessed/css/on-demand/job_listing_list.less b/cfgov/unprocessed/css/on-demand/job_listing_list.less
index 249cb2db8fd..352391e4011 100644
--- a/cfgov/unprocessed/css/on-demand/job_listing_list.less
+++ b/cfgov/unprocessed/css/on-demand/job_listing_list.less
@@ -3,13 +3,13 @@
 .m-jobs-list .m-list__links {
   // Tablet and above.
   .respond-to-min(@bp-sm-min, {
-    .m-list_item + .m-list_item {
+    .m-list__item + .m-list__item {
       margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
     }
   });
 
-  .m-list_link-subtext {
-    .u-link__colors( var(--black) );
+  .m-list__link-subtext {
+    .u-link--colors( var(--black) );
     display: block;
     margin-top: unit(2px / @base-font-size-px, em);
     font-weight: normal;
diff --git a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
index c9c800618ef..4f323f6bfc3 100644
--- a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
+++ b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
@@ -169,7 +169,7 @@
     margin-left: 0;
     padding: 0;
   }
-  .content-l_col {
+  .content-l__col {
     border-left-width: 0;
   }
 
diff --git a/cfgov/unprocessed/css/organisms/ask-search.less b/cfgov/unprocessed/css/organisms/ask-search.less
index db13bd939e3..b4db01712d8 100644
--- a/cfgov/unprocessed/css/organisms/ask-search.less
+++ b/cfgov/unprocessed/css/organisms/ask-search.less
@@ -4,7 +4,7 @@
    ========================================================================== */
 
 // TODO: Reconcile this with the input with button in the Design System.
-.o-form__input-w-btn_btn-container {
+.o-form--input-w-btn__btn-container {
   // Only attach the button to the input at tablet/desktop sizes.
   .respond-to-min(480px, {
     border-left: 0;
diff --git a/cfgov/unprocessed/css/organisms/filterable-list-controls.less b/cfgov/unprocessed/css/organisms/filterable-list-controls.less
index e0bdc424d3d..b6be86825e8 100644
--- a/cfgov/unprocessed/css/organisms/filterable-list-controls.less
+++ b/cfgov/unprocessed/css/organisms/filterable-list-controls.less
@@ -12,7 +12,7 @@
   // TODO: While this fixes the multiselect drop-down being cropped, it does
   //       change the UX. A method to support overflowing the expandable bounds
   //       while still retaining performance optimizations should be explored.
-  .o-multiselect_fieldset {
+  .o-multiselect__fieldset {
     position: static;
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/footer.less b/cfgov/unprocessed/css/organisms/footer.less
index 714aef4a190..7f347f65ddd 100644
--- a/cfgov/unprocessed/css/organisms/footer.less
+++ b/cfgov/unprocessed/css/organisms/footer.less
@@ -4,7 +4,7 @@
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
   padding-top: unit(50px / @base-font-size-px, em);
-  // There is a 10px margin-bottom on the  last .o-footer_list li's, plus the
+  // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
   padding-bottom: unit(50px / @base-font-size-px, em);
   border-top: 5px solid var(--green);
@@ -13,7 +13,7 @@
   &_nav-list {
     .m-list__links();
 
-    .m-list_link {
+    .m-list__link {
       font-size: unit(18px / @base-font-size-px, em);
       .u-link__colors( var(--black) );
 
@@ -31,7 +31,7 @@
       });
     }
 
-    .m-list_link.m-list_link__disabled {
+    .m-list__link.m-list__link__disabled {
       border-bottom: 1px dotted;
 
       // Desktop and above.
@@ -44,8 +44,8 @@
   &_list {
     .m-list__links();
 
-    .m-list_link {
-      .u-link__colors( var(--gray-dark) );
+    .m-list__link {
+      .u-link--colors( var(--gray-dark) );
     }
   }
 
@@ -53,7 +53,7 @@
     position: relative;
     margin-bottom: unit(45px / @base-font-size-px, em);
 
-    .o-footer_top-button {
+    .o-footer__top-button {
       display: block;
       width: 100%;
       text-align: center;
@@ -63,7 +63,7 @@
       margin: -2em auto 2em;
     }
 
-    .o-footer_nav-list {
+    .o-footer__nav-list {
       margin-bottom: 0;
     }
 
@@ -73,14 +73,14 @@
       margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
       border-bottom: 1px solid var(--gray-40);
 
-      .o-footer_top-button {
+      .o-footer__top-button {
         display: none;
       }
 
-      .o-footer_nav-list {
+      .o-footer__nav-list {
         .m-list__horizontal();
 
-        .m-list_item {
+        .m-list__item {
           margin-bottom: 0;
         }
       }
@@ -96,16 +96,16 @@
 
   // TODO: Refactor to use Design System Layout package.
   &-middle-left {
-    .o-footer_list {
+    .o-footer__list {
       margin: 0;
     }
 
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       // Fix doubled border in mobile view.
-      .o-footer_col:nth-child( n+2 ) {
-        .o-footer_list {
-          .m-list_item .m-list_link {
+      .o-footer__col:nth-child( n+2 ) {
+        .o-footer__list {
+          .m-list__item .m-list__link {
             border-top-width: 0;
           }
         }
@@ -118,7 +118,7 @@
       border-right: 1px solid var(--gray-40);
       border-left: 0;
 
-      .o-footer_col {
+      .o-footer__col {
         .grid_column(6);
         border-left: 0;
         border-right: 0;
@@ -138,8 +138,8 @@
     // Mobile only.
     .respond-to-max(@bp-xs-max, {
       // Fix doubled border in mobile view.
-      .o-footer_list {
-        .m-list_item .m-list_link {
+      .o-footer__list {
+        .m-list__item .m-list__link {
           border-top-width: 0;
         }
       }
@@ -149,7 +149,7 @@
     .respond-to-min(@bp-sm-min, {
       .grid_column(4);
 
-      .o-footer_list {
+      .o-footer__list {
         padding-left: @grid_gutter-width;
         padding-right: @grid_gutter-width;
       }
diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.less
index 0ed54e92da4..8cb28174716 100644
--- a/cfgov/unprocessed/css/organisms/header.less
+++ b/cfgov/unprocessed/css/organisms/header.less
@@ -117,7 +117,7 @@
 
 // Move logo on print.
 .respond-to-print( {
-  .o-header_logo {
+  .o-header__logo {
     // Mega menu is hidden, so we need to remove logo offset.
     margin-left: 15px !important;
   }
diff --git a/cfgov/unprocessed/css/organisms/info-unit-group.less b/cfgov/unprocessed/css/organisms/info-unit-group.less
index e635d509d75..130ea394cb1 100644
--- a/cfgov/unprocessed/css/organisms/info-unit-group.less
+++ b/cfgov/unprocessed/css/organisms/info-unit-group.less
@@ -1,4 +1,4 @@
-.u-grid_column__top-divider {
+.u-grid__column--top-divider {
   margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
   border-left-width: @grid_gutter-width / 2;
 
@@ -23,21 +23,21 @@
     margin-top: 0;
   }
 
-  .content-l_col-1 + .content-l_col-1 {
+  .content-l__col-1 + .content-l__col-1 {
     // Adds margin top to info units that follow another
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em) !important;
   }
 
   .content-l__top-divider {
-    .content-l_col-1 + .content-l_col-1 {
+    .content-l__col-1 + .content-l__col-1 {
       // Adds top divider between single-column info units
-      .u-grid_column__top-divider();
+      .u-grid__column--top-divider();
     }
   }
 
   .content-l__top-divider + .content-l__top-divider {
     // Adds top divider between multi-column info unit rows
-    .u-grid_column__top-divider();
+    .u-grid__column--top-divider();
     margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
   }
 
@@ -45,8 +45,8 @@
   .respond-to-max(@bp-xs-max, {
     // Adds top divider between info unit cols on small screens
     .content-l__top-divider {
-      .content-l_col + .content-l_col {
-        .u-grid_column__top-divider();
+      .content-l__col + .content-l__col {
+        .u-grid__column--top-divider();
         margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
       }
     }
@@ -57,15 +57,15 @@
     .content-l__top-divider + .content-l__top-divider {
       // Matches top divider width to cols on larger screens
       &:before {
-        // Overrides .u-grid_column__top-divider() margin-left !important rule
+        // Overrides .u-grid__column--top-divider() margin-left !important rule
         margin-left: 15px !important;
         margin-right: 15px;
         width: auto;
       }
     }
-    .content-l_col-1:nth-of-type( n+2 ),
-    .content-l_col-1-2:nth-of-type( n+3 ),
-    .content-l_col-1-3:nth-of-type( n+4 ) {
+    .content-l__col-1:nth-of-type( n+2 ),
+    .content-l__col-1-2:nth-of-type( n+3 ),
+    .content-l__col-1-3:nth-of-type( n+4 ) {
       // Adds margin-top to info units that begin a new row in their group
       margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
     }
diff --git a/cfgov/unprocessed/css/organisms/mega-menu.less b/cfgov/unprocessed/css/organisms/mega-menu.less
index 40db09e69de..061e5f4b41e 100644
--- a/cfgov/unprocessed/css/organisms/mega-menu.less
+++ b/cfgov/unprocessed/css/organisms/mega-menu.less
@@ -2,7 +2,7 @@
 @import (less)
   '@cfpb/cfpb-atomic-component/src/utilities/transition/transition.less';
 
-// Each content level adds a depth-specific class, such as o-mega-menu_content-1, o-mega-menu_content-2, etc.
+// Each content level adds a depth-specific class, such as o-mega-menu__content-1, o-mega-menu__content-2, etc.
 
 @mobile_trigger_ht__px: 54px;
 
@@ -252,7 +252,7 @@ body {
       align-items: baseline;
 
       // Hide link bottom line from Design System link styles.
-      & .a-link_text {
+      & .a-link__text {
         border-bottom-width: 0;
       }
 
@@ -335,11 +335,11 @@ body {
         outline: 1px dotted var(--black);
       }
 
-      .o-mega-menu_trigger-close {
+      .o-mega-menu__trigger-close {
         display: none;
       }
 
-      .o-mega-menu_trigger-open {
+      .o-mega-menu__trigger-open {
         display: block;
       }
 
@@ -349,11 +349,11 @@ body {
         border-right: 1px solid var(--gray-40);
         color: var(--black);
 
-        .o-mega-menu_trigger-close {
+        .o-mega-menu__trigger-close {
           display: block;
         }
 
-        .o-mega-menu_trigger-open {
+        .o-mega-menu__trigger-open {
           display: none;
         }
       }
@@ -509,7 +509,7 @@ body {
       //       Investigate if it can be combined.
       // Remove final border line of last list item.
       &-list-group:last-child {
-        .o-mega-menu_content-3-item:last-child {
+        .o-mega-menu__content-3-item:last-child {
           border-bottom: none;
         }
       }
@@ -579,7 +579,7 @@ body {
     // 1st-level menu - Desktop.
     &_content-1 {
       &[data-open="true"] {
-        .o-mega-menu_content-1-wrapper {
+        .o-mega-menu__content-1-wrapper {
           display: block;
           transform: translateY( 0 );
         }
@@ -603,7 +603,7 @@ body {
         display: table-cell;
 
         .no-js &:hover {
-          .o-mega-menu_content-2 {
+          .o-mega-menu__content-2 {
             display: block;
           }
         }
@@ -767,7 +767,7 @@ body {
       &[data-open="true"] {
         overflow: visible;
 
-        .o-mega-menu_content-2-wrapper {
+        .o-mega-menu__content-2-wrapper {
           display: block;
         }
       }
@@ -957,7 +957,7 @@ body {
   }
 
   // Hide the ">" arrow icon (used on mobile view).
-  .o-mega-menu_content-link-icon-post {
+  .o-mega-menu__content-link-icon-post {
     display: none !important;
   }
 }
@@ -970,16 +970,16 @@ body {
 });
 
 // The following three rules prevent mega-menu linebreak shenanigans
-.o-mega-menu_content-2-item__has-icon .o-mega-menu_content-2-link {
+.o-mega-menu__content-2-item__has-icon .o-mega-menu__content-2-link {
   padding-right: 0;
 }
 
-.o-mega-menu_content-2-item__has-icon {
+.o-mega-menu__content-2-item__has-icon {
   .cf-icon-svg:nth-child(3) {
     margin-left: -20px;
     transform: translateX(25px);
   }
-  .a-link_text:nth-last-child(2) {
+  .a-link__text:nth-last-child(2) {
     display: inline-block;
     margin-left: -5px;
     transform: translateX(5px);
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.less
index 8db65215097..47aca9326b3 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.less
@@ -15,23 +15,23 @@
       outline-offset: 1px;
     }
 
-    .o-secondary-nav_cue-close,
-    .o-secondary-nav_cue-open {
+    .o-secondary-nav__cue-close,
+    .o-secondary-nav__cue-open {
       display: none;
     }
 
-    &[aria-expanded='false'] .o-secondary-nav_cue-open {
+    &[aria-expanded='false'] .o-secondary-nav__cue-open {
       display: block;
     }
 
-    &[aria-expanded='true'] .o-secondary-nav_cue-close {
+    &[aria-expanded='true'] .o-secondary-nav__cue-close {
       display: block;
     }
   }
 
-  // Using the button element with .o-secondary-nav_header requires setting
+  // Using the button element with .o-secondary-nav__header requires setting
   // an explicit width.
-  button.o-secondary-nav_header {
+  button.o-secondary-nav__header {
     background-color: transparent;
     width: 100%;
     text-align: left;
@@ -184,7 +184,7 @@
 // Right-to-left (RTL) layout.
 html[lang='ar'] {
   .o-secondary-nav {
-    button.o-secondary-nav_header {
+    button.o-secondary-nav__header {
       text-align: right;
     }
 
diff --git a/cfgov/unprocessed/css/organisms/sidebar-breakout.less b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
index 639a0355528..725b66f393d 100644
--- a/cfgov/unprocessed/css/organisms/sidebar-breakout.less
+++ b/cfgov/unprocessed/css/organisms/sidebar-breakout.less
@@ -1,6 +1,6 @@
 @margin__em: unit(@grid_gutter-width / @base-font-size-px, em);
-@o-sidebar-breakout_img-width: 300px;
-@o-sidebar-breakout_img-height: 170px;
+@o-sidebar-breakout__img-width: 300px;
+@o-sidebar-breakout__img-height: 170px;
 
 .o-sidebar-breakout {
   &_img {
@@ -12,17 +12,17 @@
   }
 
   &_img-container {
-    max-width: @o-sidebar-breakout_img-width;
-    max-height: @o-sidebar-breakout_img-height;
+    max-width: @o-sidebar-breakout__img-width;
+    max-height: @o-sidebar-breakout__img-height;
   }
 
   &_img-container__round {
     width: auto;
 
-    .o-sidebar-breakout_img {
+    .o-sidebar-breakout__img {
       padding: 0;
-      height: @o-sidebar-breakout_img-height;
-      width: @o-sidebar-breakout_img-height;
+      height: @o-sidebar-breakout__img-height;
+      width: @o-sidebar-breakout__img-height;
     }
   }
 
@@ -58,7 +58,7 @@
 
 // Desktop and above.
 .respond-to-min(@bp-med-min, {
-  .o-sidebar-breakout_col:last-child {
+  .o-sidebar-breakout__col:last-child {
     padding-left: @margin__em;
   }
 });
@@ -68,7 +68,7 @@
   .o-sidebar-breakout {
     &_img-container {
       float: left;
-      width: @o-sidebar-breakout_img-width / @bp-sm-max * 100%;
+      width: @o-sidebar-breakout__img-width / @bp-sm-max * 100%;
       margin-right: @margin__em;
     }
 
diff --git a/cfgov/unprocessed/css/organisms/video-player.less b/cfgov/unprocessed/css/organisms/video-player.less
index b0b6a12ea53..b43e9e055a0 100644
--- a/cfgov/unprocessed/css/organisms/video-player.less
+++ b/cfgov/unprocessed/css/organisms/video-player.less
@@ -12,7 +12,7 @@
   background: var(--white);
 
   // When JavaScript is disabled add a border to stand-alone videos.
-  .no-js &:not(.o-featured-content-module_visual) {
+  .no-js &:not(.o-featured-content-module__visual) {
     border: 1px solid var(--gray-40);
   }
 
@@ -44,7 +44,7 @@
 
 // Video image related styles
 
-.o-video-player_image-container {
+.o-video-player__image-container {
   position: relative;
   background-color: #fff;
   text-align: center;
@@ -71,7 +71,7 @@
   }
 }
 
-.o-video-player_image {
+.o-video-player__image {
   // Remove space below image created by inline display spacing.
   display: block;
   opacity: 0;
@@ -86,7 +86,7 @@
     box-sizing: border-box;
 
     // Overrides values set in featured-content-module.less file in the DS.
-    &.o-featured-content-module_img {
+    &.o-featured-content-module__img {
       max-width: 100%;
       height: auto;
       padding: unit(15px / @base-font-size-px, em);
@@ -102,7 +102,7 @@
   }
 }
 
-.o-video-player_duration {
+.o-video-player__duration {
   color: var(--white);
   background: rgba(0, 0, 0, 40%);
   z-index: 1;
@@ -116,7 +116,7 @@
   bottom: 0;
 }
 
-.o-video-player_play-btn {
+.o-video-player__play-btn {
   box-sizing: border-box;
   width: @play-btn-size__px;
   height: @play-btn-size__px;
@@ -198,16 +198,16 @@
   }
 }
 
-button.o-video-player_play-btn,
-.o-video-player__loaded a.o-video-player_play-btn {
+button.o-video-player__play-btn,
+.o-video-player__loaded a.o-video-player__play-btn {
   display: none;
 }
 
-.o-video-player__loaded button.o-video-player_play-btn {
+.o-video-player__loaded button.o-video-player__play-btn {
   display: block;
 }
 
-.o-video-player_video-container {
+.o-video-player__video-container {
   opacity: 0;
   height: 0;
   margin: auto;
@@ -215,7 +215,7 @@ button.o-video-player_play-btn,
   background-color: #000;
 }
 
-.o-video-player_video-actions-container {
+.o-video-player__video-actions-container {
   right: 0;
   left: auto;
 
@@ -225,7 +225,7 @@ button.o-video-player_play-btn,
   padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
   color: var(--white);
 
-  .m-social-media_heading {
+  .m-social-media__heading {
     margin-top: 0;
     margin-right: 0;
     padding: 0;
@@ -236,13 +236,13 @@ button.o-video-player_play-btn,
 
 // Tablet and above.
 .respond-to-min(@bp-sm-min, {
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     position: absolute;
     top: 0;
   }
 });
 
-.o-video-player_iframe-mixin() {
+.o-video-player__iframe-mixin() {
   position: absolute;
   top: 0;
   left: 0;
@@ -250,17 +250,17 @@ button.o-video-player_play-btn,
   height: 100%;
 }
 
-.o-video-player_video-container__flexible {
-  .o-video-player_iframe-container {
+.o-video-player__video-container__flexible {
+  .o-video-player__iframe-container {
     width: auto;
     .u-flexible-container-mixin();
   }
 
-  .o-video-player_iframe {
-    .o-video-player_iframe-mixin();
+  .o-video-player__iframe {
+    .o-video-player__iframe-mixin();
   }
 
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     position: relative;
     top: 0;
     left: 0;
@@ -274,7 +274,7 @@ button.o-video-player_play-btn,
   }
 
   .m-social-media,
-  .o-video-player_video-actions {
+  .o-video-player__video-actions {
     margin-bottom: 0;
     .grid_column(6);
 
@@ -290,7 +290,7 @@ button.o-video-player_play-btn,
     fill: var(--white);
   }
 
-  .m-social-media_icons {
+  .m-social-media__icons {
     display: block;
     margin-right: 0;
     margin-top: unit(10px / @base-font-size-px, rem);
@@ -298,7 +298,7 @@ button.o-video-player_play-btn,
 }
 
 .o-video-player .m-social-media,
-.o-video-player_video-actions {
+.o-video-player__video-actions {
   // Mobile only.
   .respond-to-max(@bp-xs-max, {
     margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
@@ -307,25 +307,25 @@ button.o-video-player_play-btn,
 
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
-  .o-video-player_iframe-container {
+  .o-video-player__iframe-container {
     .u-flexible-container-mixin();
   }
 
-  .o-video-player_iframe {
-    .o-video-player_iframe-mixin();
+  .o-video-player__iframe {
+    .o-video-player__iframe-mixin();
   }
 });
 
 // Special styles for playing within a Featured Content Module (FCM).
 .o-featured-content-module {
-  .o-video-player_video-actions-container {
+  .o-video-player__video-actions-container {
     margin: 0;
     padding: 0;
     // Magic number: height of standard button and 1px border around FCM.
     top: (@standard-btn-height__px + 1px) * -1;
   }
 
-  .o-video-player_close-btn {
+  .o-video-player__close-btn {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     display: block;
@@ -336,7 +336,7 @@ button.o-video-player_play-btn,
 
 // Mobile only.
 .respond-to-max(@bp-xs-max, {
-  .o-featured-content-module .o-video-player_video-actions-container {
+  .o-featured-content-module .o-video-player__video-actions-container {
     display: none;
   }
 });
@@ -348,26 +348,26 @@ button.o-video-player_play-btn,
     transition: 0.5s all ease-out;
     min-height: 0;
 
-    .o-video-player_close-btn {
+    .o-video-player__close-btn {
       // Moves button up into the masked window when playing.
       margin-top: 0;
     }
   }
 
-  .o-featured-content-module_visual .o-video-player_iframe {
+  .o-featured-content-module__visual .o-video-player__iframe {
     opacity: 0;
     transition-delay: 0.5s;
     transition-duration: 0s;
     transition-property: opacity;
   }
 
-  .o-featured-content-module_visual.video-playing {
+  .o-featured-content-module__visual.video-playing {
     // Position the element to the right for the start of the transition.
     right: 0;
     width: 100%;
     transition: 0.5s all ease-out;
 
-    .o-video-player_iframe {
+    .o-video-player__iframe {
       height: 100%;
       width: 100%;
       opacity: 1;
diff --git a/cfgov/unprocessed/css/print.less b/cfgov/unprocessed/css/print.less
index 2b20cee2829..b23f7984384 100644
--- a/cfgov/unprocessed/css/print.less
+++ b/cfgov/unprocessed/css/print.less
@@ -30,9 +30,9 @@
     content: " (" attr(data-pretty-href) ")";
   }
 
-  a.o-header_logo-img:after,
-  a.m-info-unit_heading-link:after,
-  .m-info-unit_content h4 a:after {
+  a.o-header__logo-img:after,
+  a.m-info-unit__heading-link:after,
+  .m-info-unit__content h4 a:after {
     // Do not append hrefs to the logo or info unit headings.
     content: none;
   }
@@ -58,7 +58,7 @@
   }
 
   a.a-link__jump,
-  a.m-list_link {
+  a.m-list__link {
     // These pseudo-classes are needed to guarantee specificity
     &:link,
     &:visited {
@@ -70,38 +70,38 @@
     }
   }
 
-  .m-list__links .m-list_item {
+  .m-list__links .m-list__item {
     // Space out stand-alone links by .5em
     margin-bottom: unit( 8px / @base-font-size-px, em );
   }
 
   .o-info-unit-group {
-    .content-l_col-1-2,
-    .content-l_col-1-3,
-    .content-l_col-2-3 {
+    .content-l__col-1-2,
+    .content-l__col-1-3,
+    .content-l__col-2-3 {
       // Ensure content remains vertically aligned by rendering them as a table cell
       display: table-cell !important;
     }
-    .content-l_col-1 {
+    .content-l__col-1 {
       .grid_column( 12 );
     }
-    .content-l_col-1-2 {
+    .content-l__col-1-2 {
       // Keep 50/50 info unit groups at two columns for print
       .grid_column( 6 );
     }
-    .content-l_col-1-3 {
+    .content-l__col-1-3 {
       // Keep 33/33/33 info unit groups at three columns for print
       .grid_column( 4 );
     }
-    .content-l_col-2-3 {
+    .content-l__col-2-3 {
       // Maintain 2/3 layouts for print
       .grid_column( 8 );
     }
-    .m-info-unit_image {
+    .m-info-unit__image {
       // Print info unit images
       display: block;
     }
-    .m-info-unit__inline .m-info-unit_image {
+    .m-info-unit__inline .m-info-unit__image {
       // Preserve inline info unit image layout
       float: left;
       margin-right: unit( @grid_gutter-width / @base-font-size-px, em );
@@ -147,7 +147,7 @@
     }
   }
 
-  .o-video-player_play-btn {
+  .o-video-player__play-btn {
     // !important used here to avoid being overridden by a much more specific
     // selector that sets the display property for this element
     // and to avoid using a selector that specific here.
@@ -176,7 +176,7 @@
   .o-email-signup,
   .rss-subscribe,
   .o-search-bar,
-  .m-hero_image-wrapper {
+  .m-hero__image-wrapper {
     // Hide unimportant print things
     display: none;
   }
@@ -189,8 +189,8 @@
   // Cap content line lengths at ~ 75 characters. `ch` equals the width of the
   // 0 glyph in the font, which is wider than some others (i, f, t, etc.),
   // so setting it to 62 gives us approximately 75 characters per line.
-  .content_main,
-  .content_intro {
+  .content__main,
+  .content__intro {
     dd,
     dt,
     li,
@@ -208,24 +208,24 @@
       padding: 0;
     }
 
-    .content_main {
+    .content__main {
       margin: 0;
       display: block !important;
     }
 
-    .content_sidebar {
+    .content__sidebar {
       display: block !important;
     }
   }
 
   // Prevent Chrome from adding in a blank first page
   @media (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
-    .content_main {
+    .content__main {
       margin: 0;
       display: block !important;
     }
 
-    .content_sidebar {
+    .content__sidebar {
       display: block !important;
     }
   }
diff --git a/cfgov/unprocessed/js/molecules/Autocomplete.js b/cfgov/unprocessed/js/molecules/Autocomplete.js
index 653934d9c92..8fa4f5f8b16 100644
--- a/cfgov/unprocessed/js/molecules/Autocomplete.js
+++ b/cfgov/unprocessed/js/molecules/Autocomplete.js
@@ -8,8 +8,8 @@ import throttle from 'lodash.throttle';
 // Class constants
 const BASE_CLASS = 'm-autocomplete';
 const HIDDEN_CLASS = 'u-hidden';
-const AUTOCOMPLETE_CLASS = 'm-autocomplete_results';
-const SELECTED_CLASS = 'm-autocomplete_selected';
+const AUTOCOMPLETE_CLASS = 'm-autocomplete__results';
+const SELECTED_CLASS = 'm-autocomplete__selected';
 const ERROR_CLASS = 'a-text-input__error';
 
 // Key constants
diff --git a/cfgov/unprocessed/js/molecules/GlobalSearch.js b/cfgov/unprocessed/js/molecules/GlobalSearch.js
index 715003aea49..a35fd71771c 100644
--- a/cfgov/unprocessed/js/molecules/GlobalSearch.js
+++ b/cfgov/unprocessed/js/molecules/GlobalSearch.js
@@ -55,7 +55,7 @@ function GlobalSearch(element) {
     _contentDom.classList.remove('u-hidden');
 
     const inputContainsLabelSel = `.${BASE_CLASS}_content-form .input-contains-label`;
-    const searchBtnSel = `.${BASE_CLASS} .o-form__input-w-btn_btn-container button`;
+    const searchBtnSel = `.${BASE_CLASS} .o-form--input-w-btn__btn-container button`;
 
     const inputContainsLabel = _contentDom.querySelector(inputContainsLabelSel);
     _searchInputDom = inputContainsLabel.querySelector('input');
diff --git a/cfgov/unprocessed/js/molecules/Notification.js b/cfgov/unprocessed/js/molecules/Notification.js
index dd3abaae87b..d68e979c63b 100644
--- a/cfgov/unprocessed/js/molecules/Notification.js
+++ b/cfgov/unprocessed/js/molecules/Notification.js
@@ -76,12 +76,12 @@ function Notification(element) {
    */
   function _setContent(messageText, explanationText) {
     let content = `
-      <div class="h4 m-notification_message">
+      <div class="h4 m-notification__message">
         ${messageText}
       </div>`;
     if (typeof explanationText !== 'undefined') {
       content += `
-        <p class="m-notification_explanation">
+        <p class="m-notification__explanation">
           ${explanationText}
         </p>`;
     }
diff --git a/cfgov/unprocessed/js/organisms/MegaMenuMobile.js b/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
index 4919f98544e..5988fac326b 100644
--- a/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
+++ b/cfgov/unprocessed/js/organisms/MegaMenuMobile.js
@@ -49,7 +49,7 @@ function MegaMenuMobile(menus) {
 
     // Make root level links disabled to tab and voiceover navigation on init.
     _rootLinksDom = _rootMenuContentDom.querySelectorAll(
-      'a.o-mega-menu_content-1-link,.m-global-eyebrow a',
+      'a.o-mega-menu__content-1-link,.m-global-eyebrow a',
     );
 
     return this;
@@ -135,7 +135,7 @@ function MegaMenuMobile(menus) {
 
       // Back button on the 2nd level menu clicked.
       if (
-        event.trigger.classList.contains('o-mega-menu_content-2-alt-trigger')
+        event.trigger.classList.contains('o-mega-menu__content-2-alt-trigger')
       ) {
         _enableRootMenuContent();
         _activeMenu = _rootMenu;
diff --git a/cfgov/v1/jinja2/v1/activity-log/index.html b/cfgov/v1/jinja2/v1/activity-log/index.html
index 46fdf0b0d65..402ee4d01c6 100644
--- a/cfgov/v1/jinja2/v1/activity-log/index.html
+++ b/cfgov/v1/jinja2/v1/activity-log/index.html
@@ -1,6 +1,6 @@
 {% extends 'v1/layouts/layout-full.html' %}
 
-{% block content_main %}
+{% block content__main %}
 
     <div class="block block__flush-top">
         <h1>Recent updates</h1>
diff --git a/cfgov/v1/jinja2/v1/blog/blog_page.html b/cfgov/v1/jinja2/v1/blog/blog_page.html
index 423dff38e95..f0ea0f1b236 100644
--- a/cfgov/v1/jinja2/v1/blog/blog_page.html
+++ b/cfgov/v1/jinja2/v1/blog/blog_page.html
@@ -15,7 +15,7 @@
           content="{{ _( 'https://www.facebook.com/CFPB' ) }}">
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% include 'v1/includes/article.html' %}
     {% block post_article_content %}
         <div class="block
@@ -38,7 +38,7 @@
     {% endblock %}
 {% endblock %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
     {% if rss_feed %}
         <div class="block">
diff --git a/cfgov/v1/jinja2/v1/browse-basic/index.html b/cfgov/v1/jinja2/v1/browse-basic/index.html
index 6ae4062dcc8..573cc61f191 100644
--- a/cfgov/v1/jinja2/v1/browse-basic/index.html
+++ b/cfgov/v1/jinja2/v1/browse-basic/index.html
@@ -3,7 +3,7 @@
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if 'featured_content' in block.block_type %}
             <div class="block
diff --git a/cfgov/v1/jinja2/v1/browse-filterable/index.html b/cfgov/v1/jinja2/v1/browse-filterable/index.html
index e40d5759ebc..c28560e9ba4 100644
--- a/cfgov/v1/jinja2/v1/browse-filterable/index.html
+++ b/cfgov/v1/jinja2/v1/browse-filterable/index.html
@@ -3,7 +3,7 @@
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if 'featured_content' in block.block_type %}
             <div class="block
diff --git a/cfgov/v1/jinja2/v1/document-detail/index.html b/cfgov/v1/jinja2/v1/document-detail/index.html
index 898b193d80c..8bcaa64f4ab 100644
--- a/cfgov/v1/jinja2/v1/document-detail/index.html
+++ b/cfgov/v1/jinja2/v1/document-detail/index.html
@@ -3,7 +3,7 @@
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if block.block_type == 'item_introduction' %}
             {% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
@@ -21,6 +21,6 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/v1/jinja2/v1/enforcement-action/index.html b/cfgov/v1/jinja2/v1/enforcement-action/index.html
index 1b209af8482..16712be8332 100644
--- a/cfgov/v1/jinja2/v1/enforcement-action/index.html
+++ b/cfgov/v1/jinja2/v1/enforcement-action/index.html
@@ -4,7 +4,7 @@
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if block.block_type == 'item_introduction' %}
             {% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
@@ -22,7 +22,7 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ related_metadata_enforcement_action.render() }}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/v1/jinja2/v1/events/_macros.html b/cfgov/v1/jinja2/v1/events/_macros.html
index 331fdafabe9..1e986510ed6 100644
--- a/cfgov/v1/jinja2/v1/events/_macros.html
+++ b/cfgov/v1/jinja2/v1/events/_macros.html
@@ -98,13 +98,13 @@ <h2 class="event-venue_heading">
                 </h2>
             </header>
             <div class="content-l">
-                <div class="event-meta content-l_col content-l_col-1-2">
+                <div class="event-meta content-l__col content-l__col-1-2">
                     {{ event_meta_address(event,
                         address_format ='{venue} {street} {suite}
                         {city}' ~ state_prefix ~ '{state} {zip}'
                     ) }}
                 </div>
-                <div class="content-l_col content-l_col-1-2 event-calendar_container">
+                <div class="content-l__col content-l__col-1-2 event-calendar_container">
                 {% if event_state == 'past' and event.live_stream_availability and not event.archive_video_id %}
                     Video replay will be<br> available shortly
                 {% else %}
@@ -139,13 +139,13 @@ <h2 class="event-venue_heading">
                     {% elif event.post_event_image_type == 'image' %}
                         {# DISPLAY SPECIFICALLY-CHOSEN POST-EVENT IMAGE #}
                         {% set img = image(event.post_event_image, 'width-1416') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ img.url }}"
                              alt="{{ image_alt_value(img) }}">
                     {% else %}
                         {# DISPLAY PLACEHOLDER POST-EVENT IMAGE #}
                         {% set img = image(event.post_event_image, 'width-1416') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ static('img/cfpb_video_cover_card_1380x776.png') }}"
                              alt="">
                     {% endif %}
@@ -156,7 +156,7 @@ <h2 class="event-venue_heading">
                 {% elif event.venue_image_type == 'image' %}
                     {# DISPLAY SPECIFICALLY-CHOSEN VENUE IMAGE #}
                     {% set img = image(event.venue_image, 'width-1416') %}
-                    <img class="o-post-preview_image"
+                    <img class="o-post-preview__image"
                          src="{{ img.url }}"
                          alt="{{ image_alt_value(img) }}">
                 {% endif %}
diff --git a/cfgov/v1/jinja2/v1/events/event.html b/cfgov/v1/jinja2/v1/events/event.html
index 5c95cd0b163..228d92bd4a7 100644
--- a/cfgov/v1/jinja2/v1/events/event.html
+++ b/cfgov/v1/jinja2/v1/events/event.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="{{ static('css/on-demand/event.css') }}">
 {%- endblock css %}
 
-{% block content_main %}
+{% block content__main %}
     {% include 'v1/events/_event-detail.html' %}
 
     {% if page.agenda_items %}
@@ -31,7 +31,7 @@
     {% endif %}
 {% endblock %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
     <section class="block">
         {% import 'v1/includes/molecules/related-content.html' as related_links %}
diff --git a/cfgov/v1/jinja2/v1/home_page/home_page.html b/cfgov/v1/jinja2/v1/home_page/home_page.html
index 7adb5c8dcb1..6c12e680c36 100644
--- a/cfgov/v1/jinja2/v1/home_page/home_page.html
+++ b/cfgov/v1/jinja2/v1/home_page/home_page.html
@@ -13,11 +13,11 @@
 <link rel="stylesheet" href="{{ static('apps/homepage/css/main.css') }}">
 {% endblock %}
 
-{% block content_main_modifiers -%}
-content_main__flush-inner
+{% block content__main_modifiers -%}
+content__main__flush-inner
 {%- endblock %}
 
-{% block content_intro %}
+{% block content__intro %}
     {% import "v1/home_page/_hardcoded_" ~ language ~ ".html" as hardcoded with context %}
 
     <section class="content_level--1">
@@ -29,18 +29,18 @@
             <div class="o-info-unit-group">
                 <div class="content-l">
                     {% for highlight in hardcoded.highlights %}
-                    <div class="content-l_col content-l_col-1-3">
+                    <div class="content-l__col content-l__col-1-3">
                         <div class="m-info-unit">
                             <div style="padding-bottom:.25em;">
                                 <img style="max-height:2.5em;" src="{{ highlight.img_src }}" alt="" width="60" height="40">
                             </div>
-                            <div class="m-info-unit_heading-text">
+                            <div class="m-info-unit__heading-text">
                                 <h2 class="h3">{{ highlight.heading }}</h2>
                             </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <ul class="m-list m-list__links u-mt15">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link"
+                                    <li class="m-list__item">
+                                        <a class="m-list__link"
                                             href="{{ highlight.link_url }}">
                                             {{- highlight.link_text -}}
                                         </a>
@@ -57,7 +57,7 @@ <h2 class="h3">{{ highlight.heading }}</h2>
     </section>
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% import "v1/home_page/_hardcoded_" ~ language ~ ".html" as hardcoded with context %}
     <section class="block u-text-centered">
         <h2 class="h1">{{ hardcoded.answers_heading }}</h2>
@@ -66,16 +66,16 @@ <h2 class="h1">{{ hardcoded.answers_heading }}</h2>
     <section class="block">
         <div class="o-well u-text-centered">
             <div class="o-card-group o-card-group__flow">
-                <div class="o-card-group_cards">
+                <div class="o-card-group__cards">
                     {% for card in hardcoded.topics.cards %}
                     <article class="m-card m-card__topic
                         {%- if loop.last %}  m-card__topic-action{% endif -%}
                     ">
                       <a href="{{ card.url }}">
-                          <div class="m-card_icon">
+                          <div class="m-card__icon">
                               {{ svg_icon( card.icon ) }}
                           </div>
-                          <div class="m-card_footer">
+                          <div class="m-card__footer">
                               <span>{{ card.text }}</span>
                           </div>
                       </a>
@@ -90,12 +90,12 @@ <h2 class="h1">{{ hardcoded.answers_heading }}</h2>
         <section class="block">
             <div class="o-info-unit-group">
                 <div class="content-l">
-                    <div class="content-l_col content-l_col-1-2">
+                    <div class="content-l__col content-l__col-1-2">
                         <div class="m-info-unit">
-                                <div class="m-info-unit_heading-text">
+                                <div class="m-info-unit__heading-text">
                                     <h2>The CFPB is standing up for you</h2>
                                 </div>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <ul>
                                   <li><strong>4 million+</strong> consumer complaints received responses</li>
                                   <li><strong>$20.2 billion+</strong> in financial relief as a result of CFPB actions</li>
@@ -104,18 +104,18 @@ <h2>The CFPB is standing up for you</h2>
                            </div>
                         </div>
                     </div>
-                    <div class="content-l_col content-l_col-1-2">
+                    <div class="content-l__col content-l__col-1-2">
                         <div class="m-info-unit">
-                            <a class="m-info-unit_heading-link" href="/rules-policy/junk-fees/">
-                                <div class="m-info-unit_heading-text">
+                            <a class="m-info-unit__heading-link" href="/rules-policy/junk-fees/">
+                                <div class="m-info-unit__heading-text">
                                     <h2>Protecting you from junk fees</h2>
                                 </div>
                             </a>
-                            <div class="m-info-unit_content">
+                            <div class="m-info-unit__content">
                                 <p>The CFPB is working to save households billions of dollars a year by reducing exploitative junk fees charged by banks and financial companies.</p>
                                 <ul class="m-list m-list__links u-mt15">
-                                    <li class="m-list_item">
-                                        <a class="m-list_link" href="/rules-policy/junk-fees/">
+                                    <li class="m-list__item">
+                                        <a class="m-list__link" href="/rules-policy/junk-fees/">
                                            Read about junk fees
                                         </a>
                                 </ul>
@@ -139,4 +139,4 @@ <h2>Protecting you from junk fees</h2>
         </section>
 
     </section>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html b/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
index 22937084c79..46dcb14aafc 100644
--- a/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
+++ b/cfgov/v1/jinja2/v1/home_page/home_page_legacy.html
@@ -19,7 +19,7 @@
     </style>
 {% endblock css %}
 
-{% block content_intro %}
+{% block content__intro %}
     {% import "v1/home_page/_hardcoded_legacy_" ~ language ~ ".html" as hardcoded %}
 
     {% with value = hardcoded.hero %}
@@ -40,7 +40,7 @@
     {% endwith %}
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% import "v1/home_page/_hardcoded_legacy_" ~ language ~ ".html" as hardcoded %}
 
     {% with value = hardcoded.info_units %}
@@ -55,4 +55,4 @@
             'cards': hardcoded.cards
         } ) }}
     </section>
-{% endblock content_main %}
+{% endblock content__main %}
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
index 8c97fb5078e..3b450392fbf 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/hyperlink.html
@@ -20,7 +20,7 @@
 <a class="a-link a-link__jump"
    href="{{ value.url }}"
    {% if value.aria_label %}aria-label="{{ value.aria_label }}"{% endif %}>
-    <span class="a-link_text">
+    <span class="a-link__text">
         {{ value.text }}
     </span>
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
index cd7fe329f4a..afafe0a368e 100644
--- a/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
+++ b/cfgov/v1/jinja2/v1/includes/atoms/tagline.html
@@ -17,7 +17,7 @@
 <div class="a-tagline{{ ' a-tagline__large' if is_large else '' }}"
      aria-label="{{ _('Official website of the') }} {{ _('United States government') }}">
    <span class="u-usa-flag"></span>
-   <div class="a-tagline_text">
+   <div class="a-tagline__text">
       {{ _('An official website of the') }}
       <span class="u-nowrap">{{ _('United States government') }}</span>
    </div>
diff --git a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
index 30a668e4175..c44b5c6c59e 100644
--- a/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
+++ b/cfgov/v1/jinja2/v1/includes/blocks/email-signup.html
@@ -31,7 +31,7 @@
 <div class="o-email-signup">
 {% if value.heading %}
     <header class="{{ 'm-slug-header' if value.default_heading else '' }}">
-        <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
+        <h2 class="{{ 'm-slug-header__heading' if value.default_heading else 'h3' }} ">
             {{ _(value.heading) }}
         </h2>
     </header>
@@ -44,7 +44,7 @@ <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
 
 {# TODO: DRY this up so we don't repeat the m-btn-group and privacy link #}
 {% if value.url is not none %}
-    <div class="o-email-signup_buttons">
+    <div class="o-email-signup__buttons">
         <a class="a-btn"
            href="{{ value.url }}"
            target="_blank"
@@ -73,7 +73,7 @@ <h2 class="{{ 'm-slug-header_heading' if value.default_heading else 'h3' }} ">
                    required>
         </div>
 
-        <div class="o-email-signup_buttons">
+        <div class="o-email-signup__buttons">
             <button class="a-btn">{{ _('Sign up') }}</button>
             <a class="a-btn a-btn__link a-btn__secondary"
                href="{{ pageurl(value.disclaimer_page) if value.disclaimer_page else disclaimer_url }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html b/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
index 3de502ad46b..2433f46d0f0 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/call-to-action.html
@@ -26,14 +26,14 @@
 <div class="m-call-to-action">
     {% if value.slug_text %}
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.slug_text }}
         </h2>
     </header>
     {% endif %}
 
     {% if value.paragraph_text %}
-    <div class="m-call-to-action_text">
+    <div class="m-call-to-action__text">
         {{ value.paragraph_text | safe }}
     </div>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/card.html b/cfgov/v1/jinja2/v1/includes/molecules/card.html
index f76d2e819d9..7cf96f0b6f1 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/card.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/card.html
@@ -36,9 +36,9 @@
                 {% if value.card_type  == 'featured' %} m-card__featured {% endif %}">
     <a href="{{ value.link_url }}">
         {% if value.heading or value.icon %}
-        <h3 class="{% if value.card_type != 'highlight' %}m-card_heading{% endif %}{% if value.card_type == 'featured' %} h2{% endif %}">
+        <h3 class="{% if value.card_type != 'highlight' %}m-card__heading{% endif %}{% if value.card_type == 'featured' %} h2{% endif %}">
             {% if value.icon -%}
-                <span class="m-card_icon">{{ svg_icon( value.icon ) }}</span>
+                <span class="m-card__icon">{{ svg_icon( value.icon ) }}</span>
             {%- endif %}
             {% if value.heading -%}
                 {{ value.heading }}
@@ -53,16 +53,16 @@ <h3 class="{% if value.card_type != 'highlight' %}m-card_heading{% endif %}{% if
         {% endif %}
 
         {% if value.card_type  == 'breakout' %}
-        <img class="m-card_img"
+        <img class="m-card__img"
              loading="lazy"
              src="{{ value.img_src }}"
              alt="">
         {% endif %}
 
         {% if value.card_type  == 'breakout' %}
-        <div class="m-card_inner-wrapper">
+        <div class="m-card__inner-wrapper">
         {% endif %}
-            <div class="m-card_footer">
+            <div class="m-card__footer">
                 <span>{{ value.link_text }}</span>
             </div>
         {% if value.card_type  == 'breakout' %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
index 3c41030495f..a16eface8da 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
@@ -39,11 +39,11 @@
 
 <figure class="m-full-width-media
                {{- ' m-inset__bottom-rule' if value.is_bottom_rule else '' }}">
-    <img class="m-full-width-media_image"
+    <img class="m-full-width-media__image"
          src="{{ image_inset.url }}"
          alt="{{ image_alt_value(value.image) }}">
 {%- if value.text %}
-    <figcaption class="m-inset_caption">
+    <figcaption class="m-inset__caption">
         {{ value.text | safe }}
     </figcaption>
 {%- endif %}
@@ -57,8 +57,8 @@
                m-inset__{{ value.image_position }}
                m-inset__{{ image_inset.orientation }}
                {{- ' m-inset__bottom-rule' if value.is_bottom_rule else '' }}">
-    <div class="m-inset_image-container">
-        <img class="m-inset_image"
+    <div class="m-inset__image-container">
+        <img class="m-inset__image"
              src="{{ image_inset.url }}"
              srcset="{{ image_inset.url }} {{ image_inset.width }}w,
                      {{ image_mobile.url }} {{ image_mobile.width }}w"
@@ -66,7 +66,7 @@
              alt="{{ image_alt_value(value.image) }}">
     </div>
 {% if value.text %}
-    <figcaption class="m-inset_caption">
+    <figcaption class="m-inset__caption">
         {{ value.text | safe }}
     </figcaption>
 {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html b/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
index 82423f38326..283beca5663 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
@@ -39,16 +39,16 @@
 {%- macro feature_card(value) -%}
 
 <article class="m-card">
-    <h2 class="m-card_heading">
+    <h2 class="m-card__heading">
         <a class="" href="{{ value.category.url }}">
-<span class="m-card_icon">{{ svg_icon( value.icon ) }}</span>
+<span class="m-card__icon">{{ svg_icon( value.icon ) }}</span>
 <span>{{ value.category.text }}</span>
 </a>
     </h2>
      
 <ul class="m-list">
 {%- for link in value.links %}
-<li class="m-list_item">
+<li class="m-list__item">
 {%- if link.text is not none and link.text.find('@') > -1 -%}
     {%- if not value.emails is defined -%}
         {%- do value.update({'emails':[{'url':link.text}]}) -%}
@@ -74,7 +74,7 @@ <h2 class="m-card_heading">
 {%- endfor %}
 </ul>
 
-<div class="m-card_footer">
+<div class="m-card__footer">
     <a href="{{ value.category.url }}">
         {{ value.footer_label }}
     </a>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
index 0a14ea6528d..c9ef8f7b373 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-eyebrow.html
@@ -26,11 +26,11 @@
             {% if is_horizontal -%}
                 {{ tagline.render() }}
             {%- endif %}
-            <div class="m-global-eyebrow_actions">
+            <div class="m-global-eyebrow__actions">
                 <ul class="m-list
                            m-list__horizontal
-                           m-global-eyebrow_languages">
-                    <li class="m-list_item">
+                           m-global-eyebrow__languages">
+                    <li class="m-list__item">
                         {% if language == 'es' %}
                         <a href="/" hreflang="en" lang="en">
                             English
@@ -41,43 +41,43 @@
                         </a>
                         {% endif %}
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/zh/" hreflang="zh" lang="zh">
                             中文
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/vi/" hreflang="vi" lang="vi">
                             Tiếng Việt
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ko/" hreflang="ko" lang="ko">
                             한국어
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/tl/" hreflang="tl" lang="tl">
                             Tagalog
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ru/" hreflang="ru" lang="ru">
                             Pусский
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ar/" hreflang="ar" lang="ar">
                             العربية
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ht/" hreflang="ht" lang="ht">
                             Kreyòl Ayisyen
                         </a>
                     </li>
                 </ul>
-                <span class="m-global-eyebrow_phone">
+                <span class="m-global-eyebrow__phone">
                     <a href="tel:+1-855-411-2372">(855) 411-2372</a>
                 </span>
             </div>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
index aaf026c90e7..5558c2e67ea 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/global-search.html
@@ -23,28 +23,28 @@
 
 <div class="m-global-search"
      data-js-hook="behavior_flyout-menu">
-    <div class="m-global-search_fallback">
+    <div class="m-global-search__fallback">
         <a rel="nofollow" href="{{ search_url }}">
             {{ _('Search') }}
         </a>
     </div>
-    <button class="m-global-search_trigger"
+    <button class="m-global-search__trigger"
             data-js-hook="behavior_flyout-menu_trigger"
             aria-label="{{ _('Search the consumerfinance.gov website') }}">
-        <span class="m-global-search_trigger-open-label">
+        <span class="m-global-search__trigger-open-label">
             {{ svg_icon('search') }}
             <span class="u-hide-on-mobile">{{ _('Search') }}</span>
         </span>
-        <span class="m-global-search_trigger-close-label">
+        <span class="m-global-search__trigger-close-label">
             {{ svg_icon('error') }}
             <span class="u-hide-on-mobile">{{ _('Close') }}</span>
         </span>
     </button>
-    <div class="m-global-search_content
+    <div class="m-global-search__content
                 u-hidden"
          data-js-hook="behavior_flyout-menu_content"
          role="search">
-        <form class="m-global-search_content-form"
+        <form class="m-global-search__content-form"
               action="{{ search_url_base }}"
               method="get">
             {#
@@ -60,11 +60,11 @@
                    value="{{ search_gov_affiliate() }}">
 
             <div class="o-form__input-w-btn">
-               <div class="o-form__input-w-btn_input-container m-form-field">
+               <div class="o-form--input-w-btn__input-container m-form-field">
                    <div class="a-text-input__full input-contains-label">
                        <label for="m-global-search_query"
-                              class="input-contains-label_before
-                                     input-contains-label_before__search">
+                              class="input-contains-label__before
+                                     input-contains-label__before__search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">{{ _('Search') }}</span>
                        </label>
@@ -77,7 +77,7 @@
                               placeholder="{{ _('Search the CFPB') }}">
                    </div>
                </div>
-               <div class="o-form__input-w-btn_btn-container">
+               <div class="o-form--input-w-btn__btn-container">
                    <button class="a-btn">{{ _('Search') }}</button>
                </div>
             </div>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/hero.html b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
index 99b8d0af879..ad63a714580 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/hero.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/hero.html
@@ -64,20 +64,20 @@
                 {{- ' m-hero__overlay' if value.is_overlay else '' }}
                 {{- ' m-hero__50-50' if value.is_50_50 else '' }}
                 {{- ' m-hero__jumbo' if value.is_jumbo else '' }}">
-    <div class="m-hero_wrapper">
-        <div class="m-hero_text">
-            <h1 class="m-hero_heading">{{ value.heading }}
+    <div class="m-hero__wrapper">
+        <div class="m-hero__text">
+            <h1 class="m-hero__heading">{{ value.heading }}
                 {% if value.heading_continued %}
                 <br> {{ value.heading_continued }}
                 {% endif %}
             </h1>
-            <div class="m-hero_subhead">
+            <div class="m-hero__subhead">
                 {{ value.body | safe }}
             </div>
         </div>
-        <div class="m-hero_image-wrapper">
+        <div class="m-hero__image-wrapper">
         {% if img %}
-            <div class="m-hero_image"></div>
+            <div class="m-hero__image"></div>
         {% endif %}
         </div>
     </div>
@@ -99,7 +99,7 @@ <h1 class="m-hero_heading">{{ value.heading }}
             {% endif -%}
         }
     {% if img and img.width %}
-        .m-hero_image {
+        .m-hero__image {
             background-image: url('{{ sm_img.url }}');
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='{{ sm_img.url }}',
@@ -108,7 +108,7 @@ <h1 class="m-hero_heading">{{ value.heading }}
         }
 
         @media screen and (min-width: 37.5625em) {
-            .m-hero_image {
+            .m-hero__image {
                 background-image: url('{{ img.url }}');
                 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ img.url }}',
@@ -116,9 +116,9 @@ <h1 class="m-hero_heading">{{ value.heading }}
                 padding-bottom: {{ img.height / img.width * 100 }}%;
             }
 
-            .m-hero__jumbo .m-hero_wrapper,
-            .m-hero__50-50 .m-hero_wrapper,
-            .m-hero__overlay .m-hero_wrapper {
+            .m-hero__jumbo .m-hero__wrapper,
+            .m-hero__50-50 .m-hero__wrapper,
+            .m-hero__overlay .m-hero__wrapper {
                 background-image: url('{{ img.url }}');
                 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ img.url }}',
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html b/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
index 4895462925f..59fdeaacaf5 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit-2.html
@@ -64,7 +64,7 @@
             {{- ' m-info-unit__inline' if format == '25-75' else '' }}">
 
     {% if link_image_and_heading %}
-        <a class="m-info-unit_heading-link"
+        <a class="m-info-unit__heading-link"
            href="{{ value.links[0].url | safe }}">
     {% endif %}
 
@@ -85,16 +85,16 @@
             {% set img_alt_text = value.links[0].text %}
         {% endif -%}
 
-        <img class="m-info-unit_image
-                    {{- ' m-info-unit_image__square' if img.is_square }}
-                    {{- ' u-image_border-circle' if border_radius_image == 'circle' }}
-                    {{- ' u-image_border-rounded' if border_radius_image == 'rounded' }}"
+        <img class="m-info-unit__image
+                    {{- ' m-info-unit__image__square' if img.is_square }}
+                    {{- ' u-image__border-circle' if border_radius_image == 'circle' }}
+                    {{- ' u-image__border-rounded' if border_radius_image == 'rounded' }}"
             src="{{ img.url }}"
             alt="{{ img_alt_text }}">
     {%- endif %}
 
     {%- if has_heading %}
-        <div class="m-info-unit_heading-text">
+        <div class="m-info-unit__heading-text">
             {{ heading( value.heading ) }}
         </div>
     {%- endif %}
@@ -103,13 +103,13 @@
         </a>
     {%- endif -%}
 
-    <div class="m-info-unit_content">
+    <div class="m-info-unit__content">
         {{ value.body | safe }}
 
         {% if value.links %}
             <ul class="m-list m-list__links u-mt15">
             {%- for link in value.links %}
-                <li class="m-list_item">
+                <li class="m-list__item">
                 {%- if link.text is not none and link.text.find('@') > -1 -%}
                     {%- if not value.emails is defined -%}
                         {%- do value.update({'emails':[{'url':link.text}]}) -%}
@@ -120,7 +120,7 @@
                         else 'Learn More' -%}
 
                     {%- set link -%}
-                        <a class="m-list_link"
+                        <a class="m-list__link"
                             href="{{ link.url }}"
                             {%- if link.aria_label -%}
                                 aria-label="{{ link.aria_label }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
index f4724210be1..12e93b64d45 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/info-unit.html
@@ -61,24 +61,24 @@
             <a href="{{ value.links[0].url }}">
         {% endif %}
         {% if value.image.is_decorative %}
-        <div class="m-info-unit_image
-                    {{ 'm-info-unit_image__square' if value.image.is_square else '' }}"
+        <div class="m-info-unit__image
+                    {{ 'm-info-unit__image__square' if value.image.is_square else '' }}"
              style="background-image: url( {{ value.image.url }} );">
         </div>
         {% else %}
         <img src="{{ value.image.url }}"
              alt="{{ value.image.alt if value.image.alt else '' }}"
-             class="m-info-unit_image
-                    {{ 'm-info-unit_image__square' if value.image.is_square else '' }}">
+             class="m-info-unit__image
+                    {{ 'm-info-unit__image__square' if value.image.is_square else '' }}">
         {% endif %}
         {% if link_image_and_heading %}
             </a>
         {% endif %}
     {% endif %}
 
-    <div class="m-info-unit_content">
+    <div class="m-info-unit__content">
     {% if link_image_and_heading %}
-        <a class="m-info-unit_heading-link" href="{{ value.links[0].url }}">
+        <a class="m-info-unit__heading-link" href="{{ value.links[0].url }}">
     {% endif %}
             {{ value.heading | safe if value.heading else '' }}
             {{ value.sub_heading | safe if value.sub_heading else '' }}
@@ -91,7 +91,7 @@
         {% if value.links %}
             <ul class="m-list m-list__links">
             {% for link in value.links %}
-                <li class="m-list_item">
+                <li class="m-list__item">
                     {% if link.text is defined and link.text.find('@') > -1 %}
                         {% if not value.emails is defined %}
                             {% do value.update({'emails':[{'url':link.text}]}) %}
@@ -102,7 +102,7 @@
                             else 'Learn More' %}
 
                         {%- set link -%}
-                            <a class="m-list_link"
+                            <a class="m-list__link"
                                 href="{{ link.url }}"
                                 {%- if link.aria_label -%}
                                     aria-label="{{ link.aria_label }}"
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/notification.html b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
index cd7e7e55765..200dd9f759f 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/notification.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/notification.html
@@ -49,19 +49,19 @@
               {{- type -}}
               {{- ' m-notification__visible' if is_visible else '' -}}">
       {{ svg_icon(icon) }}
-      <div class="m-notification_content"
+      <div class="m-notification__content"
           {{ 'role="alert"' if type == 'warning' or type == 'error' else '' }}>
           {%- if message %}
-          <div class="h4 m-notification_message">{{ message }}</div>
+          <div class="h4 m-notification__message">{{ message }}</div>
           {% endif -%}
           {%- if explanation %}
-              <div class="m-notification_explanation">{{ explanation }}</div>
+              <div class="m-notification__explanation">{{ explanation }}</div>
           {% endif -%}
           {% for link in links %}
               {% if link.text %}
                   {% if loop.first %}<ul class="m-list m-list__links">{% endif %}
-                      <li class="m-list_item">
-                          <a class="m-list_link" href="{{ link.url }}">
+                      <li class="m-list__item">
+                          <a class="m-list__link" href="{{ link.url }}">
                             {% if link.is_link_boldface %}<strong>{% endif %}
                             {{ link.text }}
                             {% if link.is_link_boldface %}</strong>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
index 915818896f9..71bc0ae203b 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/pagination.html
@@ -33,39 +33,39 @@
          aria-label="{{ _('Pagination') }}">
         {%- if current_page > 1 %}
         <a class="a-btn
-                  m-pagination_btn-prev"
+                  m-pagination__btn-prev"
            href="?page={{ (current_page - 1) ~
                           url_parameters(request.GET) ~
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
                   a-btn__disabled
-                  m-pagination_btn-prev">
+                  m-pagination__btn-prev">
         {% endif %}
-            <span class="a-btn_icon a-btn_icon__on-left">
+            <span class="a-btn__icon a-btn__icon--on-left">
                 {{- svg_icon('left') -}}
             </span>
             {{ _('Previous') }}
         </a>
         {%- if current_page < total_pages %}
         <a class="a-btn
-                  m-pagination_btn-next"
+                  m-pagination__btn-next"
            href="?page={{ (current_page + 1) ~
                           url_parameters(request.GET) ~
                           fragment_id }}">
         {%- else %}
         <a class="a-btn
                   a-btn__disabled
-                  m-pagination_btn-next">
+                  m-pagination__btn-next">
         {% endif -%}
             {{ _('Next') }}
-            <span class="a-btn_icon a-btn_icon__on-right">
+            <span class="a-btn__icon a-btn__icon--on-right">
                 {{- svg_icon('right') -}}
             </span>
         </a>
-        <form class="m-pagination_form" action="{{ fragment_id }}">
-            <label for="m-pagination_current-page-{{ index | string }}">
-                <span class="m-pagination_label">
+        <form class="m-pagination__form" action="{{ fragment_id }}">
+            <label for="m-pagination__current-page-{{ index | string }}">
+                <span class="m-pagination__label">
                     {{ _('Page') }}
                 </span>
                 <span class="u-visually-hidden">
@@ -81,8 +81,8 @@
                     {% endif %}
                 {% endfor %}
             {% endfor %}
-            <input id="m-pagination_current-page-{{ index | string }}"
-                   class="m-pagination_current-page"
+            <input id="m-pagination__current-page-{{ index | string }}"
+                   class="m-pagination__current-page"
                    name="page"
                    type="number"
                    min="1"
@@ -90,12 +90,12 @@
                    pattern="[0-9]*"
                    inputmode="numeric"
                    value="{{ current_page }}">
-            <span class="m-pagination_label">
+            <span class="m-pagination__label">
                 {{- ' ' ~ _('of') ~ ' ' -}} {{- total_pages -}}
             </span>
             <button class="a-btn
                            a-btn__link
-                           m-pagination_btn-submit"
+                           m-pagination__btn-submit"
                     type="submit">
                 {{ _('Go') }}
             </button>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/quote.html b/cfgov/v1/jinja2/v1/includes/molecules/quote.html
index b5764bcaa20..891323b2727 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/quote.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/quote.html
@@ -17,11 +17,11 @@
    ========================================================================== #}
 
 <aside class="m-pull-quote" aria-hidden="true">
-    <p class="m-pull-quote_body">
+    <p class="m-pull-quote__body">
         {{ value.body }}
     </p>
     {% if value.citation %}
-    <p class="m-pull-quote_citation">
+    <p class="m-pull-quote__citation">
         {{ value.citation }}
     </p>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-content.html b/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
index c7609c3ff68..a7434d6fd0e 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-content.html
@@ -32,7 +32,7 @@
 <div class="m-related-links">
     {% if value.heading %}
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading" id="{{ value.heading | slugify_unique }}">
+            <h2 class="m-slug-header__heading" id="{{ value.heading | slugify_unique }}">
                 {{ value.heading }}
             </h2>
         </header>
@@ -43,9 +43,9 @@ <h2 class="m-slug-header_heading" id="{{ value.heading | slugify_unique }}">
     {% if value.links %}
         <ul class="m-list m-list__links">
         {% for link in value.links %}
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <a href="{{ link.url }}"
-                  class="m-list_link"
+                  class="m-list__link"
                   {%- if link.aria_label -%}
                     aria-label="{{ link.aria_label }}"
                   {% endif -%}>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html
index 50d8f795452..9b72077981a 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
@@ -34,25 +34,25 @@
 {% set show_enf_data = False %}
 <div class="m-related-metadata block block__flush-top">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
           Action Details
         </h2>
     </header>
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Forum
         </h3>
         {{_categories(page.categories)}}
     </div>
     {% if page.court %}
-        <div class="m-related-metadata_item-container">
+        <div class="m-related-metadata__item-container">
             <h3 class="h4">
               Court
             </h3>
             {{page.court}}
         </div>
     {% endif %}
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Docket number
         </h3>
@@ -61,14 +61,14 @@ <h3 class="h4">
         {% endfor %}
     </div>
     {% if page.initial_filing_date %}
-    <div class="m-related-metadata_item-container">
+    <div class="m-related-metadata__item-container">
         <h3 class="h4">
           Initial filing date
         </h3>
         {{_date(page.initial_filing_date)}}
     </div>
     {% endif %}
-    <div class="m-related-metadata_item-container m-related-metadata_status">
+    <div class="m-related-metadata__item-container m-related-metadata__status">
         <h3 class="h4">
           Status
         </h3>
@@ -85,7 +85,7 @@ <h3 class="h4">
         >See status definitions</a>
     </div>
     {% if show_enf_data and statutes|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Statutes
           </h3>
@@ -94,7 +94,7 @@ <h3 class="h4">
     {% endif %}
     {{_dispositions(page.enforcement_dispositions.all())}}
     {% if show_enf_data and defendant_types|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Defendant/Respondent type
           </h3>
@@ -106,7 +106,7 @@ <h3 class="h4">
       </div>
     {% endif %}
     {% if products|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Products
           </h3>
@@ -115,7 +115,7 @@ <h3 class="h4">
     {% endif %}
 
     {% if show_enf_data and at_risk_groups|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             At Risk Groups
           </h3>
@@ -148,10 +148,10 @@ <h3 class="h4">
 <ul class="m-list
            m-list__unstyled
            m-list__links
-           m-related-metadata_topics">
+           m-related-metadata__topics">
     {% for item in list %}
-    <li class="m-list_item">
-        <span class="m-list_link">{{item}}</span>
+    <li class="m-list__item">
+        <span class="m-list__link">{{item}}</span>
     </li>
     {% endfor %}
 </ul>
@@ -194,7 +194,7 @@ <h3 class="h4">
    ========================================================================== #}
 {% macro _dispositions(dispositions) %}
     {% if show_enf_data and dispositions|length > 0 %}
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Total consumer relief
           </h3>
@@ -202,7 +202,7 @@ <h3 class="h4">
             ${{'{:,}'.format(total_consumer_relief)}}
           </div>
       </div>
-      <div class="m-related-metadata_item-container">
+      <div class="m-related-metadata__item-container">
           <h3 class="h4">
             Total civil money penalties
           </h3>
@@ -231,7 +231,7 @@ <h3 class="h4">
 {% macro _categories(categories_check) %}
     <ul class="m-list m-list__unstyled">
     {% for category in page.categories.all() %}
-    <li class="m-list_item">
+    <li class="m-list__item">
         <span>{{ category.get_name_display() }}</span>
     </li>
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
index 29413c68db8..bbb7e7a46a0 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
@@ -43,7 +43,7 @@
 } %}
 <div class="m-related-metadata">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.slug }}
         </h2>
     </header>
@@ -53,7 +53,7 @@ <h2 class="m-slug-header_heading">
         {% if 'topics' in block.block_type and not block.value.show_topics %}
             {% continue %}
         {% endif %}
-        <div class="m-related-metadata_item-container">
+        <div class="m-related-metadata__item-container">
             <h3 class="h4">
                 {{ block.value.heading }}
             </h3>
@@ -84,15 +84,15 @@ <h3 class="h4">
 <ul class="m-list
            m-list__unstyled
            m-list__links
-           {{ 'm-related-metadata_topics' if is_related_topics else '' }} ">
+           {{ 'm-related-metadata__topics' if is_related_topics else '' }} ">
     {% for link in list.links %}
-    <li class="m-list_item">
+    <li class="m-list__item">
         {% if link.url %}
-            <a href="{{ link.url }}" class="m-list_link">
+            <a href="{{ link.url }}" class="m-list__link">
                 {{ link.text }}
             </a>
         {% else %}
-            <span class="m-list_link">{{ link.text }}</span>
+            <span class="m-list__link">{{ link.text }}</span>
         {% endif %}
     </li>
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
index 33b50858da7..2c3f6cedb0b 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-posts.html
@@ -16,14 +16,14 @@
 
 {% macro _related_posts_list(posts, limit) %}
     {% if limit %}{% set posts = posts[ :limit | int ] %}{% endif %}
-    <ul class="m-related-posts_list
+    <ul class="m-related-posts__list
                m-list
                m-list__unstyled">
         {% for post in posts %}
             {% set post_url = post.url or '' %}
-            <li class="m-list_item">
+            <li class="m-list__item">
                 <h3 class="h4 u-mb5">
-                    <a class="m-list_link"
+                    <a class="m-list__link"
                        href="{{ post_url or post.permalink }}">
                         {{ post.title | safe }}
                     </a>
@@ -78,12 +78,12 @@ <h3 class="h4 u-mb5">
 {% macro render( value ) %}
 <div class="m-related-posts">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.header_title }}
         </h2>
     </header>
     {% for subposts in value.posts %}
-        <div class="m-related-posts_list-container">
+        <div class="m-related-posts__list-container">
             {% if value.show_heading %}
                 <h3 class="h4">
                     {% if subposts.icon %}{{ svg_icon( subposts.icon ) }}{% endif %}
@@ -97,7 +97,7 @@ <h3 class="h4">
     <a class="a-link a-link__jump"
        href="{{ value.view_more_url }}"
        aria-label="{{ _('View more related posts') }}">
-        <span class="a-link_text">
+        <span class="a-link__text">
             {{ _('View more') }}
         </span>
     </a>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
index 4909eccad18..e6e1efc6701 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/related-topics.html
@@ -23,7 +23,7 @@
    ========================================================================== #}
 <div class="m-related-topics">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ value.heading or 'Related Topics' }}
         </h2>
     </header>
@@ -31,8 +31,8 @@ <h2 class="m-slug-header_heading">
                m-list__unstyled
                m-list__links">
     {% for topic in value.topics %}
-    <li class="m-list_item">
-        <a href="{{ topic.url }}" class="m-list_link">
+    <li class="m-list__item">
+        <a href="{{ topic.url }}" class="m-list__link">
             {{ topic.text }}
         </a>
     </li>
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html b/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
index 59f6f85c570..189deb3a305 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/rss-feed.html
@@ -15,7 +15,7 @@
         Subscribe to our RSS feed to get the latest content in your reader.
     </p>
     <a class="a-btn" href="{{ url }}">
-        <span class="a-btn_icon__on-left">
+        <span class="a-btn__icon--on-left">
             {{- svg_icon('rss') -}}
         </span>
         Subscribe to RSS
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
index d2c65e9e065..0ea2587e0d5 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/social-media.html
@@ -70,7 +70,7 @@
 <div class="m-social-media
             m-social-media__{{ 'share' if is_share_view else 'follow' }}">
     {% if is_share_view %}
-        <div class="h5 m-social-media_heading">
+        <div class="h5 m-social-media__heading">
             {% if is_printable -%}
                 {{ _('Share & print') }}
             {%- else -%}
@@ -82,7 +82,7 @@
     <ul class="m-list
                m-list__unstyled
                m-list__horizontal
-               m-social-media_icons">
+               m-social-media__icons">
 
         {% set facebook_homepage = _('https://www.facebook.com/CFPB') %}
         {% set facebook_info = {
@@ -152,8 +152,8 @@
 
         {% for link in links %}
             {% if is_share_view %}
-                <li class="m-list_item">
-                    <a class="m-social-media_icon"
+                <li class="m-list__item">
+                    <a class="m-social-media__icon"
                        href="{{ link.share_url if link.name != 'email' else link.share_url | trim }}"
                        {{ 'target="_blank" rel="noopener noreferrer"' | safe if link.name != 'email' else '' }}
                        aria-label="{{ _('Share on') }} {{ link.name }}">
@@ -161,8 +161,8 @@
                     </a>
                 </li>
             {% else %}
-                <li class="m-list_item">
-                    <a class="m-social-media_icon"
+                <li class="m-list__item">
+                    <a class="m-social-media__icon"
                        href="{{ link.homepage | trim }}"
                        aria-label="{{ _('Visit us on') }} {{ link.name }}">
                         {{ svg_icon(link.icon ~ '-square') }}
@@ -172,8 +172,8 @@
         {% endfor %}
 
         {% if is_share_view and is_printable %}
-            <li class="m-list_item m-social-media_print">
-                <button class="a-btn a-btn__link m-social-media_icon"
+            <li class="m-list__item m-social-media__print">
+                <button class="a-btn a-btn__link m-social-media__icon"
                    onclick="{{ print_info.share_url }}"
                    aria-label="{{ print_info.name }}"
                    type="button">
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html b/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
index 1ade5850104..5295d1eb3c3 100644
--- a/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
+++ b/cfgov/v1/jinja2/v1/includes/molecules/text-introduction.html
@@ -57,8 +57,8 @@ <h1>{{ value.heading }}</h1>
 {% for link in value.links %}
     {% if link.text %}
         {% if loop.first %}<ul class="m-list m-list__links">{% endif %}
-            <li class="m-list_item">
-                <a class="m-list_link"
+            <li class="m-list__item">
+                <a class="m-list__link"
                    href="{{ link.url }}"
                    {% if link.aria_label %}aria-label="{{ link.aria_label }}"{% endif %}>
                    {% if link.is_link_boldface %}<strong>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
index 3ccd61c0613..12e98d37ec3 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/ask-search.html
@@ -50,14 +50,14 @@
 
         <div class="o-search-bar_input">
             <div class="o-form__input-w-btn">
-                <div class="o-form__input-w-btn_input-container">
+                <div class="o-form--input-w-btn__input-container">
                     <div class="m-btn-inside-input
                                 input-contains-label
                                 {% if autocomplete %}m-autocomplete{% endif %}"
                          data-language="{{ language }}">
                         <label for="o-search-bar_query"
-                               class="input-contains-label_before
-                                      input-contains-label_before__search">
+                               class="input-contains-label__before
+                                      input-contains-label__before__search">
                             {{ svg_icon('search') }}
                             <span class="u-visually-hidden">
                                 {{ _('Search for your question') }}
@@ -76,7 +76,7 @@
                          id="o-search-bar_error-message"
                          role="alert">
                         {{ svg_icon('error-round') }}
-                        <p class="a-form-alert_text">
+                        <p class="a-form-alert__text">
                             Searches are limited to {{ autocomplete_max_chars }}
                             characters.
                             {% if complaint_link %}
@@ -87,7 +87,7 @@
                         </p>
                     </div>
                 </div>
-                <div class="o-form__input-w-btn_btn-container">
+                <div class="o-form--input-w-btn__btn-container">
                     <button class="a-btn"
                             type="submit"
                             aria-label="{{ _('Search Ask CFPB for your question') }}">
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
index d9971da4564..fd148243fd0 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/card-group.html
@@ -45,7 +45,7 @@
     <div class="block u-text-centered">
     {% if value.heading %}<h2 class="h1">{{ value.heading }}</h2>{% endif %}
     </div>
-    <div class="o-card-group_cards">
+    <div class="o-card-group__cards">
     {% for _card in value.cards %}
         {{ card.render( _card ) }}
     {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html b/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
index 0f5c8fd9a9f..88166635de2 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/data_snapshot.html
@@ -25,8 +25,8 @@
 
 <h2>Data snapshot</h2>
 <div class="o-info-unit-group">
-    <div class="content-l_col
-                content-l_col-1-2">
+    <div class="content-l__col
+                content-l__col-1-2">
         <h3><b>{{ value.num_originations }}</b>
         <br/>
         {{ value.num_originations_text }}
@@ -58,8 +58,8 @@ <h3><b>{{ value.inquiry_year_over_year_change }}</b>
     {% if value.image %}
     </div>
 
-    <div class="content-l_col
-                content-l_col-1-2">
+    <div class="content-l__col
+                content-l__col-1-2">
         <div class="m-full-width-media">
             {% set media = image(value.image, 'original') %}
             <img class="richtext-image full-width"
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
index a8fac63d80e..799bda80243 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/expandable.html
@@ -41,23 +41,23 @@
      id="{{ value.group_index_slug if value.group_index_slug else value.label | slugify_unique }}"
      {{ 'itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question"'
         if value.is_faq else '' }} >
-    <button class="o-expandable_header" type="button">
-        <span class="{{ 'h2' if value.is_larger_heading else 'h4'}} o-expandable_label"
+    <button class="o-expandable__header" type="button">
+        <span class="{{ 'h2' if value.is_larger_heading else 'h4'}} o-expandable__label"
               {{'itemprop="name"' if value.is_faq else ''}}>
             {% if value.icon %} {{ svg_icon( value.icon ) }} {% endif %} 
             {{ value.label }}
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                 {{ svg_icon('plus-round') }}
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+            <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                 {{ svg_icon('minus-round') }}
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content"
+    <div class="o-expandable__content"
           {{ 'itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"'
         if value.is_faq else '' }}>
         {% if value.is_faq %}<div itemprop='text'>{% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html b/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
index 979d80357f8..b8643b922d5 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
@@ -25,9 +25,9 @@ <h2 class="u-show-on-mobile u-mt45">
 
 <ul class="u-show-on-mobile category_list m-list m-list__links u-mb0">
 {% for card in value.feature_cards %}
-    <li class="m-list_item">
-        <a class="m-list_link a-link a-link__jump a-link__icon-after-text" href="{{ card.category.url }}">
-            <span class="a-link_text">{{ card.category.text }}</span>
+    <li class="m-list__item">
+        <a class="m-list__link a-link a-link__jump a-link__icon-after-text" href="{{ card.category.url }}">
+            <span class="a-link__text">{{ card.category.text }}</span>
             {{ svg_icon( card.icon ) }}
         </a>
     </li>
@@ -36,7 +36,7 @@ <h2 class="u-show-on-mobile u-mt45">
 
 <div class="u-hide-on-mobile question-categories u-mb30">
 <div class="o-card-group o-card-group__column-2">
-<div class="o-card-group_cards">
+<div class="o-card-group__cards">
 
 {% for card in value.feature_cards %}
     {{- feature_card(card) }}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
index 61e0841697d..4446ec6413c 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/featured-content.html
@@ -34,7 +34,7 @@
 
 <section class="o-featured-content-module
                 {{ 'o-featured-content-module__left' if value.layout_left }}">
-    <div class="o-featured-content-module_text">
+    <div class="o-featured-content-module__text">
         <h2 class="h3">{{ value.heading }}</h2>
 
         <p>{{ value.body }}</p>
@@ -42,8 +42,8 @@ <h2 class="h3">{{ value.heading }}</h2>
         {% if value.links %}
         <ul class="m-list m-list__links">
             {% for link in value.links %}
-                <li class="m-list_item">
-                    <a class="m-list_link"
+                <li class="m-list__item">
+                    <a class="m-list__link"
                        href="{{ link.url }}"
                        {% if link.aria_label %}aria-label="{{ link.aria_label }}"{% endif %}>
                        {% if link.is_link_boldface == True%}<strong>{% endif %}
@@ -62,8 +62,8 @@ <h2 class="h3">{{ value.heading }}</h2>
             {% include 'v1/includes/organisms/video-player.html' %}
         {% endwith %}
     {% elif value.image and value.image.url %}
-        <div class="o-featured-content-module_visual">
-            <img class="o-featured-content-module_img"
+        <div class="o-featured-content-module__visual">
+            <img class="o-featured-content-module__img"
                  src="{{ value.image.url }}"
                  alt="{{ value.image.alt_text }}">
         </div>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
index ffd3bedd7f6..16047163e46 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/filterable-list-controls.html
@@ -33,9 +33,9 @@
 {% endmacro %}
 
 {% macro _filter_multiselect( label, data, filter_count ) %}
-    <div class="content-l_col
-                content-l_col-1-{{ '3' if filter_count == 3 else '2' }}">
-        <div class="o-form_group">
+    <div class="content-l__col
+                content-l__col-1-{{ '3' if filter_count == 3 else '2' }}">
+        <div class="o-form__group">
             <div class="m-form-field">
                 <label class="a-label a-label__heading"
                         for="{{ data.id_for_label }}">
@@ -49,9 +49,9 @@
 
 {% macro _render_filter_fields(value, form) -%}
     {% if value.filter_by_keyword %}
-        <div class="content-l_col
-                    content-l_col-1">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading"
                            for="{{ form.title.id_for_label }}">
@@ -86,9 +86,9 @@
     {% endif %}
 
     {% if value.filter_by_category %}
-        <div class="content-l_col
-                    content-l_col-1-{{ '3' if filter_count == 3 else '2' }}">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1-{{ '3' if filter_count == 3 else '2' }}">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading"
                            for="{{ form.categories.id_for_label }}"
@@ -132,19 +132,19 @@
 
     {% if value.filter_by_date_range %}
         {# Ensures the dates appear on their own line #}
-        <div class="content-l_col
-                    content-l_col-1">
+        <div class="content-l__col
+                    content-l__col-1">
             <div class="content-l">
-                <div class="content-l_col
-                            content-l_col-2-3">
-                    <div class="o-form_group">
-                        <fieldset class="o-form_fieldset">
+                <div class="content-l__col
+                            content-l__col-2-3">
+                    <div class="o-form__group">
+                        <fieldset class="o-form__fieldset">
                             <legend class="a-legend">
                                 Date range
                             </legend>
                             <div class="content-l">
-                                <div class="content-l_col
-                                            content-l_col-1-2">
+                                <div class="content-l__col
+                                            content-l__col-1-2">
                                     <div class="m-form-field">
                                         <label class="a-label a-label__heading"
                                                 for="{{ form.from_date.id_for_label }}">
@@ -153,8 +153,8 @@
                                         {{ form.from_date }}
                                     </div>
                                 </div>
-                                <div class="content-l_col
-                                            content-l_col-1-2">
+                                <div class="content-l__col
+                                            content-l__col-1-2">
                                     <div class="m-form-field">
                                         <label class="a-label a-label__heading"
                                                 for="{{ form.to_date.id_for_label }}">
@@ -176,8 +176,8 @@
     <form method="get" action=".">
         <div class="content-l">
             {{ _render_filter_fields(value, form) }}
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <button class="a-btn" type="submit">
                     Apply filters
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/footer.html b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
index a5727043439..6d660fad787 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/footer.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/footer.html
@@ -20,62 +20,62 @@
 <footer class="o-footer">
     <div class="wrapper wrapper__match-content">
 
-        <div class="o-footer_pre">
+        <div class="o-footer__pre">
 
             <a class="a-btn
                       a-btn__secondary
-                      o-footer_top-button"
+                      o-footer__top-button"
                 data-gtm_ignore="true"
                 data-js-hook="behavior_return-to-top"
                 href="#">
                 {{ _('Back to top') }} {{ svg_icon('arrow-up') }}
             </a>
 
-            <ul class="o-footer_nav-list m-list">
+            <ul class="o-footer__nav-list m-list">
                 {% if language == 'es' %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/herramientas-del-consumidor/">Para consumidores</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/herramientas-del-consumidor/">Para consumidores</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/obtener-respuestas/">Obtener respuestas</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/obtener-respuestas/">Obtener respuestas</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/enviar-una-queja/">Enviar una queja</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/enviar-una-queja/">Enviar una queja</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/quienes-somos/">Quiénes somos</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/quienes-somos/">Quiénes somos</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/es/comprar-casa/">Comprar casa</a>
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/es/comprar-casa/">Comprar casa</a>
                     </li>
                 {% else %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/">
                             About Us
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/contact-us/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/contact-us/">
                             Contact Us
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/careers/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/careers/">
                             Careers
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/events/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/events/">
                             Events
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/enforcement/information-industry-whistleblowers/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/enforcement/information-industry-whistleblowers/">
                             Industry Whistleblowers
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/cfpb-ombudsman/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/cfpb-ombudsman/">
                             CFPB Ombudsman
                         </a>
                     </li>
@@ -87,7 +87,7 @@
                         block__padded-top">
                 {{ social_media.render( { 'is_share_view': false } ) }}
             </div>
-        </div>{# END .o-footer_pre #}
+        </div>{# END .o-footer__pre #}
 
         {% if language == 'es' %}
         <div class="block block__flush-bottom block__flush-top block__padded-bottom">
@@ -97,78 +97,78 @@
 
         <div class="o-footer-middle-left">
 
-            <div class="o-footer_col">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/foia-requests/">
+            <div class="o-footer__col">
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/foia-requests/">
                             FOIA
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/privacy/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/privacy/">
                             Privacy
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link"
+                    <li class="m-list__item">
+                        <a class="m-list__link"
                            href="/privacy/website-privacy-policy/">
                             Website Privacy Policy & Legal Notices
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/data/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/data/">
                             Data
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/open-government/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/open-government/">
                             Open Government
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/open-government/information-quality-guidelines/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/open-government/information-quality-guidelines/">
                             Information Quality Guidelines
                         </a>
                     </li>
                 </ul>
             </div>
-            <div class="o-footer_col">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/about-us/diversity-and-inclusion/">
+            <div class="o-footer__col">
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/about-us/diversity-and-inclusion/">
                             Diversity & Inclusion
                         </a>
                     </li>
                     {% if language != 'es' %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/administrative-adjudication-proceedings/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/administrative-adjudication-proceedings/">
                             Administrative Adjudication
                         </a>
                     </li>
                     {% endif %}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/plain-writing/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/plain-writing/">
                             Plain Writing
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/accessibility/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/accessibility/">
                             Accessibility
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/office-civil-rights/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/office-civil-rights/">
                             Office of Civil Rights
                         </a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/office-civil-rights/no-fear-act-cummings-act/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/office-civil-rights/no-fear-act-cummings-act/">
                             No FEAR Act &amp; Cummings Act
                         </a>
                     </li>
                     {% if language != 'es'%}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/tribal/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/tribal/">
                             Tribal
                         </a>
                     </li>
@@ -178,18 +178,18 @@
         </div>{# END .o-footer-middle-left #}
 
         <div class="o-footer-middle-right">
-                <ul class="o-footer_list m-list">
-                    <li class="m-list_item">
-                        <a class="m-list_link a-link"
+                <ul class="o-footer__list m-list">
+                    <li class="m-list__item">
+                        <a class="m-list__link a-link"
                            href="{{ _('https://www.usa.gov/') }}">{{ _('USA.gov') }}</a>
                     </li>
-                    <li class="m-list_item">
-                        <a class="m-list_link a-link"
+                    <li class="m-list__item">
+                        <a class="m-list__link a-link"
                            href="https://oig.federalreserve.gov/">Office of Inspector General</a>
                     </li>
                     {% if language == 'es'%}
-                    <li class="m-list_item">
-                        <a class="m-list_link" href="/cfpb-ombudsman/">
+                    <li class="m-list__item">
+                        <a class="m-list__link" href="/cfpb-ombudsman/">
                             CFPB Ombudsman
                         </a>
                      </li>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/header.html b/cfgov/v1/jinja2/v1/includes/organisms/header.html
index c484c921e2b..a8bf453f4c1 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/header.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/header.html
@@ -67,12 +67,12 @@
     {% import 'v1/includes/molecules/global-eyebrow.html' as global_eyebrow with context %}
     {{ global_eyebrow.render( true, language ) }}
 
-    <div class="o-header_content">
+    <div class="o-header__content">
 
         <div class="wrapper wrapper__match-content">
             {% if language == 'es' %}
-            <a class="o-header_logo" href="/es/">
-                <img class="o-header_logo-img"
+            <a class="o-header__logo" href="/es/">
+                <img class="o-header__logo-img"
                      src="{{ static('img/logo_es_286x50.png') }}"
                      srcset="{{ static('img/logo_es_228x40.png') }} 228w,
                              {{ static('img/logo_es_228x40@2x.png') }} 456w,
@@ -85,8 +85,8 @@
                      alt="Oficina para la Protección Financiera del Consumidor">
             </a>
             {% else %}
-            <a class="o-header_logo" href="/">
-                <img class="o-header_logo-img"
+            <a class="o-header__logo" href="/">
+                <img class="o-header__logo-img"
                      src="{{ static('img/logo_237x50.png') }}"
                      srcset="{{ static('img/logo_161x34.png') }} 161w,
                              {{ static('img/logo_161x34@2x.png') }} 322w,
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
index 5a81d739529..4a2546cbc84 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group-2.html
@@ -60,10 +60,10 @@
                 {{- ' content-l__top-divider' if value.lines_between_items else '' -}}">
     {% endif %}
 
-        <div class="content-l_col
-                    {{- ' content-l_col-1-2' if value.format == '50-50' else '' -}}
-                    {{- ' content-l_col-1-3' if value.format == '33-33-33' else '' -}}
-                    {{- ' content-l_col-1' if value.format == '25-75' else '' -}}">
+        <div class="content-l__col
+                    {{- ' content-l__col-1-2' if value.format == '50-50' else '' -}}
+                    {{- ' content-l__col-1-3' if value.format == '33-33-33' else '' -}}
+                    {{- ' content-l__col-1' if value.format == '25-75' else '' -}}">
             {{- info_unit(unit, value.format, value.link_image_and_heading, value.border_radius_image) }}
         </div>
 
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
index a5f533fca61..46bbda518dd 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/info-unit-group.html
@@ -30,8 +30,8 @@ <h2>{{ heading | safe }}</h2>
 
     <div class="content-l">
         {% for block in blocks %}
-        <div class="content-l_col
-                    content-l_col-1-{{ columns }}">
+        <div class="content-l__col
+                    content-l__col-1-{{ columns }}">
             {{ block }}
         </div>
         {% endfor %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html b/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
index c1d3f9003b1..3ce57340220 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html
@@ -36,7 +36,7 @@
 
 <div class="o-item-introduction">
     {% if filter_page_url and page.categories.count() > 0 and value.show_category %}
-        <div class="o-item-introduction_intro">
+        <div class="o-item-introduction__intro">
             {{ category_slug.render(category=page.categories.first().name, href=filter_page_url) }}
         </div>
     {% endif %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
index ebf0db1b529..c7ed35c624b 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-chart.html
@@ -33,7 +33,7 @@
         <h3 class="u-mb30">Filter by location to display trends</h3>
         <form class="content-l u-mb45" id="mp-line-chart-controls" name="mp-line-chart-controls">
             <div id="mp-chart-loading" class="mp-loading"></div>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <label class="a-label" for="mp-line-chart-geo"><h4>Select location type</h4></label>
                 <div class="m-form-field m-form-field__radio" id="mp-line-chart-geo">
                     <div class="m-form-field m-form-field__radio u-mb10">
@@ -53,7 +53,7 @@ <h3 class="u-mb30">Filter by location to display trends</h3>
                     </div>
                 </div>
             </fieldset>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <div class="m-form-field m-form-field__select mp-line-chart-select-container u-mb30" id="mp-line-chart-state-container" style="display:none">
                     <label class="a-label" for="mp-line-chart-state"><h4 id="mp-state-dropdown-title">Select state</h4></label>
                     <div class="a-select">
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
index dc99fee015e..ae407da4fbb 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/mortgage-map.html
@@ -28,7 +28,7 @@
         <form id="mp-map-controls" name="mp-map-controls" class="mp-controls u-js-only">
             <div id="mp-map-loading" class="mp-loading"></div>
             <h3 class="u-mb30">Choose location to display on the map</h3>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <label class="a-label" for="mp-map-geo"><h4>Select map view</h4></label>
                 <div class="m-form-field m-form-field__radio" id="mp-map-geo">
                     <div class="m-form-field m-form-field__radio u-mb10">
@@ -42,7 +42,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
                     </div>
                 </div>
             </fieldset>
-            <fieldset class="content-l_col content-l_col-1-2">
+            <fieldset class="content-l__col content-l__col-1-2">
                 <div class="m-form-field m-form-field__select mp-map-select-container" id="mp-map-state-container">
                     <label class="a-label" for="mp-map-state"><h4>Select state to zoom</h4></label>
                     <div class="a-select">
@@ -121,7 +121,7 @@ <h3 class="u-mb30">Choose location to display on the map</h3>
             </fieldset>
             <fieldset class="content-l">
                 <h4 class="u-mt30">Select month and year to display</h4>
-                <div class="content-l_col content-l_col-1-2 u-m0">
+                <div class="content-l__col content-l__col-1-2 u-m0">
                     <div class="m-form-field m-form-field__select" id="mp-map-month-container">
                         <label class="a-label u-mb15" for="mp-map-month">Month</label>
                         <div class="a-select">
@@ -142,7 +142,7 @@ <h4 class="u-mt30">Select month and year to display</h4>
                         </div>
                     </div>
                 </div>
-                <div class="content-l_col content-l_col-1-2">
+                <div class="content-l__col content-l__col-1-2">
                     <div class="m-form-field m-form-field__select" id="mp-map-year-container">
                         <label class="a-label u-mb15" for="mp-map-year">Year</label>
                         <div class="a-select">
@@ -158,11 +158,11 @@ <h4 class="u-mt30">Select month and year to display</h4>
                         u-mt30"
                   id="mp-map-notification">
                 {{ svg_icon('warning-round') }}
-                <div class="m-notification_content">
-                    <div class="h4 m-notification_message">
+                <div class="m-notification__content">
+                    <div class="h4 m-notification__message">
                         Invalid date
                     </div>
-                    <p class="m-notification_explanation">
+                    <p class="m-notification__explanation">
                         We only have data available through {{ thru_month_formatted }}.
                         Please select a valid date.
                     </p>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html b/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
index dc8487f457e..513e869cf2f 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
@@ -64,15 +64,15 @@
     <article class="o-post-preview" lang="{{ post.language }}">
         <div class="m-meta-header">
             {% if show_categories and post.categories.exists()  %}
-            <div class="m-meta-header_item-group">
+            <div class="m-meta-header__item-group">
                 {% import 'v1/includes/macros/category-slug.html' as category_slug %}
                 {% for cat in post.categories.all() %}
-                    <span class="m-meta-header_item">{{ category_slug.render(category=cat.name) }}</span>
+                    <span class="m-meta-header__item">{{ category_slug.render(category=cat.name) }}</span>
                 {% endfor %}
             </div>
             {% endif %}
             {% if show_date %}
-            <div class="m-meta-header_item">
+            <div class="m-meta-header__item">
                 <span class="a-date">
                     {{ date_label | default( '', true ) }}
                     {% if 'EventPage' in post.specific_class.__name__ %}
@@ -92,14 +92,14 @@
         {% if 'EventPage' in post.specific_class.__name__ %}
             {% set event = post.specific %}
             {% if event.venue_image_type != 'none' %}
-                <div class="o-post-preview_image-container">
+                <div class="o-post-preview__image-container">
                     {% if event.venue_image_type == 'map' %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ event.location_image_url() }}"
                              alt="">
                     {% elif event.venue_image_type == 'image' and event.venue_image %}
                         {% set img = image(event.venue_image, 'width-540') %}
-                        <img class="o-post-preview_image"
+                        <img class="o-post-preview__image"
                              src="{{ img.url }}"
                              alt="{{ image_alt_value(img) }}">
                     {% endif %}
@@ -107,7 +107,7 @@
             {% endif %}
         {% endif %}
 
-        <div class="o-post-preview_content">
+        <div class="o-post-preview__content">
         {% if 'EventPage' in post.specific_class.__name__ %}
             {% set event = post.specific %}
             {% if event.start_dt %}
@@ -120,7 +120,7 @@
             {% endif %}
         {% endif %}
 
-            <h3 class="o-post-preview_title">
+            <h3 class="o-post-preview__title">
                 <a href="{{ post_url }}">
                     {{- post.seo_title or post.title -}}
                 </a>
@@ -129,7 +129,7 @@ <h3 class="o-post-preview_title">
             {% if 'EventPage' in post.specific_class.__name__ %}
                 {% set event = post.specific %}
                 {% if event.start_dt %}
-                    <div class="o-post-preview_subtitle">
+                    <div class="o-post-preview__subtitle">
                     {% if event.venue_city and event.venue_state %}
                         {{ event.venue_city }}, {{ event.venue_state }}
                     {% endif %}
@@ -141,17 +141,17 @@ <h3 class="o-post-preview_title">
                 {% endif %}
             {% endif %}
             {% if post.comments_close_date %}
-                <div class="o-post-preview_subtitle">
+                <div class="o-post-preview__subtitle">
                     Comments close {{ time.render(post.comments_close_date, {'date':true}) }}
                 </div>
             {% endif %}
             {% if post.search_description %}
-                <div class="o-post-preview_description">
+                <div class="o-post-preview__description">
                     {{ post.search_description }}
                 </div>
             {% endif %}
             {% if post.get_authors() %}
-                <div class="o-post-preview_byline-group">
+                <div class="o-post-preview__byline-group">
                 {% for author in post.get_authors() %}
                     {% if loop.first %}By {% elif loop.last %}and {% endif %}
                     {{ author.name }}</a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
index ea1b6ca7e5b..063df9fdc13 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav-fig.html
@@ -35,21 +35,21 @@ <h3>Table of contents</h3>
     {% set version_label = " (" + _(version_status) + ")" if version_status else '' %}
     {% set sec_nav_settings_label = sec_nav_settings_label + version_label %}
     <nav class="o-secondary-nav" aria-label="{{ _('Table of contents') }}">
-        <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-            <span class="o-secondary-nav_label">
+        <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+            <span class="o-secondary-nav__label">
                 {{ sec_nav_settings_label }}
             </span>
-            <span class="o-secondary-nav_cues">
-                <span class="o-secondary-nav_cue-open" aria-label="Show">
+            <span class="o-secondary-nav__cues">
+                <span class="o-secondary-nav__cue-open" aria-label="Show">
                     {{ svg_icon('down') }}
                 </span>
-                <span class="o-secondary-nav_cue-close" aria-label="Hide">
+                <span class="o-secondary-nav__cue-close" aria-label="Hide">
                     {{ svg_icon('up') }}
                 </span>
             </span>
         </button>
 
-        <div class="o-secondary-nav_content">
+        <div class="o-secondary-nav__content">
 
         {% if version_status %}
             <p class="u-hide-on-desktop">
@@ -57,16 +57,16 @@ <h3>Table of contents</h3>
             </p>
         {% endif %}
         <div id="ctrl-f"></div>
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents">
             {%- for item in toc_headers %}
             <li>
                 {{ _navlink(item.id + ". " + item.header, item.anchor, true) }}
                 {% if item.children %}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children">
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children">
                     {%- for child in item.children %}
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         {{ _navlink(child.id + ". " + child.header, child.anchor, false) }}
                     </li>
                 {%- endfor %}
@@ -80,9 +80,9 @@ <h3>Table of contents</h3>
 {% endmacro %}
 
 {% macro _navlink(text, href, parent=true, current=false) %}
-<a class="o-secondary-nav_link
-          {{ 'o-secondary-nav_link__parent' if parent else '' }}
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          {{ 'o-secondary-nav__link__parent' if parent else '' }}
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
index baabfd3c20e..ecdba831f31 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/secondary-nav.html
@@ -19,29 +19,29 @@
             {{ '' if any_children else 'o-secondary-nav__no-children' }}"
      aria-label="{{ _('Section navigation') }}">
 
-    <button class="o-secondary-nav_header" type="button" aria-expanded="false">
-        <span class="o-secondary-nav_label">
+    <button class="o-secondary-nav__header" type="button" aria-expanded="false">
+        <span class="o-secondary-nav__label">
             {{ _('Navigate this section') }}
         </span>
-        <span class="o-secondary-nav_cues">
-            <span class="o-secondary-nav_cue-open" aria-label="Show">
+        <span class="o-secondary-nav__cues">
+            <span class="o-secondary-nav__cue-open" aria-label="Show">
                 {{ svg_icon('down') }}
             </span>
-            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                 {{ svg_icon('up') }}
             </span>
         </span>
     </button>
 
-    <div class="o-secondary-nav_content">
-        <ul class="o-secondary-nav_list
-                   o-secondary-nav_list__parents">
+    <div class="o-secondary-nav__content">
+        <ul class="o-secondary-nav__list
+                   o-secondary-nav__list--parents">
         {%- for item in nav_items %}
             <li data-nav-is-active="{{ item.expanded }}">
                 {{ _navlink(item.title, item.url, true, item.active) }}
             {%- if item.children -%}
-                <ul class="o-secondary-nav_list
-                           o-secondary-nav_list__children">
+                <ul class="o-secondary-nav__list
+                           o-secondary-nav__list__children">
                 {%- for child in item.children -%}
                     <li>
                         {{ _navlink(child.title, child.url, false, child.active) }}
@@ -57,9 +57,9 @@
 {% endmacro %}
 
 {% macro _navlink(text, href, parent=true, current=false) %}
-<a class="o-secondary-nav_link
-          {{ 'o-secondary-nav_link__parent' if parent else '' }}
-          {{ 'o-secondary-nav_link__current' if current else '' }}"
+<a class="o-secondary-nav__link
+          {{ 'o-secondary-nav__link__parent' if parent else '' }}
+          {{ 'o-secondary-nav__link__current' if current else '' }}"
    {{ 'href=' ~ href | e if not current else '' }}>
     {{ text | e }}
 </a>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
index 9c4bd762d4a..629077201a6 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-breakout.html
@@ -20,22 +20,22 @@
 <div class="o-sidebar-breakout
             content__flush-bottom
             wrapper">
-    <div class="content_intro">
+    <div class="content__intro">
         <div class="content-l">
             {% if caller is defined %}
                 {% for block in page.content %}
                     {% if 'text_introduction' in block.block_type %}
-                        <section class="o-sidebar-breakout_col
-                                        content-l_col
-                                        content-l_col-2-3">
+                        <section class="o-sidebar-breakout__col
+                                        content-l__col
+                                        content-l__col-2-3">
                             {{ caller(block) }}
                         </section>
                     {% endif %}
                 {% endfor %}
             {% endif %}
-            <aside class="o-sidebar-breakout_col
-                          content-l_col
-                          content-l_col-1-3
+            <aside class="o-sidebar-breakout__col
+                          content-l__col
+                          content-l__col-1-3
                           block
                           block__flush-bottom">
                 {% for block in page.sidebar_breakout %}
@@ -43,17 +43,17 @@
                         {% set blocks = block.value.bound_blocks %}
                         {% if blocks.image is defined %}
                             {% set photo = image(blocks.image.value, 'original') %}
-                            <div class="o-sidebar-breakout_img-container
-                                        {{ 'o-sidebar-breakout_img-container__round'
+                            <div class="o-sidebar-breakout__img-container
+                                        {{ 'o-sidebar-breakout__img-container__round'
                                            if blocks.is_round | string == 'True' else '' }}">
-                              <div class="o-sidebar-breakout_img"
+                              <div class="o-sidebar-breakout__img"
                                    style="background-image:url( {{ photo.url }} )">
                               </div>
                             </div>
                             {% if blocks.heading.value or blocks.body.value %}
-                                <div class="o-sidebar-breakout_text-container">
+                                <div class="o-sidebar-breakout__text-container">
                                 {% if blocks.heading.value %}
-                                    <h4 class="o-sidebar-breakout_text-heading">
+                                    <h4 class="o-sidebar-breakout__text-heading">
                                         {% if blocks.icon %}
                                             {{ svg_icon(blocks.icon) }}
                                         {% endif %}
@@ -61,7 +61,7 @@ <h4 class="o-sidebar-breakout_text-heading">
                                     </h4>
                                 {% endif %}
                                 {% if blocks.body.value %}
-                                    <p class="o-sidebar-breakout_text-body">
+                                    <p class="o-sidebar-breakout__text-body">
                                         {{ blocks.body.render() | safe }}
                                     </p>
                                 {% endif %}
@@ -72,12 +72,12 @@ <h4 class="o-sidebar-breakout_text-heading">
                         {% include_block block %}
                     {% elif 'slug' in block.block_type %}
                         <header class="m-slug-header">
-                            <h2 class="m-slug-header_heading">
+                            <h2 class="m-slug-header__heading">
                                 {{ block.value }}
                             </h2>
                         </header>
                     {% elif 'paragraph' in block.block_type %}
-                        <p class="o-sidebar-breakout_text-body">
+                        <p class="o-sidebar-breakout__text-body">
                             {{ block.value | safe }}
                         </p>
                     {% else %}
@@ -89,5 +89,5 @@ <h2 class="m-slug-header_heading">
         </div>
     </div>
 </div>
-<div class="content_line"></div>
+<div class="content__line"></div>
 {% endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
index 497c87f535d..0bea4ea6e42 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/sidebar-contact-info.html
@@ -41,7 +41,7 @@
 <div class="o-sidebar-contact-info">
     <div class="o-sidebar-contact-info_heading">
       <header class="m-slug-header">
-          <h2 class="m-slug-header_heading">
+          <h2 class="m-slug-header__heading">
               Contact Information
           </h2>
       </header>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html b/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
index 54cca1dc9e0..6dcd969cc0d 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/tables/base.html
@@ -84,7 +84,7 @@
                 {% if col.heading -%}
                     <th scope="col"
                         {{- ' data-column' if col.preserve_column_on_mobile else '' -}}
-                        {{- ' class="o-table_cell__right-align"' | safe if col.right_align else '' -}}>
+                        {{- ' class="o-table__cell--right-align"' | safe if col.right_align else '' -}}>
                         {{ col.heading }}
                     </th>
                 {%- endif %}
@@ -117,7 +117,7 @@
                         {% set attrs = attrs ~ ' data-column' %}
                     {%- endif -%}
                     {%- if loop.index0 in columns_to_right_align -%}
-                        {% set attrs = attrs ~ ' class="o-table_cell__right-align"' | safe %}
+                        {% set attrs = attrs ~ ' class="o-table__cell--right-align"' | safe %}
                     {%- endif -%}
 
                     <{{ tag }}{{ attrs }}>
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
index 4ca38d9cc7b..5fc25d23cd0 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
@@ -46,17 +46,17 @@
 
     <div class="o-video-player
                 o-video-player__youtube
-                {{- ' o-featured-content-module_visual' if is_fcm else '' }}"
+                {{- ' o-featured-content-module__visual' if is_fcm else '' }}"
          data-id="{{ video_id }}"
          data-src="{{ video_url }}"
          {{- ' data-custom-thumbnail' if thumbnail_url else '' }}>
         {{ caller() | safe if caller else '' }}
-        <div class="o-video-player_video-container
-                    {{- ' o-video-player_video-container__flexible' if not is_fcm else '' }}
+        <div class="o-video-player__video-container
+                    {{- ' o-video-player__video-container__flexible' if not is_fcm else '' }}
                     u-show-on-video-playing">
-            <div class="o-video-player_video-actions-container">
-                <div class="o-video-player_video-actions">
-                    <button class="a-btn o-video-player_close-btn"
+            <div class="o-video-player__video-actions-container">
+                <div class="o-video-player__video-actions">
+                    <button class="a-btn o-video-player__close-btn"
                         aria-label="{{ _('Close video') }}"
                         aria-hidden="true"
                         tabindex="-1">
@@ -74,8 +74,8 @@
                     } ) }}
                 {% endif %}
             </div>
-            <div class="o-video-player_iframe-container">
-                <iframe class="o-video-player_iframe"
+            <div class="o-video-player__iframe-container">
+                <iframe class="o-video-player__iframe"
                     src="{{ video_url }}"
                     allow="fullscreen; autoplay"
                     aria-hidden="true"
@@ -83,12 +83,12 @@
                 </iframe>
             </div>
         </div>
-        <div class="o-video-player_image-container
+        <div class="o-video-player__image-container
                     u-hide-on-video-playing">
 
             {# This link is for the default, no-JavaScript, state of the video player. #}
-            <a class="o-video-player_play-btn
-                      o-video-player_play-btn__{{ button_pos }}"
+            <a class="o-video-player__play-btn
+                      o-video-player__play-btn__{{ button_pos }}"
                href="{{ video_url }}"
                target="_blank"
                rel="noopener noreferrer"
@@ -101,8 +101,8 @@
                 TODO: Figure out how to pull video title from API and put it
                 in aria-label below for screen readers.
             #}
-            <button class="o-video-player_play-btn
-                           o-video-player_play-btn__{{ button_pos }}
+            <button class="o-video-player__play-btn
+                           o-video-player__play-btn__{{ button_pos }}
                            u-hidden"
                     aria-label="{{ _('Play video') }}">
                 {{ svg_icon('play') }}
@@ -119,16 +119,16 @@
                 thumbnail_url or
                 static( 'img/cfpb_video_cover_card_954x200.png' )
             %}
-            <img class="o-video-player_image
-                        {{- ' o-video-player_image__thumbnail' if thumbnail_url else '' }}
-                        {{- ' o-featured-content-module_img' if is_fcm else '' }}"
+            <img class="o-video-player__image
+                        {{- ' o-video-player__image__thumbnail' if thumbnail_url else '' }}
+                        {{- ' o-featured-content-module__img' if is_fcm else '' }}"
                  alt=""
                  src="{{ image_url }}">
 
             {#
                 Provide a duration timestamp in the corner of the video.
             #}
-            <time class="o-video-player_duration u-hidden">00:00</time>
+            <time class="o-video-player__duration u-hidden">00:00</time>
         </div>
     </div>
 {%- endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html b/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
index 6cb4f04d364..81bc2a4e523 100644
--- a/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
+++ b/cfgov/v1/jinja2/v1/includes/snippets/reusable_text.html
@@ -24,7 +24,7 @@
 
 {% if value.sidefoot_heading %}
     <header class="m-slug-header">
-       <h2 class="m-slug-header_heading">
+       <h2 class="m-slug-header__heading">
            {{ value.sidefoot_heading }}
        </h2>
     </header>
diff --git a/cfgov/v1/jinja2/v1/includes/tags.html b/cfgov/v1/jinja2/v1/includes/tags.html
index 292d5b60034..b537c072f95 100644
--- a/cfgov/v1/jinja2/v1/includes/tags.html
+++ b/cfgov/v1/jinja2/v1/includes/tags.html
@@ -23,19 +23,19 @@
 {% macro render(tags, show_heading=true) %}
 <div class="m-tags">
     {% if show_heading %}
-    <span class="m-tags_heading">
+    <span class="m-tags__heading">
         Topics:
     </span>
     {% endif %}
-    <ul class="m-tags_list" aria-label="Topics">
+    <ul class="m-tags__list" aria-label="Topics">
         {% for tag in tags %}
-        <li class="m-tags_item">
+        <li class="m-tags__item">
             {% if tag.url %}
-            <a href="{{ tag.url }}" class="m-tags_tag">
+            <a href="{{ tag.url }}" class="m-tags__tag">
             {% else %}
-            <span class="m-tags_tag">
+            <span class="m-tags__tag">
             {% endif %}
-                <span class="m-tags_bullet" aria-hidden="true">&bull;</span>
+                <span class="m-tags__bullet" aria-hidden="true">&bull;</span>
                 {{ tag.text }}
             {% if tag.url %}
             </a>
diff --git a/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html b/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
index ede5194b237..f425a85215e 100644
--- a/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
+++ b/cfgov/v1/jinja2/v1/includes/templates/upcoming-events.html
@@ -1,6 +1,6 @@
 <div class="upcoming-events">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Upcoming events
         </h2>
     </header>
diff --git a/cfgov/v1/jinja2/v1/landing-page/index.html b/cfgov/v1/jinja2/v1/landing-page/index.html
index 3dbad631f68..313cadda66a 100644
--- a/cfgov/v1/jinja2/v1/landing-page/index.html
+++ b/cfgov/v1/jinja2/v1/landing-page/index.html
@@ -3,7 +3,7 @@
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_intro -%}
+{% block content__intro -%}
     {% for block in page.header -%}
         {% if 'hero' in block.block_type %}
             {% include_block block %}
@@ -11,7 +11,7 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if block.block_type != 'hero' %}
             {{ render_block.render(block, loop.index) }}
@@ -22,6 +22,6 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/v1/jinja2/v1/layouts/404.html b/cfgov/v1/jinja2/v1/layouts/404.html
index a1857accc89..798056bb5fd 100644
--- a/cfgov/v1/jinja2/v1/layouts/404.html
+++ b/cfgov/v1/jinja2/v1/layouts/404.html
@@ -17,11 +17,11 @@
     error-page
 {%- endblock %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     error-page_main error-page_404
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <header>
             <h1>404: Page not found</h1>
@@ -34,10 +34,10 @@ <h1>404: Page not found</h1>
 
         <aside class="block block__sub">
             <ul class="m-list m-list__horizontal m-list__divider">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
@@ -48,7 +48,7 @@ <h1>404: Page not found</h1>
         <p>Are you sure this is the right web address?
             <a class="a-link a-link__jump"
             href={{"mailto:CFPB_website@consumerfinance.gov?subject=404%20Error%20at%20%22" + request.build_absolute_uri() + "%22"}}>
-                <span class="a-link_text">Let us know</span>
+                <span class="a-link__text">Let us know</span>
             </a>
         </p>
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/500.html b/cfgov/v1/jinja2/v1/layouts/500.html
index 2b9ad7f9482..5734083b83e 100644
--- a/cfgov/v1/jinja2/v1/layouts/500.html
+++ b/cfgov/v1/jinja2/v1/layouts/500.html
@@ -17,11 +17,11 @@
     error-page
 {%- endblock %}
 
-{% block content_main_modifiers -%}
+{% block content__main_modifiers -%}
     error-page_main error-page_500
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <header>
             <h1>500: Server error</h1>
@@ -34,10 +34,10 @@ <h1>500: Server error</h1>
 
         <aside class="block block__sub">
             <ul class="m-list m-list__horizontal m-list__divider">
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a href="/" class="a-btn a-btn__full-on-xs">Visit homepage</a>
                 </li>
-                <li class="m-list_item">
+                <li class="m-list__item">
                     <a class="a-btn a-btn__full-on-xs" href="/about-us/contact-us/">
                         Contact us
                     </a>
@@ -48,7 +48,7 @@ <h1>500: Server error</h1>
         <p>Are you sure this is the right web address?
             <a class="a-link a-link__jump"
                href={{"mailto:CFPB_website@consumerfinance.gov?subject=500%20Error%20at%20%22" + request.build_absolute_uri() + "%22"}} >
-                <span class="a-link_text">Let us know</span>
+                <span class="a-link__text">Let us know</span>
             </a>
         </p>
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html b/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
index 9cb376ecdf9..6a8f5b82d24 100644
--- a/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
+++ b/cfgov/v1/jinja2/v1/layouts/_breadcrumbs.html
@@ -3,7 +3,7 @@
 {% endif %}
 
 {% if breadcrumb_items | length > 0 %}
-    <div class="u-layout-grid_breadcrumbs">
+    <div class="u-layout-grid__breadcrumbs">
         {%- import 'v1/includes/molecules/breadcrumbs.html' as breadcrumbs with context -%}
         {{ breadcrumbs.render(breadcrumb_items) }}
     </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/base.html b/cfgov/v1/jinja2/v1/layouts/base.html
index 4283e2722dc..5b425db38ed 100644
--- a/cfgov/v1/jinja2/v1/layouts/base.html
+++ b/cfgov/v1/jinja2/v1/layouts/base.html
@@ -255,7 +255,7 @@
     <div class="a-overlay u-hidden"></div>
 
     <div class="skip-nav">
-        <a class="skip-nav_link"
+        <a class="skip-nav__link"
           href="{% block skip_nav_target %}#main{% endblock %}">
             {{ _('Skip to main content') }}
         </a>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
index 99952324ac1..df104dd6804 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-1-3.html
@@ -4,7 +4,7 @@
     {# Overrides the default skip nav target of #main so that we skip over the
        left side nav on pages that extend this template and go right to the
        main content area. #}
-    #content_main
+    #content__main
 {%- endblock %}
 
 {% block content scoped %}
@@ -13,19 +13,19 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block hero -%}{%- endblock %}
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
             {% block body_content scoped %}
-                <aside class="u-layout-grid_secondary-nav">
+                <aside class="u-layout-grid__secondary-nav">
                     {% import 'v1/includes/organisms/secondary-nav.html' as secondary_nav with context %}
                     {{ secondary_nav.render() }}
                 </aside>
-                <div class="u-layout-grid_main"
-                        id="content_main">
-                    {% block content_main scoped -%}{%- endblock %}
+                <div class="u-layout-grid__main"
+                        id="content__main">
+                    {% block content__main scoped -%}{%- endblock %}
                 </div>
             {% endblock %}
         </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
index 2e6f7595f37..551c66a3c0c 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-2-1.html
@@ -6,23 +6,23 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        {% if self.content_intro() %}
+        {% if self.content__intro() %}
             <div class="u-layout_content-intro">
-                {% block content_intro scoped -%}{%- endblock %}
+                {% block content__intro scoped -%}{%- endblock %}
             </div>
         {% endif %}
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
 
             {% block body_content scoped %}
-                <div class="u-layout-grid_main">
-                    {% block content_main scoped -%}{%- endblock %}
+                <div class="u-layout-grid__main">
+                    {% block content__main scoped -%}{%- endblock %}
                 </div>
-                <aside class="u-layout-grid_sidebar">
-                    {% block content_sidebar scoped -%}{%- endblock %}
+                <aside class="u-layout-grid__sidebar">
+                    {% block content__sidebar scoped -%}{%- endblock %}
                 </aside>
             {% endblock %}
         </div>
diff --git a/cfgov/v1/jinja2/v1/layouts/layout-full.html b/cfgov/v1/jinja2/v1/layouts/layout-full.html
index e8d519a80d2..adb1346ccc2 100644
--- a/cfgov/v1/jinja2/v1/layouts/layout-full.html
+++ b/cfgov/v1/jinja2/v1/layouts/layout-full.html
@@ -10,21 +10,21 @@
           id="main"
           {% if language == 'ar' %} dir="rtl" {% endif %}>
 
-        {% if self.content_intro() %}
+        {% if self.content__intro() %}
             <div class="u-layout_content-intro">
-                {% block content_intro scoped -%}{%- endblock %}
+                {% block content__intro scoped -%}{%- endblock %}
             </div>
         {% endif %}
 
-        <div class="u-layout-grid_wrapper">
+        <div class="u-layout-grid__wrapper">
             {% block pre_content scoped -%}
                 {% include 'v1/layouts/_breadcrumbs.html' %}
             {%- endblock %}
 
             {% block body_content scoped %}
-                {# content_main_modifiers block is only used by the homepage #}
-                <div class="u-layout-grid_main {% block content_main_modifiers -%}{%- endblock %}">
-                    {% block content_main scoped -%}{%- endblock %}
+                {# content__main_modifiers block is only used by the homepage #}
+                <div class="u-layout-grid__main {% block content__main_modifiers -%}{%- endblock %}">
+                    {% block content__main scoped -%}{%- endblock %}
                 </div>
             {% endblock %}
         </div>
diff --git a/cfgov/v1/jinja2/v1/learn-page/index.html b/cfgov/v1/jinja2/v1/learn-page/index.html
index 5b7cebde727..30d626fe1fb 100644
--- a/cfgov/v1/jinja2/v1/learn-page/index.html
+++ b/cfgov/v1/jinja2/v1/learn-page/index.html
@@ -4,7 +4,7 @@
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if block.block_type == 'item_introduction' %}
             {{ item_introduction.render(block.value) }}
@@ -24,6 +24,6 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/v1/jinja2/v1/newsroom/index.html b/cfgov/v1/jinja2/v1/newsroom/index.html
index 0e3737c0a1e..28eb34cb306 100644
--- a/cfgov/v1/jinja2/v1/newsroom/index.html
+++ b/cfgov/v1/jinja2/v1/newsroom/index.html
@@ -2,7 +2,7 @@
 
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.header -%}
         {% if 'featured_content' in block.block_type %}
             <div class="block
@@ -44,8 +44,8 @@
             <div class="content-l">
                 <section class="block
                                 block__flush-top
-                                content-l_col
-                                content-l_col-1-2">
+                                content-l__col
+                                content-l__col-1-2">
                     {% import 'v1/includes/molecules/related-content.html' as related_links %}
                     {{- related_links.render({
                         'heading': 'Related links',
@@ -60,7 +60,7 @@
                         }
                     ]}) -}}
                 </section>
-                <section class="block content-l_col content-l_col-1-2">
+                <section class="block content-l__col content-l__col-1-2">
                     {% include 'v1/includes/templates/upcoming-events.html' %}
                 </section>
             </div>
diff --git a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
index dd7cea9908d..7ad0a95b68e 100644
--- a/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
+++ b/cfgov/v1/jinja2/v1/newsroom/newsroom-page.html
@@ -3,7 +3,7 @@
 {% block post_article_content %}
     <aside class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">
+            <h2 class="m-slug-header__heading">
                 Press information
             </h2>
         </header>
diff --git a/cfgov/v1/jinja2/v1/story_page.html b/cfgov/v1/jinja2/v1/story_page.html
index 85040f9a415..19f9279ed50 100644
--- a/cfgov/v1/jinja2/v1/story_page.html
+++ b/cfgov/v1/jinja2/v1/story_page.html
@@ -1,6 +1,6 @@
 {% extends "v1/layouts/layout-full.html" %}
 
-{% block content_intro %}
+{% block content__intro %}
     {% for block in page.header -%}
         {% if block.block_type == 'features' %}
             <section class="wrapper
@@ -25,7 +25,7 @@
   {{ super() }} content__center-image-bleed content__supersize-headings
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     {% for block in page.content %}
         <div class="block{{ ' block__flush-top' if loop.first else '' }}">
             {% include_block block %}
diff --git a/cfgov/v1/jinja2/v1/sublanding-page/filterable.html b/cfgov/v1/jinja2/v1/sublanding-page/filterable.html
index fe6d4e4d026..cdb16554297 100644
--- a/cfgov/v1/jinja2/v1/sublanding-page/filterable.html
+++ b/cfgov/v1/jinja2/v1/sublanding-page/filterable.html
@@ -1,6 +1,6 @@
 {% extends "v1/sublanding-page/index.html" %}
 
-{% block content_main %}
+{% block content__main %}
     {{ super() }}
 
     <div class="block">
diff --git a/cfgov/v1/jinja2/v1/sublanding-page/index.html b/cfgov/v1/jinja2/v1/sublanding-page/index.html
index 3c4f0c4efc2..dd46d3ef8af 100644
--- a/cfgov/v1/jinja2/v1/sublanding-page/index.html
+++ b/cfgov/v1/jinja2/v1/sublanding-page/index.html
@@ -2,7 +2,7 @@
 
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
-{% block content_intro -%}
+{% block content__intro -%}
     {% for block in page.header -%}
         {% import 'v1/includes/templates/render_block.html' as render_block with context %}
         {{ render_block.render(block, loop.index) }}
@@ -18,7 +18,7 @@
 {# Remove breadcrumbs #}
 {% block pre_content -%}{% endblock %}
 
-{% block content_main %}
+{% 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') }}
@@ -52,6 +52,6 @@
     {%- endfor %}
 {% endblock %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ streamfield_sidefoot.render(page.sidefoot) }}
 {%- endblock %}
diff --git a/cfgov/v1/jinja2/v1/template_debug.html b/cfgov/v1/jinja2/v1/template_debug.html
index 0ea8064a0f5..b365e4f5305 100644
--- a/cfgov/v1/jinja2/v1/template_debug.html
+++ b/cfgov/v1/jinja2/v1/template_debug.html
@@ -28,7 +28,7 @@
 
 {% block header %}{% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>{{ debug_template_name }}</h1>
 
@@ -41,7 +41,7 @@ <h1>{{ debug_template_name }}</h1>
         {% endif %}
 
         {% for name, rendered in debug_test_cases | items %}
-        <div class="content_line"></div>
+        <div class="content__line"></div>
         <div id="{{ name | slugify }}" class="test-case">
             <h2>
                 {{ name }}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html b/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
index 79b8e11cb3e..b4d1c01a8e3 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/_disclaimer.html
@@ -1,6 +1,6 @@
 <div class="block">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">{{ _('Legal disclaimer') }}</h2>
+        <h2 class="m-slug-header__heading">{{ _('Legal disclaimer') }}</h2>
     </header>
     <p>
         {{ _('The content on this page provides general consumer information.') }}
diff --git a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
index be762e608cd..9f4c332aa6a 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/_templates/no_js.html
@@ -2,8 +2,8 @@
             m-notification__error
             u-hide-if-js">
     {{ svg_icon('error-round') }}
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message">
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message">
             This form is not supported in your browser.
             Please try a newer browser or confirm that JavaScript is enabled.
         </div>
diff --git a/cfgov/wellbeing/jinja2/wellbeing/about.html b/cfgov/wellbeing/jinja2/wellbeing/about.html
index b01b42e7e02..7b61b3553be 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/about.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/about.html
@@ -24,7 +24,7 @@
     <meta name="twitter:card" content="summary_large_image">
 {% endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <h1>{{ _('Why financial well-being?') }}</h1>
 
     {% import 'v1/includes/molecules/translation-links.html' as translation_links with context %}
@@ -89,11 +89,11 @@ <h2>{{ _('Why doesn’t this questionnaire ask about financial details?') }}</h2
     </div>
 {% endblock %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {% if (current_language == 'en') %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     For further reading and research
                 </h2>
             </header>
@@ -121,7 +121,7 @@ <h2 class="m-slug-header_heading">
 
         <div class="block">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">
+                <h2 class="m-slug-header__heading">
                     Materials are publicly available for use at no cost
                 </h2>
             </header>
@@ -137,7 +137,7 @@ <h2 class="m-slug-header_heading">
                         a-link__icon
                         a-link__icon-after-text"
                 href="https://cfpb.github.io/design-system/foundation/logo">
-                    <span class="a-link_text">name and logo guidelines</span>
+                    <span class="a-link__text">name and logo guidelines</span>
                     {{ svg_icon('external-link') -}}
                 </a>.
             </p>
@@ -149,7 +149,7 @@ <h2 class="m-slug-header_heading">
     {% else %}
         <div class="block block__flush-top">
             <header class="m-slug-header">
-                <h2 class="m-slug-header_heading">Recursos Adicionales</h2>
+                <h2 class="m-slug-header__heading">Recursos Adicionales</h2>
             </header>
             <p>
                 <a href="https://files.consumerfinance.gov/f/documents/201701_cfpb_FinancialWell-Being_Quick-Guide-Spanish.pdf">Escala de Bienestar Financiero del CFPB</a>:
diff --git a/cfgov/wellbeing/jinja2/wellbeing/error.html b/cfgov/wellbeing/jinja2/wellbeing/error.html
index e20e9860a2e..970e0519240 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/error.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/error.html
@@ -17,7 +17,7 @@
     {{ _('Please go back and retake the questionnaire to receive your score.') }}
 {%- endblock %}
 
-{% block content_main %}
+{% block content__main %}
     <div class="block block__flush-top">
         <h1>{{ _('There was a problem with your submission') }}</h1>
 
diff --git a/cfgov/wellbeing/jinja2/wellbeing/home.html b/cfgov/wellbeing/jinja2/wellbeing/home.html
index a41ea9e4cc0..ea85dccc7ad 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/home.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/home.html
@@ -25,7 +25,7 @@
         .m-hero {
             background-color: #7eb7e8;
         }
-        .m-hero_image {
+        .m-hero__image {
             background-image: url( '{{ static("apps/financial-well-being/img/fwb_hero_826x380.png") }}' );
             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                     src='{{ static("apps/financial-well-being/img/fwb_hero_826x380.png") }}',
@@ -36,25 +36,25 @@
     </style>
 {%- endblock %}
 
-{% block content_intro -%}
+{% block content__intro -%}
     <section class="m-hero">
-        <div class="m-hero_wrapper wrapper">
-            <div class="m-hero_text">
-                <h1 class="m-hero_heading">{{ _('Find out your financial well-being') }}</h1>
-                <div class="m-hero_subhead">
+        <div class="m-hero__wrapper wrapper">
+            <div class="m-hero__text">
+                <h1 class="m-hero__heading">{{ _('Find out your financial well-being') }}</h1>
+                <div class="m-hero__subhead">
                     <p>
                         {{ _('Answer ten questions to measure your current financial well-being and see steps you can take to improve it.') }}
                     </p>
                 </div>
             </div>
-            <div class="m-hero_image-wrapper">
-                <div class="m-hero_image"></div>
+            <div class="m-hero__image-wrapper">
+                <div class="m-hero__image"></div>
             </div>
         </div>
     </section>
 {%- endblock %}
 
-{% block content_main -%}
+{% block content__main -%}
 
     {% include "_templates/no_js.html" %}
     <div class="u-js-only">
@@ -95,13 +95,13 @@ <h2>{{ _('Here’s how it works:') }}</h2>
                         m-notification__visible
                         m-notification__warning">
                 {{ svg_icon('warning-round') }}
-                <div class="m-notification_content">
-                    <p class="h4 m-notification_message">
+                <div class="m-notification__content">
+                    <p class="h4 m-notification__message">
                         {{ _('We never collect or store the answers you provide.') }}
                     </p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link"
+                        <li class="m-list__item">
+                            <a class="m-list__link"
                             href="/privacy/website-privacy-policy/">
                                 {{ _('See how your privacy is protected.') }}
                             </a>
@@ -115,7 +115,7 @@ <h2>{{ _('Here’s how it works:') }}</h2>
             <div class="block">
                 <h2>{{ _('Part 1: How well does this statement describe you or your situation?') }}</h2>
                 <div class="o-well">
-                    <fieldset class="o-form_fieldset o-scale" id="question_1">
+                    <fieldset class="o-form__fieldset o-scale" id="question_1">
                         <h3 class="a-legend">
                             {{ _('I could handle a major unexpected expense') }}
                         </h3>
@@ -188,7 +188,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_2">
+                    <fieldset class="o-form__fieldset o-scale" id="question_2">
                         <h3 class="a-legend">
                             {{ _('I am securing my financial future') }}
                         </h3>
@@ -261,7 +261,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_3">
+                    <fieldset class="o-form__fieldset o-scale" id="question_3">
                         <h3 class="a-legend">
                             {{ _('Because of my money situation, I feel like I will never have the things I want in life') }}
                         </h3>
@@ -334,7 +334,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_4">
+                    <fieldset class="o-form__fieldset o-scale" id="question_4">
                         <h3 class="a-legend">
                             {{ _('I can enjoy life because of the way I’m managing my money') }}
                         </h3>
@@ -407,7 +407,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_5">
+                    <fieldset class="o-form__fieldset o-scale" id="question_5">
                         <h3 class="a-legend">
                             {{ _('I am just getting by financially') }}
                         </h3>
@@ -480,7 +480,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_6">
+                    <fieldset class="o-form__fieldset o-scale" id="question_6">
                         <h3 class="a-legend">
                             {{ _('I am concerned that the money I have or will save won’t last') }}
                         </h3>
@@ -558,7 +558,7 @@ <h3 class="a-legend">
             <div class="block">
                 <h2>{{ _('Part 2: How often does this statement apply to you?') }}</h2>
                 <div class="o-well">
-                    <fieldset class="o-form_fieldset o-scale" id="question_7">
+                    <fieldset class="o-form__fieldset o-scale" id="question_7">
                         <h3 class="a-legend">
                             {{ _('Giving a gift for a wedding, birthday or other occasion would put a strain on my finances for the month') }}
                         </h3>
@@ -631,7 +631,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_8">
+                    <fieldset class="o-form__fieldset o-scale" id="question_8">
                         <h3 class="a-legend">
                             {{ _('I have money left over at the end of the month') }}
                         </h3>
@@ -703,7 +703,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_9">
+                    <fieldset class="o-form__fieldset o-scale" id="question_9">
                         <h3 class="a-legend">
                             {{ _('I am behind with my finances') }}
                         </h3>
@@ -776,7 +776,7 @@ <h3 class="a-legend">
                             </div>
                         </div>
                     </fieldset>
-                    <fieldset class="o-form_fieldset o-scale" id="question_10">
+                    <fieldset class="o-form__fieldset o-scale" id="question_10">
                         <h3 class="a-legend">
                             {{ _('My finances control my life') }}
                         </h3>
@@ -854,13 +854,13 @@ <h3 class="a-legend">
             <div class="block u-mb30">
                 <h2>{{ _('About you') }}</h2>
                 <div class="o-well">
-                    <div class="o-form_group">
-                        <fieldset class="o-form_fieldset" id="age">
+                    <div class="o-form__group">
+                        <fieldset class="o-form__fieldset" id="age">
                             <h3 class="a-legend">
                                 {{ _('Select your age group. This changes the scoring calculation.') }}
                             </h3>
                             <ul class="m-list m-list__unstyled content-l">
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -875,7 +875,7 @@ <h3 class="a-legend">
                                         </label>
                                     </div>
                                 </li>
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -894,12 +894,12 @@ <h3 class="a-legend">
                         </fieldset>
                     </div>
                     <div>
-                        <fieldset class="o-form_fieldset" id="method">
+                        <fieldset class="o-form__fieldset" id="method">
                             <h3 class="a-legend">
                                 {{ _('Select how you completed the questionnaire. This changes the scoring calculation.') }}
                             </h3>
                             <ul class="m-list m-list__unstyled content-l">
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -915,7 +915,7 @@ <h3 class="a-legend">
                                         </label>
                                     </div>
                                 </li>
-                                <li class="content-l_col content-l_col-1-2">
+                                <li class="content-l__col content-l__col-1-2">
                                     <div class="m-form-field m-form-field__radio m-form-field__lg-target">
                                         <input class="a-radio"
                                             type="radio"
@@ -937,7 +937,7 @@ <h3 class="a-legend">
             </div>
 
             <div class="block block__flush-top">
-                <div class="o-form_group">
+                <div class="o-form__group">
                     <input class="submit-quiz a-btn"
                         id="submit-quiz"
                         type="submit"
@@ -952,7 +952,7 @@ <h3 class="a-legend">
     </div>
 {%- endblock %}
 
-{% block content_sidebar -%}
+{% block content__sidebar -%}
     <div class="block block__flush-top">
         <h3>{{ _('About us') }}</h3>
         <p>
@@ -960,20 +960,20 @@ <h3>{{ _('About us') }}</h3>
             {{ _('a U.S. government agency that makes sure banks, lenders, and other financial companies treat you fairly.') }}
         </p>
         <a class="a-link a-link__jump" href="/about-us/the-bureau/">
-            <span class="a-link_text">{{ _('Learn how the CFPB can help you') }}</span>
+            <span class="a-link__text">{{ _('Learn how the CFPB can help you') }}</span>
         </a>
     </div>
 
     <div class="block">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">{{ _('About this questionnaire') }}</h2>
+            <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
         </header>
         <p>
             {{ _('CFPB researchers developed the questionnaire and a way to score it, as a tool to help measure your current financial well-being—') }}
             {{ _('that is, how well your current money situation is providing you with financial security and freedom of choice, today and for the future.') }}
         </p>
         <a class="a-link a-link__jump" href="{{ url('fwb_about_' + current_language) }}">
-            <span class="a-link_text">{{ _('See more background') }}</span>
+            <span class="a-link__text">{{ _('See more background') }}</span>
         </a>
     </div>
 
diff --git a/cfgov/wellbeing/jinja2/wellbeing/results.html b/cfgov/wellbeing/jinja2/wellbeing/results.html
index 13a379faf4a..9ce84ec9785 100644
--- a/cfgov/wellbeing/jinja2/wellbeing/results.html
+++ b/cfgov/wellbeing/jinja2/wellbeing/results.html
@@ -47,7 +47,7 @@
 {% import 'v1/includes/molecules/notification.html' as notification with context %}
 
 
-{% block content_main %}
+{% block content__main %}
     <h1>{{ _('Your financial well-being score') }}</h1>
     {% if user_score %}
         <p class="lead-paragraph">
@@ -87,24 +87,24 @@ <h1>{{ _('Your financial well-being score') }}</h1>
     </p>
 
     <ul class="save-links m-list m-list__horizontal">
-        <li class="m-list_item u-js-only">
-            <a class="m-list_link
+        <li class="m-list__item u-js-only">
+            <a class="m-list__link
                       a-link
                       a-link__icon"
                href="javascript:window.print()">
                 {{ svg_icon('print') }}
-                <span class="a-link_text">{{ _('Print') }}</span>
+                <span class="a-link__text">{{ _('Print') }}</span>
             </a>
         </li>
-        <li class="m-list_item">
-            <a class="m-list_link
+        <li class="m-list__item">
+            <a class="m-list__link
                       a-link
                       a-link__icon"
                href="../../save-as-pdf-instructions/"
                target="_blank"
                rel="noopener noreferrer">
                 {{ svg_icon('download') }}
-                <span class="a-link_text">{{ _('Save as PDF') }}</span>
+                <span class="a-link__text">{{ _('Save as PDF') }}</span>
             </a>
         </li>
     </ul>
@@ -152,20 +152,20 @@ <h2>{{ _('Your result') }}</h2>
     {% if user_score %}
         <div class="o-expandable
                     o-expandable__border">
-            <button class="o-expandable_header">
-                <span class="o-expandable_label">
+            <button class="o-expandable__header">
+                <span class="o-expandable__label">
                     {{ _('Review your answers') }}
                 </span>
-                <span class="o-expandable_cues">
-                    <span class="o-expandable_cue-open" role="img" aria-label="{{ _('Show') }}">
+                <span class="o-expandable__cues">
+                    <span class="o-expandable__cue-open" role="img" aria-label="{{ _('Show') }}">
                         {{ svg_icon('plus-round') }}
                     </span>
-                    <span class="o-expandable_cue-close" role="img" aria-label="{{ _('Hide') }}">
+                    <span class="o-expandable__cue-close" role="img" aria-label="{{ _('Hide') }}">
                         {{ svg_icon('minus-round') }}
                     </span>
                 </span>
             </button>
-            <div class="o-expandable_content">
+            <div class="o-expandable__content">
                 <table>
                     <thead>
                         <tr>
@@ -194,7 +194,7 @@ <h2>{{ _('What would you like to do next?') }}</h2>
         </p>
 
         <div class="content-l u-mt30 u-mb30">
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <h3>{{ _('Take control of day-to-day money management') }}</h3>
                 <ul>
                     <li>
@@ -203,14 +203,14 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_bill-calendar.pdf">
-                            <span class="a-link_text">{{ _('bill calendar') }}</span>
+                            <span class="a-link__text">{{ _('bill calendar') }}</span>
                             {{ svg_icon('download') }}
                         </a>
                         {{ _('and') }}
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_spending-tracker.pdf">
-                            <span class="a-link_text">{{ _('spending tracker') }}</span>
+                            <span class="a-link__text">{{ _('spending tracker') }}</span>
                             {{ svg_icon('download') }}
                         </a>
                         {{ _('to see and manage your everyday expenses.') }}
@@ -222,7 +222,7 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_debt-worksheet.pdf">
-                            <span class="a-link_text">debt log</span>
+                            <span class="a-link__text">debt log</span>
                             {{ svg_icon('download') }}
                         </a>
                         and find templates to help you communicate with
@@ -246,7 +246,7 @@ <h3>{{ _('Take control of day-to-day money management') }}</h3>
                 </ul>
             </div>
 
-            <div class="content-l_col content-l_col-1-2">
+            <div class="content-l__col content-l__col-1-2">
                 <h3>{{ _('Get on track for your financial future') }}</h3>
                 {% if (current_language == 'en') %}
                 <ul>
@@ -261,14 +261,14 @@ <h3>{{ _('Get on track for your financial future') }}</h3>
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/201705_cfpb_My-New-Money-Goal.pdf">
-                            <span class="a-link_text">worksheet</span>
+                            <span class="a-link__text">worksheet</span>
                             {{ svg_icon('download') }}
                         </a>
                         or
                         <a class="a-link
                                   a-link__icon"
                            href="https://files.consumerfinance.gov/f/documents/cfpb_well-being_monthly-budget.pdf">
-                            <span class="a-link_text">budgeting tool</span>
+                            <span class="a-link__text">budgeting tool</span>
                             {{ svg_icon('download') }}
                         </a>.
                     </li>
@@ -471,39 +471,39 @@ <h4>{{ _('Compare by') }}</h4>
     </div>
 {% endblock %}
 
-{% block content_sidebar %}
+{% block content__sidebar %}
     {% if (current_language == 'en') %}
     <div class="block block__flush-top">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">Looking for more help?</h2>
+            <h2 class="m-slug-header__heading">Looking for more help?</h2>
         </header>
         <p>
             You can further explore the tips, tools, answers, and resources
             in our Consumer Tools section, including:
         </p>
         <ul class="m-list m-list__links">
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/debt-collection/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/debt-collection/">
                   Debt collection
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/student-loans/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/student-loans/">
                   Student loans
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/credit-reports-and-scores/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/credit-reports-and-scores/">
                   Credit reports and scores
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/ask-cfpb/category-credit-cards/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/ask-cfpb/category-credit-cards/">
                   Credit cards
                 </a>
             </li>
-            <li class="m-list_item">
-                <a class="m-list_link" href="/consumer-tools/mortgages/">
+            <li class="m-list__item">
+                <a class="m-list__link" href="/consumer-tools/mortgages/">
                   Mortgages
                 </a>
             </li>
@@ -512,14 +512,14 @@ <h2 class="m-slug-header_heading">Looking for more help?</h2>
     {% endif %}
     <div class="block block__flush-top">
         <header class="m-slug-header">
-            <h2 class="m-slug-header_heading">{{ _('About this questionnaire') }}</h2>
+            <h2 class="m-slug-header__heading">{{ _('About this questionnaire') }}</h2>
         </header>
         <p>
             {{ _('CFPB researchers developed the questionnaire and a way to score it, as a tool to help measure your current financial well-being—') }}
             {{ _('that is, how well your current money situation is providing you with financial security and freedom of choice, today and for the future.') }}
         </p>
         <a class="a-link a-link__jump" href="{{ url('fwb_about_' + current_language) }}">
-            <span class="a-link_text">{{ _('See more background') }}</span>
+            <span class="a-link__text">{{ _('See more background') }}</span>
         </a>
     </div>
 
diff --git a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
index 547e8987914..c447bf349db 100644
--- a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
+++ b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist-items.html
@@ -2,7 +2,7 @@
 
 {{
   checkbox.render({
-    'class': 'content-l_col-1-2 m-form-field__lg-target a-yes-cbg-checkbox',
+    'class': 'content-l__col-1-2 m-form-field__lg-target a-yes-cbg-checkbox',
     'label': value.item,
     'value': value.item,
     'behavior': 'checklist_array_item'
diff --git a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
index d65ab234d46..5ad6069d229 100644
--- a/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
+++ b/cfgov/youth_employment/jinja2/youth_employment/yes-checklist.html
@@ -22,8 +22,8 @@
                 m-notification__visible
                 m-notification__error">
       {{ svg_icon('error-round') }}
-      <div class="m-notification_content">
-        <div class="h4 m-notification_message">Choose at least one goal.</div>
+      <div class="m-notification__content">
+        <div class="h4 m-notification__message">Choose at least one goal.</div>
       </div>
     </div>
   </div>
@@ -40,7 +40,7 @@
   </div>
 
   <button class="u-mt15 u-mb30 a-btn js-cbg-print">Print my checklist</button>
-  <div class="content_line"></div>
+  <div class="content__line"></div>
 </div>
 
 <div class="cbg-print-paper u-hidden">
diff --git a/docs/atomic-structure.md b/docs/atomic-structure.md
index 107cde05033..f29c49f3af3 100644
--- a/docs/atomic-structure.md
+++ b/docs/atomic-structure.md
@@ -57,8 +57,8 @@ Prefixed with `m-` in class names.
          m-notification__error"
 >
   {{ svg_icon('error') }}
-  <div class="m-notification_content" role="alert">
-    <div class="h4 m-notification_message">Page not found.</div>
+  <div class="m-notification__content" role="alert">
+    <div class="h4 m-notification__message">Page not found.</div>
   </div>
 </div>
 ```
@@ -111,8 +111,8 @@ Prefixed with `o-` in class names.
 
 ```html
 <div class="o-expandable">
-  <button class="o-expandable_header">
-    <div class="o-expandable_label">…</div>
+  <button class="o-expandable__header">
+    <div class="o-expandable__label">…</div>
   </button>
 </div>
 ```
diff --git a/docs/editing-components.md b/docs/editing-components.md
index edcba090a74..c6b2d88f15c 100644
--- a/docs/editing-components.md
+++ b/docs/editing-components.md
@@ -222,13 +222,13 @@ this is what its Jinja2 template looks like (comments excluded):
 <div class="m-related-content">
   {% if value.heading %}
   <header class="m-slug-header">
-    <h2 class="m-slug-header_heading">{{ value.heading }}</h2>
+    <h2 class="m-slug-header__heading">{{ value.heading }}</h2>
   </header>
   {% endif %} {{ value.paragraph | safe }} {% if value.links %}
   <ul class="m-list m-list__links">
     {% for link in value.links %}
-    <li class="m-list_item">
-      <a href="{{ link.url }}" class="m-list_link">{{ link.text }}</a>
+    <li class="m-list__item">
+      <a href="{{ link.url }}" class="m-list__link">{{ link.text }}</a>
     </li>
     {% endfor %}
   </ul>
diff --git a/docs/functional-testing.md b/docs/functional-testing.md
index 398b58db84c..7a84af9c224 100644
--- a/docs/functional-testing.md
+++ b/docs/functional-testing.md
@@ -47,7 +47,7 @@ export default class ConsumerTools {
     });
   }
   successNotification() {
-    return cy.get('.m-notification_message');
+    return cy.get('.m-notification__message');
   }
 }
 ```
diff --git a/docs/javascript-unit-tests.md b/docs/javascript-unit-tests.md
index 3d5d070b868..584b6355ece 100644
--- a/docs/javascript-unit-tests.md
+++ b/docs/javascript-unit-tests.md
@@ -543,8 +543,8 @@ import Notification from '../../../../cfgov/unprocessed/js/molecules/Notificatio
 const HTML_SNIPPET = `
   <div class="m-notification">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"></svg>
-    <div class="m-notification_content">
-      <div class="h4 m-notification_message">Notification content</div>
+    <div class="m-notification__content">
+      <div class="h4 m-notification__message">Notification content</div>
     </div>
   </div>
 `;
diff --git a/docs/wagtail-pages.md b/docs/wagtail-pages.md
index 96bf3f03fd5..4abdf79b3da 100644
--- a/docs/wagtail-pages.md
+++ b/docs/wagtail-pages.md
@@ -194,7 +194,7 @@ This is done by overriding the `template` attribute on the page model.
 For example, the [interactive regulations landing page](https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/regulations3k/models/pages.py)
 includes a customized list of recently issued notices that gets loaded dynamically from the Federal Register.
 To do this it provides its own template that inherits from our base templates
-and overrides the `content_sidebar` block to include a separate `recent_notices` template:
+and overrides the `content__sidebar` block to include a separate `recent_notices` template:
 
 ```python
 from v1.models import CFGOVPage
@@ -211,7 +211,7 @@ And in [`regulations3k/landing-page.html`](https://github.com/cfpb/consumerfinan
 
 {% import 'recent-notices.html' as recent_notices with context %}
 
-{% block content_sidebar scoped -%}
+{% block content__sidebar scoped -%}
     {{ recent_notices }}
 {%- endblock %}
 ```
diff --git a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
index 9fa896752f1..9d93a63dd05 100644
--- a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
+++ b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide-helpers.cy.js
@@ -44,11 +44,11 @@ export class FilingInstructionGuide {
   }
 
   getMobileTOCHeader() {
-    return cy.get('.o-fig_sidebar .o-secondary-nav_header');
+    return cy.get('.o-fig_sidebar .o-secondary-nav__header');
   }
 
   getMobileTOCBody() {
-    return cy.get('.o-secondary-nav_content');
+    return cy.get('.o-secondary-nav__content');
   }
 
   goToSection(section) {
@@ -56,7 +56,7 @@ export class FilingInstructionGuide {
   }
 
   getNavItem(section) {
-    return cy.get(`a.o-secondary-nav_link[href="#${section}"]`);
+    return cy.get(`a.o-secondary-nav__link[href="#${section}"]`);
   }
 
   clickNavItem(section) {
@@ -76,7 +76,7 @@ export class FilingInstructionGuide {
   }
 
   toggleToc() {
-    return cy.get('.o-secondary-nav_header').click();
+    return cy.get('.o-secondary-nav__header').click();
   }
 
   scrollToBottom() {
diff --git a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
index b99eff70735..3733b4bb57e 100644
--- a/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
+++ b/test/cypress/integration/compliance/small-business-lending/filing-instruction-guide.cy.js
@@ -45,16 +45,16 @@ describe('1071 Filing Instruction Guide (FIG)', () => {
             fig.goToSection(4);
             fig
               .getNavItem(1)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(2)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(3)
-              .should('not.have.class', 'o-secondary-nav_link__current');
+              .should('not.have.class', 'o-secondary-nav__link__current');
             fig
               .getNavItem(4)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
           });
 
           it('should auto-expand subsections', () => {
@@ -87,37 +87,37 @@ describe('1071 Filing Instruction Guide (FIG)', () => {
             fig.clickSectionHeading(1);
             fig
               .getNavItem(1)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('not.be.visible');
 
             fig.clickSectionHeading(3);
             fig
               .getNavItem(3)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading('application-method');
             fig
               .getNavItem('application-method')
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading(5);
             fig
               .getNavItem(5)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('not.be.visible');
 
             fig.clickSectionHeading(3);
             fig
               .getNavItem(3)
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
 
             fig.clickSectionHeading('action-taken');
             fig
               .getNavItem('action-taken')
-              .should('have.class', 'o-secondary-nav_link__current');
+              .should('have.class', 'o-secondary-nav__link__current');
             fig.getNavItem('credit-type').should('be.visible');
           });
 
diff --git a/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js b/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
index 283f9bf591e..9c615899528 100644
--- a/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
+++ b/test/cypress/integration/components/email-signup/email-signup-helpers.cy.js
@@ -24,6 +24,6 @@ export class EmailSignup {
   }
 
   successNotification() {
-    return cy.get('.m-notification_message');
+    return cy.get('.m-notification__message');
   }
 }
diff --git a/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
index 56404a006f9..8af2a84c7c0 100644
--- a/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filter-helpers.cy.js
@@ -42,7 +42,7 @@ export class Filter {
   clickCategory(option) {
     const sel = `[data-option=${option}`;
     cy.get('[data-cy=categories-heading]').click();
-    cy.get('.o-multiselect_options').should('be.visible');
+    cy.get('.o-multiselect__options').should('be.visible');
     return cy.get(sel).click();
   }
 
@@ -73,7 +73,7 @@ export class Filter {
   }
 
   expandableTarget() {
-    return cy.get('.o-expandable_header');
+    return cy.get('.o-expandable__header');
   }
 
   search() {
diff --git a/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
index cea7fc92501..43600b6988f 100644
--- a/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
@@ -33,38 +33,38 @@ export class FilterableListControl {
 
   getResultCategoryHasTags() {
     return this.getResults()
-      .find('.m-tags_tag')
+      .find('.m-tags__tag')
       .closest('.o-post-preview')
-      .find('.m-meta-header_item:first');
+      .find('.m-meta-header__item:first');
   }
 
   getResultTagHasCategories() {
     return this.getResults()
-      .find('.m-meta-header_item:first')
+      .find('.m-meta-header__item:first')
       .closest('.o-post-preview')
-      .find('.m-tags_tag:first');
+      .find('.m-tags__tag:first');
   }
 
   getResultTag() {
-    return this.getResults().find('.m-tags_tag:first');
+    return this.getResults().find('.m-tags__tag:first');
   }
 
   getResultTitleHasTag() {
     return this.getResults()
-      .find('.m-tags_tag:first')
+      .find('.m-tags__tag:first')
       .closest('.o-post-preview')
-      .find('.o-post-preview_title:first');
+      .find('.o-post-preview__title:first');
   }
 
   getResultCategory() {
-    return this.getResults().find('.m-meta-header_item:first');
+    return this.getResults().find('.m-meta-header__item:first');
   }
 
   getResultTitleHasCategory() {
     return this.getResults()
-      .find('.m-meta-header_item:first')
+      .find('.m-meta-header__item:first')
       .closest('.o-post-preview')
-      .find('.o-post-preview_title:first');
+      .find('.o-post-preview__title:first');
   }
 
   resultsHeaderContent() {
@@ -72,7 +72,7 @@ export class FilterableListControl {
   }
 
   resultsContent() {
-    return this.getResults().find('.o-post-preview_content');
+    return this.getResults().find('.o-post-preview__content');
   }
 
   firstResultContent() {
@@ -80,7 +80,7 @@ export class FilterableListControl {
   }
 
   resultTitle() {
-    return cy.get('.o-post-preview_title:first');
+    return cy.get('.o-post-preview__title:first');
   }
 
   lastResultContent() {
@@ -89,12 +89,12 @@ export class FilterableListControl {
 
   resultsHeaderLeft() {
     return cy.get(
-      `.o-post-preview .m-meta-header_item-group .m-meta-header_item:first`,
+      `.o-post-preview .m-meta-header__item-group .m-meta-header__item:first`,
     );
   }
 
   resultsHeaderRight() {
-    return cy.get(`.o-post-preview .m-meta-header_item`);
+    return cy.get(`.o-post-preview .m-meta-header__item`);
   }
 
   firstResultHeader() {
@@ -122,10 +122,10 @@ export class FilterableListControl {
   }
 
   showFilters() {
-    return cy.get('.o-filterable-list .o-expandable_cue-open').click();
+    return cy.get('.o-filterable-list .o-expandable__cue-open').click();
   }
 
   hideFilters() {
-    return cy.get('.o-expandable_cue-close').click();
+    return cy.get('.o-expandable__cue-close').click();
   }
 }
diff --git a/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
index d7e51a25e58..dca078bf58a 100644
--- a/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
+++ b/test/cypress/integration/components/filterable-lists/filterable-lists-helpers.cy.js
@@ -37,6 +37,6 @@ export class FilterableList {
   }
 
   selectedTopics() {
-    return cy.get('.o-multiselect_choices > li');
+    return cy.get('.o-multiselect__choices > li');
   }
 }
diff --git a/test/cypress/integration/components/footer/footer-helpers.cy.js b/test/cypress/integration/components/footer/footer-helpers.cy.js
index ae393bfd788..c9eb8739b2c 100644
--- a/test/cypress/integration/components/footer/footer-helpers.cy.js
+++ b/test/cypress/integration/components/footer/footer-helpers.cy.js
@@ -4,11 +4,11 @@ export class Footer {
   }
 
   topButton() {
-    return this.footer().get('.o-footer_top-button');
+    return this.footer().get('.o-footer__top-button');
   }
 
   navList() {
-    return this.footer().get('.o-footer_nav-list');
+    return this.footer().get('.o-footer__nav-list');
   }
 
   middle(position) {
@@ -17,13 +17,13 @@ export class Footer {
 
   links() {
     return cy.get(
-      '.o-footer_nav-list a, .o-footer-middle-left a,' +
-        ' .o-footer-middle-right a, .m-social-media_icons a',
+      '.o-footer__nav-list a, .o-footer-middle-left a,' +
+        ' .o-footer-middle-right a, .m-social-media__icons a',
     );
   }
 
   socialMediaIcons() {
-    return this.footer().get('.m-social-media_icons');
+    return this.footer().get('.m-social-media__icons');
   }
 
   officialWebsite() {
diff --git a/test/cypress/integration/components/header/header-helpers.cy.js b/test/cypress/integration/components/header/header-helpers.cy.js
index f1ab26786f6..e189ec4b23a 100644
--- a/test/cypress/integration/components/header/header-helpers.cy.js
+++ b/test/cypress/integration/components/header/header-helpers.cy.js
@@ -1,10 +1,10 @@
 export class Header {
   headerContent() {
-    return cy.get('.o-header_content');
+    return cy.get('.o-header__content');
   }
 
   headerLogo() {
-    return cy.get('.o-header_logo-img');
+    return cy.get('.o-header__logo-img');
   }
 
   /* Overlay is technically outside of the header,
diff --git a/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js b/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
index 044e0b7b828..59fb40f9df6 100644
--- a/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
+++ b/test/cypress/integration/components/multiselect/multiselect-helpers.cy.js
@@ -9,7 +9,7 @@ export class Multiselect {
   }
 
   clickAway() {
-    return cy.get('.o-expandable_content').click({ force: true });
+    return cy.get('.o-expandable__content').click({ force: true });
   }
 
   multiSelect(name) {
diff --git a/test/cypress/integration/components/pagination/pagination-helpers.cy.js b/test/cypress/integration/components/pagination/pagination-helpers.cy.js
index d80beea9db5..40d2608baca 100644
--- a/test/cypress/integration/components/pagination/pagination-helpers.cy.js
+++ b/test/cypress/integration/components/pagination/pagination-helpers.cy.js
@@ -4,15 +4,15 @@ export class Pagination {
   }
 
   enter(name) {
-    cy.get('#m-pagination_current-page-0').clear({ force: true });
-    cy.get('#m-pagination_current-page-0').type(name);
+    cy.get('#m-pagination__current-page-0').clear({ force: true });
+    cy.get('#m-pagination__current-page-0').type(name);
     cy.get('.m-pagination').within(() => {
-      cy.get('.m-pagination_form').submit();
+      cy.get('.m-pagination__form').submit();
     });
   }
 
   lastResults() {
-    cy.get('.m-pagination_form .u-visually-hidden')
+    cy.get('.m-pagination__form .u-visually-hidden')
       .invoke('text')
       .then(($el) => {
         const lastPage = $el.toString().trim().split(' ')[3];
@@ -21,7 +21,7 @@ export class Pagination {
   }
 
   currentPageLabel() {
-    cy.get('label[for="m-pagination_current-page-0"]');
+    cy.get('label[for="m-pagination__current-page-0"]');
   }
 
   paginationLabel() {
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
index f1e4f48c64e..159c1de0ccd 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/answer-helpers.cy.js
@@ -6,10 +6,10 @@ export class AskCfpbAnswerPage {
   }
 
   getFirstLinkInSummary() {
-    return cy.get('.o-summary_content a').first();
+    return cy.get('.o-summary__content a').first();
   }
 
   getSummaryBtn() {
-    return cy.get('.o-summary_btn');
+    return cy.get('.o-summary__btn');
   }
 }
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
index df2d71b95fa..a8a4e0e30e3 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/ask-cfpb.cy.js
@@ -65,32 +65,32 @@ describe('Ask CFPB', () => {
       });
 
       it('should hide content on mobile', () => {
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-transition',
         );
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-summary',
         );
-        cy.get('.o-summary_content').invoke('outerHeight').should('be.lte', 92);
+        cy.get('.o-summary__content').invoke('outerHeight').should('be.lte', 92);
         answerPage.getFirstLinkInSummary().should('not.be.visible');
         answerPage.getSummaryBtn().click();
         answerPage.getFirstLinkInSummary().should('be.visible');
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-transition',
         );
-        cy.get('.o-summary_content').should('not.have.class', 'u-no-animation');
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should('not.have.class', 'u-no-animation');
+        cy.get('.o-summary__content').should(
           'not.have.class',
           'u-max-height-summary',
         );
-        cy.get('.o-summary_content').should(
+        cy.get('.o-summary__content').should(
           'have.class',
           'u-max-height-default',
         );
-        cy.get('.o-summary_content').invoke('outerHeight').should('be.gt', 92);
+        cy.get('.o-summary__content').invoke('outerHeight').should('be.gt', 92);
       });
     });
   });
diff --git a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
index 6b79185a8b0..946c0ec4ea8 100644
--- a/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/ask-cfpb/search-helpers.cy.js
@@ -13,7 +13,7 @@ export class AskCfpbSearch {
   }
 
   autocomplete() {
-    return cy.get('.m-autocomplete_results');
+    return cy.get('.m-autocomplete__results');
   }
 
   submitButton() {
diff --git a/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js b/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
index 581e3c56cd0..bf0ce3cf65f 100644
--- a/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js
@@ -27,7 +27,7 @@ export class ExploreCreditCards {
   }
 
   openFilterExpandable() {
-    cy.get('.o-filterable-list-controls button.o-expandable_header').click();
+    cy.get('.o-filterable-list-controls button.o-expandable__header').click();
   }
 
   clickShowMoreButton() {
diff --git a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
index 18e999c52ee..360bbca1549 100644
--- a/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
+++ b/test/cypress/integration/consumer-tools/obtener-respuestas/obtener-respuestas-helpers.cy.js
@@ -8,7 +8,7 @@ export class ObtenerRespuestasBuscar {
   }
 
   autocomplete() {
-    return cy.get('.m-autocomplete_results');
+    return cy.get('.m-autocomplete__results');
   }
 
   search() {
diff --git a/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js b/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
index e3c777defa5..61da86fc718 100644
--- a/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
+++ b/test/cypress/integration/data-research/prepaid-agreements-search/prepaid-agreements-search-helpers.cy.js
@@ -22,7 +22,7 @@ export class PrepaidAgreementsSearch {
   }
 
   filtersForm() {
-    return cy.get('.content_sidebar').find('form');
+    return cy.get('.content__sidebar').find('form');
   }
 
   applyFilters() {
diff --git a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
index 5e5f51ce68c..5caec1ccd93 100644
--- a/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
+++ b/test/unit_tests/apps/filing-instruction-guide/fixtures/sample-fig-page.js
@@ -1,7 +1,7 @@
 export default `
 <main class="u-layout-grid u-layout-grid__1-3 o-fig" id="main">
-    <div class="u-layout-grid_wrapper">
-        <div class="u-layout-grid_breadcrumbs">
+    <div class="u-layout-grid__wrapper">
+        <div class="u-layout-grid__breadcrumbs">
             <nav class="breadcrumbs" aria-label="Breadcrumbs">
                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__left" viewBox="0 0 10 19">
                     <path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path>
@@ -10,24 +10,24 @@ export default `
                 <a href="/data-research/small-business-lending/filing-instructions-guide/"> Small Business Lending Rule Filing Instructions Guides </a>
             </nav>
         </div>
-        <aside class="u-layout-grid_secondary-nav u-layout-grid_secondary-nav__sticky">
+        <aside class="u-layout-grid__secondary-nav u-layout-grid__secondary-nav__sticky">
             <div class="o-fig_sidebar">
                 <div class="u-hide-on-tablet">
                     <h3>Table of contents</h3>
                 </div>
                 <nav class="o-secondary-nav" aria-label="Table of contents" data-js-hook="state_atomic_init behavior_flyout-menu">
-                    <button class="o-secondary-nav_header" type="button" aria-expanded="false" data-js-hook="behavior_flyout-menu_trigger">
-                        <span class="o-secondary-nav_label"> Table of contents </span>
-                        <span class="o-secondary-nav_cues">
-                            <span class="o-secondary-nav_cue-open" aria-label="Show">
+                    <button class="o-secondary-nav__header" type="button" aria-expanded="false" data-js-hook="behavior_flyout-menu_trigger">
+                        <span class="o-secondary-nav__label"> Table of contents </span>
+                        <span class="o-secondary-nav__cues">
+                            <span class="o-secondary-nav__cue-open" aria-label="Show">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__down" viewBox="0 0 17 19"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg>
                             </span>
-                            <span class="o-secondary-nav_cue-close" aria-label="Hide">
+                            <span class="o-secondary-nav__cue-close" aria-label="Hide">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__up" viewBox="0 0 17 19"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg>
                             </span>
                         </span>
                     </button>
-                    <div class="o-secondary-nav_content u-max-height-transition u-max-height-zero" data-js-hook="behavior_flyout-menu_content" data-open="false" style="max-height: 1693px;" hidden="">
+                    <div class="o-secondary-nav__content u-max-height-transition u-max-height-zero" data-js-hook="behavior_flyout-menu_content" data-open="false" style="max-height: 1693px;" hidden="">
                         <div id="ctrl-f">
                             <div class="tw-relative tw-pointer-events-auto">
                                 <button type="button" class="tw-border tw-border-slate-600 tw-border-solid tw-w-full md:tw-bg-white tw-flex tw-bg-white tw-mt-2.5 tw-mb-4 tw-items-center tw-text-slate-600 tw-py-1.5 tw-pl-2">
@@ -39,133 +39,133 @@ export default `
                                 </button>
                             </div>
                         </div>
-                        <ul class="o-secondary-nav_list o-secondary-nav_list__parents">
+                        <ul class="o-secondary-nav__list o-secondary-nav__list--parents">
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#1"> 1. What is the filing instructions guide? </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#1"> 1. What is the filing instructions guide? </a>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#2"> 2. Filing process overview </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children u-hide-on-desktop">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#2.1"> 2.1. About the small business lending platform </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#2"> 2. Filing process overview </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children u-hide-on-desktop">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#2.1"> 2.1. About the small business lending platform </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#2.2"> 2.2. File format </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#2.2"> 2.2. File format </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#3"> 3. Data points </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#uid"> 3.1. Unique identifier </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#3"> 3. Data points </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#uid"> 3.1. Unique identifier </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#application-date"> 3.2. Application date </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#application-date"> 3.2. Application date </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link o-secondary-nav_link__current" href="#application-method"> 3.3. Application method </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link o-secondary-nav__link__current" href="#application-method"> 3.3. Application method </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#application-recipient"> 3.4. Application recipient </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#application-recipient"> 3.4. Application recipient </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#credit-type"> 3.5. Credit type </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#credit-type"> 3.5. Credit type </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#credit-purpose"> 3.6. Credit purpose </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#credit-purpose"> 3.6. Credit purpose </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#amount-applied-for"> 3.7. Amount applied for </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#amount-applied-for"> 3.7. Amount applied for </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#amount-approved-or-originated"> 3.8. Amount approved or originated </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#amount-approved-or-originated"> 3.8. Amount approved or originated </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#action-taken"> 3.9. Action taken </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#action-taken"> 3.9. Action taken </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#action-taken-date"> 3.10. Action taken date </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#action-taken-date"> 3.10. Action taken date </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#denial-reasons"> 3.11. Denial reasons </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#denial-reasons"> 3.11. Denial reasons </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#pricing-information"> 3.12. Pricing information </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#pricing-information"> 3.12. Pricing information </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#census-tract"> 3.13. Census tract </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#census-tract"> 3.13. Census tract </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#gross-annual-revenue"> 3.14. Gross annual revenue </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#gross-annual-revenue"> 3.14. Gross annual revenue </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#naics-code"> 3.15. North American Industry Classification System (NAICS) code </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#naics-code"> 3.15. North American Industry Classification System (NAICS) code </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#number-of-workers"> 3.16. Number of workers </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#number-of-workers"> 3.16. Number of workers </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#time-in-business"> 3.17. Time in business </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#time-in-business"> 3.17. Time in business </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#minority-women-lgbtqi-owned-business-status"> 3.18. Minority-owned, women-owned, and LGBTQI+-owned business statuses </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#minority-women-lgbtqi-owned-business-status"> 3.18. Minority-owned, women-owned, and LGBTQI+-owned business statuses </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#number-of-principal-owners"> 3.19. Number of principal owners </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#number-of-principal-owners"> 3.19. Number of principal owners </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-1"> 3.20. Demographic information of principal owner 1 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-1"> 3.20. Demographic information of principal owner 1 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-2"> 3.21. Demographic information of principal owner 2 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-2"> 3.21. Demographic information of principal owner 2 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-3"> 3.22. Demographic information of principal owner 3 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-3"> 3.22. Demographic information of principal owner 3 </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#rse-of-principal-owner-4"> 3.23. Demographic information of principal owner 4 </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#rse-of-principal-owner-4"> 3.23. Demographic information of principal owner 4 </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#4"> 4. Data validation </a>
-                                <ul class="o-secondary-nav_list o-secondary-nav_list__children u-hide-on-desktop">
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.1"> 4.1. Single-field errors </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#4"> 4. Data validation </a>
+                                <ul class="o-secondary-nav__list o-secondary-nav__list__children u-hide-on-desktop">
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.1"> 4.1. Single-field errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.2"> 4.2. Multi-field errors </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.2"> 4.2. Multi-field errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.3"> 4.3. Register-level errors </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.3"> 4.3. Register-level errors </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.4"> 4.4. Single-field warnings </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.4"> 4.4. Single-field warnings </a>
                                     </li>
-                                    <li class="m-list_item">
-                                        <a class="o-secondary-nav_link" href="#4.5"> 4.5. Multi-field warnings </a>
+                                    <li class="m-list__item">
+                                        <a class="o-secondary-nav__link" href="#4.5"> 4.5. Multi-field warnings </a>
                                     </li>
                                 </ul>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#5"> 5. Where to get help </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#5"> 5. Where to get help </a>
                             </li>
                             <li>
-                                <a class="o-secondary-nav_link o-secondary-nav_link__parent" href="#6"> 6. Paperwork Reduction Act </a>
+                                <a class="o-secondary-nav__link o-secondary-nav__link__parent" href="#6"> 6. Paperwork Reduction Act </a>
                             </li>
                         </ul>
                     </div>
                 </nav>
             </div>
         </aside>
-        <div class="u-layout-grid_main content__flush-bottom research-report o-fig_main" id="content_main">
+        <div class="u-layout-grid__main content__flush-bottom research-report o-fig_main" id="content__main">
             <div class="eyebrow"></div>
             <h1>Filing instructions guide for small business lending data collected in 2024</h1>
             <div class="lead-paragraph"></div>
             <div class="block block__border-top u-fig-print-link">
                 <a class="a-link a-link__icon" href="javascript:window.print()">
-                    <span class="a-link_text">Print this guide</span>
+                    <span class="a-link__text">Print this guide</span>
                     <svg class="cf-icon-svg cf-icon-svg__print" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="m8.698 2.358 3.065 3.066v1.95h.16a1.112 1.112 0 0 1 1.109 1.108v4.837a1.112 1.112 0 0 1-1.109 1.108h-.16v1.726a.477.477 0 0 1-.475.475H2.712a.477.477 0 0 1-.475-.475v-1.726h-.16A1.112 1.112 0 0 1 .968 13.32V8.482a1.112 1.112 0 0 1 1.109-1.108h.16v-4.54a.476.476 0 0 1 .475-.476zm-.22 3.876a.61.61 0 0 1-.608-.608v-2.16H3.345v3.908h7.31v-1.14zm2.177 4.512h-7.31v4.773h7.31zm-1.054.874h-5.26v1.109h5.26zm0 1.962h-5.26v1.108h5.26zm2.437-4.485a.554.554 0 1 0-.554.554.554.554 0 0 0 .554-.554z"
@@ -272,7 +272,7 @@ export default `
                 <p data-block-key="cvu2g">
                     <a class="a-link a-link__icon"
                        href="https://raw.githubusercontent.com/cfpb/sbl-content/2024-v1/fig-files/file-spec/2024-data-points.csv">
-                        <span class="a-link_text">Data spec (CSV)</span>
+                        <span class="a-link__text">Data spec (CSV)</span>
                         <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"
@@ -453,23 +453,23 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(5)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_credit_product"> Field 5: Credit product </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_credit_product"> Field 5: Credit product </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_credit_product_ff"> Field 6: Free-form text field for other credit products </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_credit_product_ff"> Field 6: Free-form text field for other credit products </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_guarantee"> Field 7: Type of guarantee </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_guarantee"> Field 7: Type of guarantee </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_guarantee_ff"> Field 8: Free-form text field for other guarantee </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_guarantee_ff"> Field 8: Free-form text field for other guarantee </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_loan_term_flag"> Field 9: Loan term: NA/NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_loan_term_flag"> Field 9: Loan term: NA/NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#ct_loan_term"> Field 10: Loan term </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#ct_loan_term"> Field 10: Loan term </a>
                         </li>
                     </ul>
                 </div>
@@ -1233,47 +1233,47 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(12)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_interest_rate_type"> Field 20: Interest rate type </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_interest_rate_type"> Field 20: Interest rate type </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_init_rate_period"> Field 21: Initial rate period </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_init_rate_period"> Field 21: Initial rate period </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_fixed_rate"> Field 22: Fixed rate: interest rate </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_fixed_rate"> Field 22: Fixed rate: interest rate </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_margin"> Field 23: Variable rate transaction: margin </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_margin"> Field 23: Variable rate transaction: margin </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_name"> Field 24: Variable rate transaction: index name </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_name"> Field 24: Variable rate transaction: index name </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_name_ff"> Field 25: Variable rate transaction: index name: other </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_name_ff"> Field 25: Variable rate transaction: index name: other </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_var_index_value"> Field 26: Variable rate transaction: index value </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_var_index_value"> Field 26: Variable rate transaction: index value </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_origination_charges"> Field 27: Total origination charges </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_origination_charges"> Field 27: Total origination charges </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_broker_fees"> Field 28: Amount of total broker fees </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_broker_fees"> Field 28: Amount of total broker fees </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_initial_charges"> Field 29: Initial annual charges </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_initial_charges"> Field 29: Initial annual charges </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_mca_addcost_flag"> Field 30: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing: NA flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_mca_addcost_flag"> Field 30: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing: NA flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_mca_addcost"> Field 31: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_mca_addcost"> Field 31: MCA/sales-based: additional cost for merchant cash advances or other sales-based financing </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_prepenalty_allowed"> Field 32: Prepayment penalty could be imposed </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_prepenalty_allowed"> Field 32: Prepayment penalty could be imposed </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#pricing_prepenalty_exists"> Field 33: Prepayment penalty exists </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#pricing_prepenalty_exists"> Field 33: Prepayment penalty exists </a>
                         </li>
                     </ul>
                 </div>
@@ -2355,32 +2355,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_ethnicity"> Field 46: Ethnicity of principal owner 1 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_ethnicity"> Field 46: Ethnicity of principal owner 1 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_ethnicity_ff"> Field 47: Ethnicity of principal owner 1: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_ethnicity_ff"> Field 47: Ethnicity of principal owner 1: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race"> Field 48: Race of principal owner 1 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race"> Field 48: Race of principal owner 1 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_anai_ff"> Field 49: Race of principal owner 1: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_anai_ff"> Field 49: Race of principal owner 1: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_asian_ff"> Field 50: Race of principal owner 1: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_asian_ff"> Field 50: Race of principal owner 1: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_baa_ff"> Field 51: Race of principal owner 1: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_baa_ff"> Field 51: Race of principal owner 1: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_race_pi_ff"> Field 52: Race of principal owner 1: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_race_pi_ff"> Field 52: Race of principal owner 1: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_gender_flag"> Field 53: Sex/gender of principal owner 1: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_gender_flag"> Field 53: Sex/gender of principal owner 1: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_1_gender_ff"> Field 54: Sex/gender of principal owner 1: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_1_gender_ff"> Field 54: Sex/gender of principal owner 1: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -2846,32 +2846,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_ethnicity"> Field 55: Ethnicity of principal owner 2 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_ethnicity"> Field 55: Ethnicity of principal owner 2 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_ethnicity_ff"> Field 56: Ethnicity of principal owner 2: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_ethnicity_ff"> Field 56: Ethnicity of principal owner 2: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race"> Field 57: Race of principal owner 2 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race"> Field 57: Race of principal owner 2 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_anai_ff"> Field 58: Race of principal owner 2: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_anai_ff"> Field 58: Race of principal owner 2: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_asian_ff"> Field 59: Race of principal owner 2: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_asian_ff"> Field 59: Race of principal owner 2: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_baa_ff"> Field 60: Race of principal owner 2: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_baa_ff"> Field 60: Race of principal owner 2: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_race_pi_ff"> Field 61: Race of principal owner 2: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_race_pi_ff"> Field 61: Race of principal owner 2: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_gender_flag"> Field 62: Sex/gender of principal owner 2: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_gender_flag"> Field 62: Sex/gender of principal owner 2: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_2_gender_ff"> Field 63: Sex/gender of principal owner 2: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_2_gender_ff"> Field 63: Sex/gender of principal owner 2: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3026,32 +3026,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_ethnicity"> Field 64: Ethnicity of principal owner 3 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_ethnicity"> Field 64: Ethnicity of principal owner 3 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_ethnicity_ff"> Field 65: Ethnicity of principal owner 3: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_ethnicity_ff"> Field 65: Ethnicity of principal owner 3: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race"> Field 66: Race of principal owner 3 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race"> Field 66: Race of principal owner 3 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_anai_ff"> Field 67: Race of principal owner 3: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_anai_ff"> Field 67: Race of principal owner 3: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_asian_ff"> Field 68: Race of principal owner 3: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_asian_ff"> Field 68: Race of principal owner 3: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_baa_ff"> Field 69: Race of principal owner 3: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_baa_ff"> Field 69: Race of principal owner 3: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_race_pi_ff"> Field 70: Race of principal owner 3: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_race_pi_ff"> Field 70: Race of principal owner 3: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_gender_flag"> Field 71: Sex/gender of principal owner 3: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_gender_flag"> Field 71: Sex/gender of principal owner 3: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_3_gender_ff"> Field 72: Sex/gender of principal owner 3: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_3_gender_ff"> Field 72: Sex/gender of principal owner 3: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3206,32 +3206,32 @@ export default `
                     <p>Rule section: 12 CFR 1002.107(a)(19)</p>
                     <p></p>
                     <ul class="m-list m-list__links">
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_ethnicity"> Field 73: Ethnicity of principal owner 4 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_ethnicity"> Field 73: Ethnicity of principal owner 4 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_ethnicity_ff"> Field 74: Ethnicity of principal owner 4: free-form text field for other Hispanic or Latino ethnicity </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_ethnicity_ff"> Field 74: Ethnicity of principal owner 4: free-form text field for other Hispanic or Latino ethnicity </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race"> Field 75: Race of principal owner 4 </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race"> Field 75: Race of principal owner 4 </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_anai_ff"> Field 76: Race of principal owner 4: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_anai_ff"> Field 76: Race of principal owner 4: free-form text field for American Indian or Alaska Native Enrolled or Principal Tribe </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_asian_ff"> Field 77: Race of principal owner 4: free-form text field for other Asian race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_asian_ff"> Field 77: Race of principal owner 4: free-form text field for other Asian race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_baa_ff"> Field 78: Race of principal owner 4: free-form text field for other Black or African American race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_baa_ff"> Field 78: Race of principal owner 4: free-form text field for other Black or African American race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_race_pi_ff"> Field 79: Race of principal owner 4: free-form text field for other Pacific Islander race </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_race_pi_ff"> Field 79: Race of principal owner 4: free-form text field for other Pacific Islander race </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_gender_flag"> Field 80: Sex/gender of principal owner 4: NP flag </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_gender_flag"> Field 80: Sex/gender of principal owner 4: NP flag </a>
                         </li>
-                        <li class="m-list_item">
-                            <a class="m-list_link" href="#po_4_gender_ff"> Field 81: Sex/gender of principal owner 4: free-form text field for self-identified sex/gender </a>
+                        <li class="m-list__item">
+                            <a class="m-list__link" href="#po_4_gender_ff"> Field 81: Sex/gender of principal owner 4: free-form text field for self-identified sex/gender </a>
                         </li>
                     </ul>
                 </div>
@@ -3426,7 +3426,7 @@ export default `
                 <p data-block-key="abnhl">
                     <a class="a-link a-link__icon"
                        href="https://raw.githubusercontent.com/cfpb/sbl-content/2024-v1/fig-files/validation-spec/2024-validations.csv">
-                        <span class="a-link_text">Validation spec (CSV)</span>
+                        <span class="a-link__text">Validation spec (CSV)</span>
                         <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"
diff --git a/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js b/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
index 0d9607d5e38..f50d17fb52e 100644
--- a/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
+++ b/test/unit_tests/apps/filing-instruction-guide/js/fig-sidenav-utils-spec.js
@@ -56,15 +56,15 @@ describe('The Filing Instruction Guide side navigation', () => {
     it('should highlight nav items', () => {
       highlightNavItem('#4');
       expect(navItems.get('#4').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#2');
       expect(navItems.get('#2').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#5');
       expect(navItems.get('#5').outerHTML).toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
     });
 
@@ -72,17 +72,17 @@ describe('The Filing Instruction Guide side navigation', () => {
       highlightNavItem('#4');
       unHighlightNavItem('#4');
       expect(navItems.get('#4').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#2');
       unHighlightNavItem('#2');
       expect(navItems.get('#2').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
       highlightNavItem('#5');
       unHighlightNavItem('#5');
       expect(navItems.get('#5').outerHTML).not.toContain(
-        'o-secondary-nav_link__current',
+        'o-secondary-nav__link__current',
       );
     });
   });
diff --git a/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js b/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
index 711761d24f9..5ee7e1ca9ce 100644
--- a/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
+++ b/test/unit_tests/apps/financial-well-being/js/fwb-questions-spec.js
@@ -64,13 +64,13 @@ const HTML_SNIPPET = `
   <div class="block u-mb30">
     <h2>About you</h2>
     <div class="question-group">
-      <fieldset class="o-form_fieldset" id="method">
+      <fieldset class="o-form__fieldset" id="method">
         <h3 class="o-scale_header">
             Select how you completed the questionnaire.
             This changes the scoring calculation.
         </h3>
         <ul class="m-list m-list__unstyled content-l">
-          <li class="content-l_col content-l_col-1-2">
+          <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
                         m-form-field__radio
                         m-form-field__lg-target">
@@ -90,7 +90,7 @@ const HTML_SNIPPET = `
               </label>
             </div>
           </li>
-          <li class="content-l_col content-l_col-1-2">
+          <li class="content-l__col content-l__col-1-2">
             <div class="m-form-field
                         m-form-field__radio
                         m-form-field__lg-target">
@@ -115,7 +115,7 @@ const HTML_SNIPPET = `
       </fieldset>
     </div>
   </div>
-  <div class="o-form_group">
+  <div class="o-form__group">
     <input class="submit-quiz a-btn"
            id="submit-quiz"
            type="submit"
diff --git a/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js b/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
index 87cc8ae4b8d..0d74fdfa5d1 100644
--- a/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
+++ b/test/unit_tests/apps/financial-well-being/js/fwb-results-spec.js
@@ -20,15 +20,15 @@ const dataLayerEvent = {
 const HTML_SNIPPET = `
 <div class="content">
   <div class="o-expandable">
-    <button class="o-expandable_header">
-      <span class="o-expandable_label">
+    <button class="o-expandable__header">
+      <span class="o-expandable__label">
       </span>
-      <span class="o-expandable_cues">
-        <span class="o-expandable_cue-open" role="img" aria-label="Show"></span>
-        <span class="o-expandable_cue-close" role="img" aria-label="Hide"></span>
+      <span class="o-expandable__cues">
+        <span class="o-expandable__cue-open" role="img" aria-label="Show"></span>
+        <span class="o-expandable__cue-close" role="img" aria-label="Hide"></span>
       </span>
     </button>
-    <div class="o-expandable_content"></div>
+    <div class="o-expandable__content"></div>
   </div>
   <figure class="comparison-chart" id="comparison-chart">
     <div class="comparison-chart_toggle u-js-only">
@@ -110,8 +110,8 @@ describe('fwb-results', () => {
       '.comparison-chart_toggle-button',
     );
     dataPoint = document.querySelectorAll('.comparison_data-point');
-    expandableTarget = document.querySelector('.o-expandable_header');
-    expandableContent = document.querySelector('.o-expandable_content');
+    expandableTarget = document.querySelector('.o-expandable__header');
+    expandableContent = document.querySelector('.o-expandable__content');
     initFwbResults();
   });
 
diff --git a/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js b/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
index ea8bd53ed89..49116d0f012 100644
--- a/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
+++ b/test/unit_tests/apps/paying-for-college/disclosures/fixtures/overview.js
@@ -2,34 +2,34 @@ export default `
 <main id="main" data-context="paying-for-college2">
     <div id="financial-offer" class="understanding-financial-aid-offer">
         <section class="m-hero">
-            <div class="m-hero_wrapper wrapper">
-                <div class="m-hero_text">
-                    <h1 class="m-hero_heading">
+            <div class="m-hero__wrapper wrapper">
+                <div class="m-hero__text">
+                    <h1 class="m-hero__heading">
                         Understanding your financial aid offer
                     </h1>
-                    <p class="m-hero_subhead">
+                    <p class="m-hero__subhead">
                         This personalized summary will help you evaluate your
                         financial aid offer from your school to see how
                         student debt may impact your future finances. </p>
                 </div>
-                <div class="m-hero_image-wrapper">
-                  <div class="m-hero_image"></div>
+                <div class="m-hero__image-wrapper">
+                  <div class="m-hero__image"></div>
                 </div>
             </div>
         </section>
-        <div class="content_line"></div>
-        <section class="verify step content_wrapper">
-            <div class="content_main">
+        <div class="content__line"></div>
+        <section class="verify step content__wrapper">
+            <div class="content__main">
 
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noSchool">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the school ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right school ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
@@ -37,26 +37,26 @@ export default `
 
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noProgram">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                   <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation">
+                   <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation">
                             The information your school provided is missing the program ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right program ID and it's in the correct format.
                         </p>
 
-                        <p class="m-notification_explanation">
+                        <p class="m-notification__explanation">
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         </p>
                     </div>
                 </div>
                 <div class="m-notification m-notification__error verify_content" data-missing-data-error="noOffer">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 19" class="cf-icon-svg cf-icon-svg__error-round"><path d="M16.417 9.583a7.916 7.916 0 1 1-15.833 0 7.916 7.916 0 0 1 15.833 0Zm-6.804.01 3.032-3.033a.792.792 0 1 0-1.12-1.12L8.494 8.473 5.46 5.44a.792.792 0 0 0-1.12 1.12l3.033 3.033-3.032 3.033a.791.791 0 1 0 1.12 1.119l3.032-3.033 3.033 3.033a.79.79 0 0 0 1.12 0c.309-.31.309-.81 0-1.12L9.612 9.594Z"></path></svg>
-                    <div class="m-notification_content">
-                        <div class="h4 m-notification_message">Error!</div>
-                        <p class="m-notification_explanation"></p>
+                    <div class="m-notification__content">
+                        <div class="h4 m-notification__message">Error!</div>
+                        <p class="m-notification__explanation"></p>
                             The information your school provided is missing the offer ID, which is vital information for this tool to work. Please contact your school and ask them to ensure they are sending us the right offer ID and it's in the correct format.
                         <p></p>
 
-                        <p class="m-notification_explanation"></p>
+                        <p class="m-notification__explanation"></p>
                             Once your school provides you with an updated URL link, you will be able to return here so you can continue reviewing the information in the tool.
                         <p></p>
                     </div>
@@ -173,12 +173,12 @@ export default `
                         </form>
                     </div>
                 </div>
-                <div class="content_line"></div>
+                <div class="content__line"></div>
             </div>
         </section>
         <section id="info-right" class="information-right" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__right">
@@ -221,11 +221,11 @@ export default `
                             </div>
                         </div>
                     </div>
-                    <div class="content_line"></div>
+                    <div class="content__line"></div>
                 </div>
             </section>
-            <section class="review step content_wrapper" data-section="review">
-                <div class="content_main">
+            <section class="review step content__wrapper" data-section="review">
+                <div class="content__main">
                     <div class="review_wrapper">
                         <div class="review_intro">
                             <h2 class="step_heading">
@@ -335,7 +335,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -367,7 +367,7 @@ export default `
                                             </label>
                                             <p class="aid-form_definition">
                                                 Based on financial need,
-                                                <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants/pell" rel="noopener noreferrer" target="_blank"><span class="a-link_text">see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
+                                                <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants/pell" rel="noopener noreferrer" target="_blank"><span class="a-link__text">see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
                                         <div class="aid-form_input-wrapper">
@@ -458,7 +458,7 @@ export default `
                                             <p class="aid-form_definition">
                                                 Money for service members or
                                                 veterans that you don’t have
-                                                to pay back; <a class="a-link a-link__icon" href="https://www.vets.gov/gi-bill-comparison-tool" rel="noopener noreferrer" target="_blank"><span class="a-link_text">see how much the
+                                                to pay back; <a class="a-link a-link__icon" href="https://www.vets.gov/gi-bill-comparison-tool" rel="noopener noreferrer" target="_blank"><span class="a-link__text">see how much the
                                                 GI Bill pays</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
@@ -468,7 +468,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -516,7 +516,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="grantsTotal" id="summary_total-grants-scholarships">10,100</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -686,7 +686,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="workstudy">3,000</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -731,7 +731,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="savingsTotal">18,000</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -803,12 +803,12 @@ export default `
                                                 Reserved for students most in
                                                 need; interest starts
                                                 accumulating 9 months after you
-                                                leave school; <a class="a-link a-link__icon" href="https://studentaid.ed.gov/sa/types/loans/perkins" rel="noopener noreferrer" target="_blank"><span class="a-link_text">
+                                                leave school; <a class="a-link a-link__icon" href="https://studentaid.ed.gov/sa/types/loans/perkins" rel="noopener noreferrer" target="_blank"><span class="a-link__text">
                                                 see how you qualify</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="perkins" style="display: none;"></div>
+                                    <div class="content__line loans_line" data-section="perkins" style="display: none;"></div>
                                     <div class="form-group_item" data-section="subsidized" style="display: none;">
                                         <div class="aid-form_label-wrapper">
                                             <label class="form-label" for="contrib__subsidized">
@@ -847,7 +847,7 @@ export default `
                                             </p>
                                         </div>
                                     </div>
-                                    <div class="content_line loans_line" data-section="subsidized" style="display: none;"></div>
+                                    <div class="content__line loans_line" data-section="subsidized" style="display: none;"></div>
                                     <div class="form-group_item" data-section="unsubsidized">
                                         <div class="aid-form_label-wrapper">
                                             <label class="form-label" for="contrib__unsubsidized">
@@ -888,7 +888,7 @@ export default `
                                         </div>
                                     </div>
                                     <div data-section="gradPlus">
-                                      <div class="content_line loans_line"></div>
+                                      <div class="content__line loans_line"></div>
                                       <div class="form-group_item">
                                           <div class="aid-form_label-wrapper">
                                               <label class="form-label" for="contrib__direct-plus">
@@ -925,7 +925,7 @@ export default `
                                       </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="federalLoans">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1031,7 +1031,7 @@ export default `
                                         </button>
                                     </div>
                                     <div class="aid-form_inline-subtotal">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1105,7 +1105,7 @@ export default `
                                         </div>
                                     </div>
                                     <div class="aid-form_inline-subtotal" data-section="tuitionpaymentplan" style="display: block;">
-                                        <div class="content_line
+                                        <div class="content__line
                                         aid-form_equals-line"></div>
                                         <div class="line-item">
                                             <div class="line-item_title">
@@ -1167,7 +1167,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="tuitionRepayYearly" id="summary_total-payment-plans">1,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1225,7 +1225,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="summaryLoanTotal">7,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1335,7 +1335,7 @@ export default `
                                         <span class="line-item_amount" data-line-item="true" data-financial="summaryLoanTotal">7,200</span>
                                     </div>
                                 </div>
-                                <div class="content_line aid-form_equals-line">
+                                <div class="content__line aid-form_equals-line">
                                 </div>
                                 <div class="line-item line-item__total">
                                     <div class="line-item_title">
@@ -1415,8 +1415,8 @@ export default `
                 </div>
             </section>
             <section class="continue step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="continue_wrapper">
                             <div class="continue_content">
                                 <h2 class="step_heading">
@@ -1443,8 +1443,8 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="evaluate step content_wrapper" data-section="evaluate">
-                <div class="content_main">
+            <section class="evaluate step content__wrapper" data-section="evaluate">
+                <div class="content__main">
                     <div class="evaluate_wrapper">
                         <div class="evaluate_intro">
                             <h2 class="step_heading">
@@ -1671,7 +1671,7 @@ export default `
                                   payment is <span id="criteria_loan-monthly" data-financial="loanMonthly">$562</span>,
                                   based on standard loan terms of <span data-financial="repaymentTerm" data-currency="false">10</span> years. Once
                                   you leave school, you are able to choose one
-                                  of <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link_text">several
+                                  of <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link__text">several
                                   different repayment options for your federal
                                   loans</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a> that may help reduce your monthly
                                   student loan payment.
@@ -1682,7 +1682,7 @@ export default `
                                     qualify for a federal tax credit or
                                     deduction. As a result, when you start
                                     repaying your loans, you may be able to
-                                    <a class="a-link a-link__icon" href="https://www.irs.gov/newsroom/tax-benefits-for-education-information-center" rel="noopener noreferrer" target="_blank"><span class="a-link_text">reduce your
+                                    <a class="a-link a-link__icon" href="https://www.irs.gov/newsroom/tax-benefits-for-education-information-center" rel="noopener noreferrer" target="_blank"><span class="a-link__text">reduce your
                                     federal tax burden</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>. Please consult with
                                     your tax advisor.
                                 </p>
@@ -1767,7 +1767,7 @@ export default `
                                     </div>
                                     <div>
                                         <p>
-                                          <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link_text">
+                                          <a class="a-link a-link__icon" href="https://studentaid.gov/manage-loans/repayment/plans" rel="noopener noreferrer" target="_blank"><span class="a-link__text">
                                             Learn about other federal repayment options
                                           </span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                         </p>
@@ -1917,7 +1917,7 @@ export default `
                                             (the average national salary for all
                                             students who attended
                                             college)</span> in the region you
-                                            plan to live (Source: <a class="a-link a-link__icon" href="http://www.bls.gov/cex/" rel="noopener noreferrer" target="_blank"><span class="a-link_text">Bureau of Labor
+                                            plan to live (Source: <a class="a-link a-link__icon" href="http://www.bls.gov/cex/" rel="noopener noreferrer" target="_blank"><span class="a-link__text">Bureau of Labor
                                             Statistics</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>). Your expenses may
                                             be higher or lower.
                                         </p>
@@ -2098,7 +2098,7 @@ export default `
                                     </div>
                                 </form>
                                 <div class="aid-form_summary">
-                                    <div class="content_line
+                                    <div class="content__line
                                     aid-form_equals-line"></div>
                                     <div class="line-item line-item__total">
                                         <div class="line-item_title">
@@ -2223,8 +2223,8 @@ export default `
                 </div>
             </section>
             <section class="question step">
-                <div class="content_wrapper">
-                    <div class="content_main">
+                <div class="content__wrapper">
+                    <div class="content__main">
                         <div class="question_wrapper">
                             <div class="question_content">
                                 <h2 class="step_heading step_settlement">
@@ -2261,9 +2261,9 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="get-options step content_wrapper
+            <section class="get-options step content__wrapper
             column-well_wrapper">
-                <div class="content_main">
+                <div class="content__main">
                     <div class="get-options_wrapper">
                         <div class="get-options_intro followup__no-not-sure">
                             <h2 class="step_heading">
@@ -2304,13 +2304,13 @@ export default `
                         </div>
                     </div>
                     <div class="get-options_wrapper">
-                        <div class="get-options__settlement content_main">
+                        <div class="get-options__settlement content__main">
                             <section class="option option__maximize-grants option__settlement">
                                 <h3 class="option_heading">
                                     Maximize all available grants and scholarships.
                                 </h3>
                                 <p>
-                                    Consider applying for <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants" rel="noopener noreferrer" target="_blank"><span class="a-link_text">additional
+                                    Consider applying for <a class="a-link a-link__icon" href="https://studentaid.gov/understand-aid/types/grants" rel="noopener noreferrer" target="_blank"><span class="a-link__text">additional
                                     scholarships and grants</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>,
                                     which provide money you don’t have to repay.
                                     By increasing the amount of this type of
@@ -2326,7 +2326,7 @@ export default `
                                 <p>
                                     Living at home or finding cheaper off-campus
                                     housing can
-                                    <a class="a-link a-link__icon" href="https://studentaid.gov/resources/prepare-for-college/students/choosing-schools/consider-costs#how-can-i" rel="noopener noreferrer" target="_blank"><span class="a-link_text">reduce the
+                                    <a class="a-link a-link__icon" href="https://studentaid.gov/resources/prepare-for-college/students/choosing-schools/consider-costs#how-can-i" rel="noopener noreferrer" target="_blank"><span class="a-link__text">reduce the
                                     cost of attendance</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>, meaning you can
                                     borrow less money overall.
                                 </p>
@@ -2363,7 +2363,7 @@ export default `
                                     can help reduce the amount of money you need
                                     to borrow to pay for school, resulting in
                                     long-term benefits of reducing overall debt.
-                                    Check out <a class="a-link a-link__icon" href="https://www.careeronestop.org/jobsearch/job-search.aspx" rel="noopener noreferrer" target="_blank"><span class="a-link_text">resources for finding a
+                                    Check out <a class="a-link a-link__icon" href="https://www.careeronestop.org/jobsearch/job-search.aspx" rel="noopener noreferrer" target="_blank"><span class="a-link__text">resources for finding a
                                     job</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>, including links to job search
                                     sites, tips for writing a
                                     résumé, and more.
@@ -2373,7 +2373,7 @@ export default `
                         <aside class="get-options__sidebar
                                       column-well
                                       column-well__emphasis
-                                      content_sidebar">
+                                      content__sidebar">
                             <div class="column-well_content">
                                 <h3 class="option__take-action-header">
                                     What you can do
@@ -2401,7 +2401,7 @@ export default `
                                     college students
                                 </h4>
                                 <div>
-                                    <a class="a-link a-link__icon" href="https://collegescorecard.ed.gov" rel="noopener noreferrer" target="_blank"><span class="a-link_text">College
+                                    <a class="a-link a-link__icon" href="https://collegescorecard.ed.gov" rel="noopener noreferrer" target="_blank"><span class="a-link__text">College
                                     Scorecard</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                     <p>Compare <a href="https://collegescorecard.ed.gov/school/?133465" target="_blank" rel="noopener noreferrer" class="scorecard-school a-link a-link__icon">your
                                         school </a>’s annual costs,
@@ -2409,11 +2409,11 @@ export default `
                                         earnings.</p>
                                 </div>
                                 <p>
-                                    <a class="a-link a-link__icon" href="https://www.consumer.ftc.gov/articles/0395-choosing-college-questions-ask" rel="noopener noreferrer" target="_blank"><span class="a-link_text">Questions to ask
+                                    <a class="a-link a-link__icon" href="https://www.consumer.ftc.gov/articles/0395-choosing-college-questions-ask" rel="noopener noreferrer" target="_blank"><span class="a-link__text">Questions to ask
                                         your college</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                 </p>
                                 <div>
-                                    <a class="a-link a-link__icon" href="https://studentaid.gov/h/apply-for-aid/fafsa" rel="noopener noreferrer" target="_blank"><span class="a-link_text">FAFSA®</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
+                                    <a class="a-link a-link__icon" href="https://studentaid.gov/h/apply-for-aid/fafsa" rel="noopener noreferrer" target="_blank"><span class="a-link__text">FAFSA®</span> <svg class="cf-icon-svg cf-icon-svg__external-link" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                                     <p>Apply for federal, state, and school
                                         financial aid.</p>
                                 </div>
@@ -2432,9 +2432,9 @@ export default `
                     </div>
                 </div>
             </section>
-            <section class="next-steps step content_wrapper">
-                <div class="content_main">
-                    <div class="content_line"></div>
+            <section class="next-steps step content__wrapper">
+                <div class="content__main">
+                    <div class="content__line"></div>
                     <div class="next-steps_wrapper">
                         <div class="next-steps_intro">
                             <h2 class="step_heading">
@@ -2481,7 +2481,7 @@ export default `
                             </p>
                             <div class="next-steps_controls">
                                 <button class="a-btn a-btn__full-on-xs" type="button" data-gtm_ignore="true">
-                                    <span class="a-btn_icon__on-left">
+                                    <span class="a-btn__icon--on-left">
                                         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__print" viewBox="0 0 14 19"><path d="m8.698 2.358 3.065 3.066v1.95h.16a1.112 1.112 0 0 1 1.109 1.108v4.837a1.112 1.112 0 0 1-1.109 1.108h-.16v1.726a.477.477 0 0 1-.475.475H2.712a.477.477 0 0 1-.475-.475v-1.726h-.16A1.112 1.112 0 0 1 .968 13.32V8.482a1.112 1.112 0 0 1 1.109-1.108h.16v-4.54a.476.476 0 0 1 .475-.476zm-.22 3.876a.61.61 0 0 1-.608-.608v-2.16H3.345v3.908h7.31v-1.14zm2.177 4.512h-7.31v4.773h7.31zm-1.054.874h-5.26v1.109h5.26zm0 1.962h-5.26v1.108h5.26zm2.437-4.485a.554.554 0 1 0-.554.554.554.554 0 0 0 .554-.554z"></path></svg>
                                     </span>
                                     Print
@@ -2493,8 +2493,8 @@ export default `
             </section>
         </section>
         <section id="info-wrong" class="information-wrong" tabindex="-1">
-            <section class="instructions step content_wrapper">
-                <div class="content_main">
+            <section class="instructions step content__wrapper">
+                <div class="content__main">
                     <div class="instructions_wrapper">
                         <div class="instructions_content
                         instructions_content__wrong">
diff --git a/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js b/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
index 7fe1027002b..8d36ad539c9 100644
--- a/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/permalinks-utils-spec.js
@@ -29,7 +29,7 @@ const HTML_SNIPPET2 = `
 
 const HTML_SNIPPET3 = `
   <div class="regulations3k">
-    <div id="content_main">
+    <div id="content__main">
       <div class="o-regulations-wayfinder" data-section="Comment for 1026.33 - Requirements for Reverse Mortgages">
           <div class="o-regulations-wayfinder_sidebar">
               <span class="h4">
@@ -246,7 +246,7 @@ describe('The Regs3K permalinks utils', () => {
     it('should update the wayfinder', () => {
       updateParagraphPositions();
       const mainContent = document.querySelector(
-        '.regulations3k #content_main',
+        '.regulations3k #content__main',
       );
       const wayfinder = document.querySelector('.o-regulations-wayfinder');
 
diff --git a/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js b/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
index 410cd984d25..26f75b22a4d 100644
--- a/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
+++ b/test/unit_tests/apps/regulations3k/js/recent-notices-spec.js
@@ -32,7 +32,7 @@ describe('The Regs3K search page', () => {
     };
     const processedNotice = processNotice(notice);
     expect(processedNotice.constructor.name).toEqual('HTMLLIElement');
-    expect(processedNotice.className).toEqual('m-list_link');
+    expect(processedNotice.className).toEqual('m-list__link');
     expect(processedNotice.querySelector('a').href).toEqual(
       'https://federalregister.gov/',
     );
@@ -62,7 +62,7 @@ describe('The Regs3K search page', () => {
 
     // Wait for window.load to trigger.
     setTimeout(() => {
-      const numNotices = document.querySelectorAll('.m-list_link').length;
+      const numNotices = document.querySelectorAll('.m-list__link').length;
       expect(numNotices).toEqual(4);
     }, 1000);
   });
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
index a2f75db65db..e6e3170deba 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/ClearableInput-spec.js
@@ -6,14 +6,14 @@ let clearBtnDom;
 let inputDom;
 
 const HTML_SNIPPET = `
-<div class="o-form__input-w-btn_input-container">
+<div class="o-form--input-w-btn__input-container">
      <div class="m-btn-inside-input
                  input-contains-label">
-         <label for="query" class="input-contains-label_before
-                                   input-contains-label_before__search">
+         <label for="query" class="input-contains-label__before
+                                   input-contains-label__before__search">
          </label>
-         <label for="query" class="input-contains-label_after
-                                   input-contains-label_after__clear">
+         <label for="query" class="input-contains-label__after
+                                   input-contains-label__after__clear">
          </label>
          <input type="text"
                 title="Search the CFPB"
@@ -27,9 +27,9 @@ const HTML_SNIPPET = `
 describe('ClearableInput', () => {
   beforeEach(() => {
     document.body.innerHTML = HTML_SNIPPET;
-    baseDom = document.querySelector('.o-form__input-w-btn_input-container');
+    baseDom = document.querySelector('.o-form--input-w-btn__input-container');
     inputDom = baseDom.querySelector('input');
-    clearBtnDom = baseDom.querySelector('.input-contains-label_after__clear');
+    clearBtnDom = baseDom.querySelector('.input-contains-label__after__clear');
   });
 
   describe('init function', () => {
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
index 46a66020bab..d4815312bbd 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/expandable-mobile-spec.js
@@ -10,25 +10,25 @@ const HTML_SNIPPET = `
      class="o-expandable
             o-expandable__background
             ">
-    <button class="o-expandable_header" type="button">
-        <span class="h4 o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="h4 o-expandable__label">
             Building block
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"/></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"/></svg>
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content
-                o-expandable_content__onload-open
+    <div class="o-expandable__content
+                o-expandable__content__onload-open
                 o-expandable__mobile-collapsed">
-            <div class="o-form_group u-mt15">
-                <fieldset class="o-form_fieldset">
+            <div class="o-form__group u-mt15">
+                <fieldset class="o-form__fieldset">
                     <ul class="m-list m-list__unstyled">
                         <li>
                             <div class="m-form-field m-form-field__checkbox">
@@ -46,14 +46,14 @@ const HTML_SNIPPET = `
 global.console = { error: jest.fn(), log: jest.fn() };
 
 let expandableDiv;
-const OPEN_DEFAULT_CLASS = 'o-expandable_content__onload-open';
+const OPEN_DEFAULT_CLASS = 'o-expandable__content__onload-open';
 
 describe('expandable-mobile', () => {
   beforeEach(() => {
     setInnerWidth(1000);
     // Load HTML fixture
     document.body.innerHTML = HTML_SNIPPET;
-    expandableDiv = document.querySelector('#test-div .o-expandable_content');
+    expandableDiv = document.querySelector('#test-div .o-expandable__content');
   });
 
   it('should not throw any errors on init', () => {
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
index cdb6c72af00..5f60926431b 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/search-spec.js
@@ -7,11 +7,11 @@ import { init as searchInit } from '../../../../../cfgov/unprocessed/apps/teache
 const HTML_SNIPPET = `
   <form class="tdp-activity-search" id="search-form" action="." data-js-hook="behavior_submit-search">
     <div class="input-contains-label">
-      <label for="search-text" class="input-contains-label_before input-contains-label_before__search">
+      <label for="search-text" class="input-contains-label__before input-contains-label__before__search">
           <span class="u-visually-hidden">The term to search for</span>
       </label>
       <input id="search-text" type="text" autocomplete="off" class="a-text-input" name="q" placeholder="Enter your search term(s)" value="executive">
-      <label for="search-text" class="input-contains-label_after input-contains-label_after__clear u-hidden">Clear</label>
+      <label for="search-text" class="input-contains-label__after input-contains-label__after__clear u-hidden">Clear</label>
     </div>
     <button class="a-btn">Search</button>
   </form>
@@ -23,22 +23,22 @@ const HTML_SNIPPET = `
     <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
     <input type="hidden" name="page" inputmode="numeric" value="1">
     <div class="o-expandable o-expandable__background" data-bound="true">
-      <button class="o-expandable_header o-expandable_target__expanded" type="button">
-        <span class="h4 o-expandable_label">
+      <button class="o-expandable__header o-expandable_target__expanded" type="button">
+        <span class="h4 o-expandable__label">
           Building block
         </span>
-        <span class="o-expandable_cues">
-          <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+          <span class="o-expandable__cue-open" role="img" aria-label="Show">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
           </span>
-          <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+          <span class="o-expandable__cue-close" role="img" aria-label="Hide">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
           </span>
         </span>
       </button>
-      <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 119px;">
-        <div class="o-form_group u-mt15">
-          <fieldset class="o-form_fieldset">
+      <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 119px;">
+        <div class="o-form__group u-mt15">
+          <fieldset class="o-form__fieldset">
             <ul class="m-list m-list__unstyled">
               <li>
                 <div class="m-form-field m-form-field__checkbox">
@@ -65,18 +65,18 @@ const HTML_SNIPPET = `
     </div>
 
     <div class="o-expandable o-expandable__background" data-bound="true">
-      <button class="o-expandable_header o-expandable_target__expanded" type="button">
-        <span class="h4 o-expandable_label">Topic</span>
-        <span class="o-expandable_cues">
-          <span class="o-expandable_cue-open" role="img" aria-label="Show">
+      <button class="o-expandable__header o-expandable_target__expanded" type="button">
+        <span class="h4 o-expandable__label">Topic</span>
+        <span class="o-expandable__cues">
+          <span class="o-expandable__cue-open" role="img" aria-label="Show">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
           </span>
-          <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+          <span class="o-expandable__cue-close" role="img" aria-label="Hide">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
           </span>
         </span>
       </button>
-      <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 337px;">
+      <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 337px;">
         <ul class="m-list m-list__unstyled u-mt15">
           <li class="o-expandable-facets" data-bound="true">
             <div class="m-form-field m-form-field__checkbox">
diff --git a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
index ddb4aaf8b01..7f2d5725f5d 100644
--- a/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
+++ b/test/unit_tests/apps/teachers-digital-platform/js/tdp-analytics-spec.js
@@ -26,22 +26,22 @@ const HTML_SNIPPET = `
       <input type="hidden" name="q" value="{% if search_query: %}{{ search_query }}{% endif %}">
       <input type="hidden" name="page" inputmode="numeric" value="1">
       <div class="o-expandable o-expandable__background" data-bound="true">
-        <button class="o-expandable_header o-expandable_target__expanded" type="button">
-          <span class="h4 o-expandable_label">
+        <button class="o-expandable__header o-expandable_target__expanded" type="button">
+          <span class="h4 o-expandable__label">
             Building block
           </span>
-          <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+          <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
             </span>
           </span>
         </button>
-        <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 119px;">
-          <div class="o-form_group u-mt15">
-            <fieldset class="o-form_fieldset">
+        <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 119px;">
+          <div class="o-form__group u-mt15">
+            <fieldset class="o-form__fieldset">
               <ul class="m-list m-list__unstyled">
                 <li>
                   <div class="m-form-field m-form-field__checkbox">
@@ -68,18 +68,18 @@ const HTML_SNIPPET = `
       </div>
 
       <div class="o-expandable o-expandable__background" data-bound="true">
-        <button class="o-expandable_header o-expandable_target__expanded" type="button">
-          <span class="h4 o-expandable_label">Topic</span>
-          <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <button class="o-expandable__header o-expandable_target__expanded" type="button">
+          <span class="h4 o-expandable__label">Topic</span>
+          <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H549.6v213.6c0 27.6-22.4 50-50 50s-50-22.4-50-50V655.9H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h213.6V342.3c0-27.6 22.4-50 50-50s50 22.4 50 50v213.6h213.6c27.6 0 50 22.4 50 50s-22.5 50-50.1 50z"></path></svg>
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1200" class="cf-icon-svg"><path d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"></path></svg>
             </span>
           </span>
         </button>
-        <div class="o-expandable_content o-expandable_content__transition o-expandable_content__expanded" style="max-height: 337px;">
+        <div class="o-expandable__content o-expandable__content__transition o-expandable__content__expanded" style="max-height: 337px;">
           <ul class="m-list m-list__unstyled u-mt15">
             <li class="o-expandable-facets" data-bound="true">
               <div class="m-form-field m-form-field__checkbox">
@@ -148,27 +148,27 @@ const HTML_SNIPPET = `
     </form>
     <nav class="m-pagination" role="navigation" aria-label="Pagination">
         <a class="a-btn
-                  m-pagination_btn-prev"
+                  m-pagination__btn-prev"
            href="?page=21#pagination_content">
-            <span class="a-btn_icon a-btn_icon__on-left">{% include icons/left.svg %}</span>
+            <span class="a-btn__icon a-btn__icon--on-left">{% include icons/left.svg %}</span>
             Newer
         </a>
         <a class="a-btn
-                  m-pagination_btn-next"
+                  m-pagination__btn-next"
            href="?page=23#pagination_content">
-            <span class="a-btn_icon a-btn_icon__on-right">{% include icons/right.svg %}</span>
+            <span class="a-btn__icon a-btn__icon--on-right">{% include icons/right.svg %}</span>
             Older
         </a>
-        <form class="m-pagination_form"
+        <form class="m-pagination__form"
               action="#pagination_content">
-            <label class="m-pagination_label"
-                   for="m-pagination_current-page">
+            <label class="m-pagination__label"
+                   for="m-pagination__current-page">
                 Page
                 <span class="u-visually-hidden">
                     number 22 out
                 </span>
-                <input class="m-pagination_current-page"
-                       id="m-pagination_current-page"
+                <input class="m-pagination__current-page"
+                       id="m-pagination__current-page"
                        name="page"
                        type="number"
                        min="1"
@@ -176,12 +176,12 @@ const HTML_SNIPPET = `
                        pattern="[0-9]*"
                        inputmode="numeric"
                        value="22">
-                <span class="m-pagination_label"> of 149</span>
+                <span class="m-pagination__label"> of 149</span>
             </label>
             <button class="a-btn
                            a-btn__link
-                           m-pagination_btn-submit"
-                    id="m-pagination_btn-submit"
+                           m-pagination__btn-submit"
+                    id="m-pagination__btn-submit"
                     type="submit">Go</button>
         </form>
     </nav>
@@ -227,7 +227,7 @@ describe('The TDP custom analytics', () => {
   });
 
   it('should send an analytics event when next pagination button is clicked', () => {
-    const paginationButton = document.querySelector('.m-pagination_btn-next');
+    const paginationButton = document.querySelector('.m-pagination__btn-next');
     const spy = jest.fn();
 
     bindAnalytics(spy);
@@ -238,7 +238,7 @@ describe('The TDP custom analytics', () => {
   });
 
   it('should send an analytics event when an expandable is clicked', () => {
-    const expandable = document.querySelector('.o-expandable_header');
+    const expandable = document.querySelector('.o-expandable__header');
     const spy = jest.fn();
 
     bindAnalytics(spy);
diff --git a/test/unit_tests/js/modules/footer-button-spec.js b/test/unit_tests/js/modules/footer-button-spec.js
index 938cc052b24..67d43a45054 100644
--- a/test/unit_tests/js/modules/footer-button-spec.js
+++ b/test/unit_tests/js/modules/footer-button-spec.js
@@ -6,11 +6,11 @@ let footerBtnDom;
 
 const HTML_SNIPPET = `
 <div class="skip-nav">
-    <a class="skip-nav_link" href="#main">
+    <a class="skip-nav__link" href="#main">
         Skip to main content
     </a>
 </div>
-<a class="a-btn a-btn__secondary o-footer_top-button"
+<a class="a-btn a-btn__secondary o-footer__top-button"
    data-gtm_ignore="true" data-js-hook="behavior_return-to-top"
    href="#">
     Back to top
@@ -31,7 +31,7 @@ describe('footer-button', () => {
   beforeAll(() => {
     window.scrollTo = scrollTo;
     document.body.innerHTML = HTML_SNIPPET;
-    footerBtnDom = document.querySelector('.o-footer_top-button');
+    footerBtnDom = document.querySelector('.o-footer__top-button');
   });
 
   it(
diff --git a/test/unit_tests/js/molecules/Notification-spec.js b/test/unit_tests/js/molecules/Notification-spec.js
index 81cef09ec99..f0cb244665a 100644
--- a/test/unit_tests/js/molecules/Notification-spec.js
+++ b/test/unit_tests/js/molecules/Notification-spec.js
@@ -4,8 +4,8 @@ const HTML_SNIPPET = `
 <div class="m-notification">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1000 1200" class="cf-icon-svg"></svg>
-  <div class="m-notification_content">
-    <div class="h4 m-notification_message">Notification content</div>
+  <div class="m-notification__content">
+    <div class="h4 m-notification__message">Notification content</div>
   </div>
 </div>
 `;
@@ -85,9 +85,9 @@ describe('Notification', () => {
       const testMsg = 'Notification message content';
       notification.update(Notification.SUCCESS, testMsg);
 
-      const message = notificationElem.querySelector('.m-notification_message');
+      const message = notificationElem.querySelector('.m-notification__message');
       const explanation = notificationElem.querySelector(
-        '.m-notification_explanation',
+        '.m-notification__explanation',
       );
 
       expect(notificationElem.className).toContain('m-notification__success');
@@ -100,9 +100,9 @@ describe('Notification', () => {
       const testExplanation = 'Notification explanation content';
       notification.update(Notification.SUCCESS, testMsg, testExplanation);
 
-      const message = notificationElem.querySelector('.m-notification_message');
+      const message = notificationElem.querySelector('.m-notification__message');
       const explanation = notificationElem.querySelector(
-        '.m-notification_explanation',
+        '.m-notification__explanation',
       );
 
       expect(notificationElem.className).toContain('m-notification__success');
diff --git a/test/unit_tests/js/organisms/FilterableListControls-spec.js b/test/unit_tests/js/organisms/FilterableListControls-spec.js
index e4efb05b3ec..2ed5154c1ec 100644
--- a/test/unit_tests/js/organisms/FilterableListControls-spec.js
+++ b/test/unit_tests/js/organisms/FilterableListControls-spec.js
@@ -7,31 +7,31 @@ const HTML_SNIPPET = `
 <div class="o-expandable
             o-expandable__background
             o-expandable__border">
-    <button class="o-expandable_header" type="button">
-        <span class="h4 o-expandable_label">
+    <button class="o-expandable__header" type="button">
+        <span class="h4 o-expandable__label">
             Filter posts
         </span>
-        <span class="o-expandable_cues">
-            <span class="o-expandable_cue-open" role="img" aria-label="Show">
+        <span class="o-expandable__cues">
+            <span class="o-expandable__cue-open" role="img" aria-label="Show">
                 Show
                 filters
             </span>
-            <span class="o-expandable_cue-close" role="img" aria-label="Hide">
+            <span class="o-expandable__cue-close" role="img" aria-label="Hide">
                 Hide
                 filters
             </span>
         </span>
     </button>
 
-    <div class="o-expandable_content">
+    <div class="o-expandable__content">
 
     <form method="get" action=".">
 
         <div class="content-l">
 
-        <div class="content-l_col
-                    content-l_col-1">
-            <div class="o-form_group">
+        <div class="content-l__col
+                    content-l__col-1">
+            <div class="o-form__group">
                 <div class="m-form-field">
                     <label class="a-label a-label__heading" for="title">
                         Item name
@@ -46,10 +46,10 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-        <div class="content-l_col
-                    content-l_col-1-3">
-            <div class="o-form_group">
-                <fieldset class="o-form_fieldset">
+        <div class="content-l__col
+                    content-l__col-1-3">
+            <div class="o-form__group">
+                <fieldset class="o-form__fieldset">
                     <legend class="a-legend">
                         Category
                     </legend>
@@ -95,13 +95,13 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-        <div class="content-l_col
-                    content-l_col-2-3">
+        <div class="content-l__col
+                    content-l__col-2-3">
             <div class="content-l">
 
-                    <div class="content-l_col
-                                content-l_col-1-2">
-                        <div class="o-form_group">
+                    <div class="content-l__col
+                                content-l__col-1-2">
+                        <div class="o-form__group">
                             <div class="m-form-field">
                                 <label class="a-label a-label__heading" for="topics">
                                     Topic
@@ -115,16 +115,16 @@ const HTML_SNIPPET = `
                         </div>
                     </div>
 
-                    <div class="content-l_col
-                                content-l_col-1">
-                        <div class="o-form_group">
-                            <fieldset class="o-form_fieldset">
+                    <div class="content-l__col
+                                content-l__col-1">
+                        <div class="o-form__group">
+                            <fieldset class="o-form__fieldset">
                                 <legend class="a-legend">
                                     Date range
                                 </legend>
                                 <div class="content-l">
-                                    <div class="content-l_col
-                                                content-l_col-1-2">
+                                    <div class="content-l__col
+                                                content-l__col-1-2">
                                         <div class="m-form-field">
                                             <label class="a-label a-label__heading" for="from_date">
                                                 From:
@@ -132,8 +132,8 @@ const HTML_SNIPPET = `
                                             <input type="text" name="from_date" data-type="date" placeholder="mm/dd/yyyy" class="a-text-input a-text-input__full" id="from_date">
                                         </div>
                                     </div>
-                                    <div class="content-l_col
-                                                content-l_col-1-2">
+                                    <div class="content-l__col
+                                                content-l__col-1-2">
                                         <div class="m-form-field">
                                             <label class="a-label a-label__heading" for="to_date">
                                                 To:
@@ -149,8 +149,8 @@ const HTML_SNIPPET = `
             </div>
         </div>
 
-            <div class="content-l_col
-                        content-l_col-1
+            <div class="content-l__col
+                        content-l__col-1
                         m-btn-group">
                 <input class="a-btn" type="submit" value="Apply filters">
                 <a class="a-btn a-btn__link a-btn__warning" href="/about-us/blog/">
@@ -165,8 +165,8 @@ const HTML_SNIPPET = `
 </div>
 
 <div class="m-notification">
-    <div class="m-notification_content">
-        <div class="h4 m-notification_message"></div></div>
+    <div class="m-notification__content">
+        <div class="h4 m-notification__message"></div></div>
     </div>
 
 </div>
diff --git a/test/unit_tests/js/organisms/MegaMenu-spec.js b/test/unit_tests/js/organisms/MegaMenu-spec.js
index 1f9ab68ed20..9f65859fed3 100644
--- a/test/unit_tests/js/organisms/MegaMenu-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenu-spec.js
@@ -24,7 +24,7 @@ describe('MegaMenu', () => {
   describe('collapse', () => {
     it('should not be expanded by default', () => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
       const defaultExpanded = firstContent.getAttribute('aria-expanded');
 
       expect(defaultExpanded).toEqual('false');
@@ -32,8 +32,8 @@ describe('MegaMenu', () => {
 
     it('should expand on click', (done) => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       let isExpanded;
 
       /**
@@ -61,8 +61,8 @@ describe('MegaMenu', () => {
 
     it('should close when calling the collapse method', (done) => {
       window.innerWidth = 420;
-      const firstContent = navElem.querySelector('.o-mega-menu_content-1');
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const firstContent = navElem.querySelector('.o-mega-menu__content-1');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       let isExpanded;
 
       /**
diff --git a/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js b/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
index 550ad3f267a..1b2243b763e 100644
--- a/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenuDesktop-spec.js
@@ -23,11 +23,11 @@ describe('MegaMenuDesktop', () => {
     */
     it('should expand on the first level sub-menu button click', (done) => {
       const menuTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       const subContentWrapper = navElem.querySelector(
-        '.o-mega-menu_content-2-wrapper',
+        '.o-mega-menu__content-2-wrapper',
       );
       let isExpanded;
 
@@ -55,15 +55,15 @@ describe('MegaMenuDesktop', () => {
     });
 
     it('should not be expanded by default', () => {
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       const isExpanded = subContent.getAttribute('aria-expanded');
 
       expect(isExpanded).toEqual('false');
     });
 
     it('should not be expanded on the main trigger click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
-      const subContent = navElem.querySelector('.o-mega-menu_content-2');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
+      const subContent = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
diff --git a/test/unit_tests/js/organisms/MegaMenuMobile-spec.js b/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
index 31ed9959767..c29655e6b00 100644
--- a/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
+++ b/test/unit_tests/js/organisms/MegaMenuMobile-spec.js
@@ -22,12 +22,12 @@ describe('MegaMenuMobile', () => {
        See https://github.com/jsdom/jsdom/issues/1781
     */
     it('should expand on the first level sub-menu button click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       const subTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const firstPanel = navElem.querySelector('.o-mega-menu_content-1');
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const firstPanel = navElem.querySelector('.o-mega-menu__content-1');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
@@ -75,15 +75,15 @@ describe('MegaMenuMobile', () => {
     });
 
     it('should not be expanded by default', () => {
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       const isExpanded = secondPanel.getAttribute('data-open');
 
       expect(isExpanded).toEqual('false');
     });
 
     it('should not be expanded on the main trigger click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       let isExpanded;
 
       /**
@@ -102,13 +102,13 @@ describe('MegaMenuMobile', () => {
     });
 
     it('should collapse on the first level sub-menu back button click', (done) => {
-      const menuTrigger = navElem.querySelector('.o-mega-menu_trigger');
+      const menuTrigger = navElem.querySelector('.o-mega-menu__trigger');
       const subTrigger = navElem.querySelector(
-        '.o-mega-menu_content-1-link__has-children',
+        '.o-mega-menu__content-1-link__has-children',
       );
-      const secondPanel = navElem.querySelector('.o-mega-menu_content-2');
+      const secondPanel = navElem.querySelector('.o-mega-menu__content-2');
       const subAltTrigger = secondPanel.querySelector(
-        '.o-mega-menu_content-alt-trigger',
+        '.o-mega-menu__content-alt-trigger',
       );
       let isExpanded;
 
diff --git a/test/unit_tests/mocks/emailSignupSnippet.js b/test/unit_tests/mocks/emailSignupSnippet.js
index 9aa21ca78d5..8c3e41779b9 100644
--- a/test/unit_tests/mocks/emailSignupSnippet.js
+++ b/test/unit_tests/mocks/emailSignupSnippet.js
@@ -1,7 +1,7 @@
 export default `
 <div class="o-email-signup">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Stay informed
         </h2>
     </header>
@@ -15,8 +15,8 @@ export default `
           enctype="application/x-www-form-urlencoded">
         <div class="u-mb15">
             <div class="m-notification">
-                <div class="m-notification_content">
-                    <div class="h4 m-notification_message"></div>
+                <div class="m-notification__content">
+                    <div class="h4 m-notification__message"></div>
                 </div>
             </div>
         </div>
@@ -31,7 +31,7 @@ export default `
                    placeholder="mail@example.com"
                    required="">
         </div>
-        <div class="o-email-signup_buttons">
+        <div class="o-email-signup__buttons">
             <button class="a-btn">Sign up</button>
             <a class="a-btn a-btn__link a-btn__secondary"
                href="/owning-a-home/privacy-act-statement/"
diff --git a/test/unit_tests/mocks/megaMenuSnippet.js b/test/unit_tests/mocks/megaMenuSnippet.js
index 97113309176..8933f446a22 100644
--- a/test/unit_tests/mocks/megaMenuSnippet.js
+++ b/test/unit_tests/mocks/megaMenuSnippet.js
@@ -1,14 +1,14 @@
 export default `
 <nav class="o-mega-menu
             u-hidden" data-js-hook="behavior_flyout-menu" aria-label="Main menu">
-    <button class="o-mega-menu_trigger" data-js-hook="behavior_flyout-menu_trigger" aria-haspopup="menu">
-        <span class="o-mega-menu_trigger-open">
+    <button class="o-mega-menu__trigger" data-js-hook="behavior_flyout-menu_trigger" aria-haspopup="menu">
+        <span class="o-mega-menu__trigger-open">
             <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 14 19"><path d="M.789 4.836a1.03 1.03 0 0 1 1.03-1.029h10.363a1.03 1.03 0 1 1 0 2.059H1.818A1.03 1.03 0 0 1 .79 4.836zm12.422 4.347a1.03 1.03 0 0 1-1.03 1.029H1.819a1.03 1.03 0 0 1 0-2.059h10.364a1.03 1.03 0 0 1 1.029 1.03zm0 4.345a1.03 1.03 0 0 1-1.03 1.03H1.819a1.03 1.03 0 1 1 0-2.059h10.364a1.03 1.03 0 0 1 1.029 1.03z"></path></svg>
             <span class="u-visually-hidden">
                 Open the main menu
             </span>
         </span>
-        <span class="o-mega-menu_trigger-close">
+        <span class="o-mega-menu__trigger-close">
             <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg>
             <span class="u-visually-hidden">
                 Close the main menu
@@ -17,12 +17,12 @@ export default `
     </button>
 
 
-<div class="o-mega-menu_content o-mega-menu_content-1 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-1 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-1-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-1-wrapper ">
 
 
 
@@ -30,11 +30,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-1-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-1-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-1-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-1-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-1-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-1-list ">
 
 
             <ul>
@@ -44,11 +44,11 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item o-mega-menu_content-item__has-icon o-mega-menu_content-1-item__has-icon ">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item o-mega-menu__content-item--has-icon o-mega-menu__content-1-item__has-icon ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-1-link" href="/complaint/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-1-link" href="/complaint/">
 <div aria-level="2" role="heading">
-<span class="o-mega-menu_content-link-icon-pre o-mega-menu_content-1-link-icon-pre"><svg class="cf-icon-svg" viewBox="0 0 15 19" xmlns="http://www.w3.org/2000/svg"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-pre o-mega-menu__content-1-link-icon-pre"><svg class="cf-icon-svg" viewBox="0 0 15 19" xmlns="http://www.w3.org/2000/svg"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg></span>
 
 
         Submit a Complaint
@@ -65,9 +65,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
 <div aria-level="2" role="heading">
 
 
@@ -76,25 +76,25 @@ export default `
         Consumer Education
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
 
@@ -102,11 +102,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Consumer Education">
@@ -114,9 +114,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/">
 
 
 
@@ -134,9 +134,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/educator-tools/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/educator-tools/">
 
 
 
@@ -154,9 +154,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/coronavirus/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/coronavirus/">
 
 
 
@@ -174,9 +174,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-complaints/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-complaints/">
 
 
 
@@ -196,13 +196,13 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
 
             <div role="heading" aria-level="3" aria-label="Money Topics" class="h5
-                    o-mega-menu_group-heading
+                    o-mega-menu__group-heading
                     " id="money-topics-menu">
                  Money Topics
             </div>
@@ -212,9 +212,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/auto-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/auto-loans/">
 
 
 
@@ -232,9 +232,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/bank-accounts/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/bank-accounts/">
 
 
 
@@ -252,9 +252,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/credit-cards/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/credit-cards/">
 
 
 
@@ -272,9 +272,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/credit-reports-and-scores/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/credit-reports-and-scores/">
 
 
 
@@ -292,9 +292,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/debt-collection/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/debt-collection/">
 
 
 
@@ -312,9 +312,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/fraud/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/fraud/">
 
 
 
@@ -334,14 +334,14 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
 
             <div role="heading" aria-level="3" aria-label="Money Topics continued" class="h5
-                    o-mega-menu_group-heading
-                    o-mega-menu_group-heading__hidden" id="money-topics-continued-menu">
+                    o-mega-menu__group-heading
+                    o-mega-menu__group-heading__hidden" id="money-topics-continued-menu">
                  Money Topics
             </div>
 
@@ -350,9 +350,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/money-transfers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/money-transfers/">
 
 
 
@@ -370,9 +370,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/mortgages/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/mortgages/">
 
 
 
@@ -390,9 +390,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/payday-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/payday-loans/">
 
 
 
@@ -410,9 +410,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/prepaid-cards/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/prepaid-cards/">
 
 
 
@@ -430,9 +430,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/reverse-mortgages/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/reverse-mortgages/">
 
 
 
@@ -450,9 +450,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/student-loans/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/student-loans/">
 
 
 
@@ -477,21 +477,21 @@ export default `
 
 
 
-            <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
+            <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list
-                            o-mega-menu_content-list__featured o-mega-menu_content-2-list__featured ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list
+                            o-mega-menu__content-list__featured o-mega-menu__content-2-list__featured ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Featured
                     </div>
                     <ul aria-label="Featured">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/consumer-tools/">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/consumer-tools/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 17 19"><path d="m12.673 10.779.798 4.02c.221 1.11-.407 1.566-1.395 1.013L8.5 13.81l-3.576 2.002c-.988.553-1.616.097-1.395-1.013l.397-2.001.401-2.02-1.51-1.397-1.498-1.385c-.832-.769-.592-1.507.532-1.64l2.026-.24 2.044-.242 1.717-3.722c.474-1.028 1.25-1.028 1.724 0l1.717 3.722 2.044.242 2.026.24c1.124.133 1.364.871.533 1.64L14.184 9.38z"></path></svg>
-                                <span><span class="a-link_text">Explore guides to help you plan for big financial goals</span></span>
+                                <span><span class="a-link__text">Explore guides to help you plan for big financial goals</span></span>
                             </a>
                         </li>
 
@@ -500,47 +500,47 @@ export default `
 
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Additional Resources
                     </div>
                     <ul aria-label="Additional Resources">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/complaint/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 15 19"><path d="M14.032 5.286v7.276a1.112 1.112 0 0 1-1.108 1.108H8.75l-1.02 1.635a.273.273 0 0 1-.503 0l-1.02-1.635h-4.13a1.112 1.112 0 0 1-1.109-1.108V5.286a1.112 1.112 0 0 1 1.108-1.108h10.848a1.112 1.112 0 0 1 1.108 1.108zM8.206 11.34a.706.706 0 1 0-.706.705.706.706 0 0 0 .706-.705zm-1.26-1.83a.554.554 0 1 0 1.108 0V6.275a.554.554 0 1 0-1.108 0z"></path></svg>
-                                <span class="a-link_text">Submit a Complaint</span>
+                                <span class="a-link__text">Submit a Complaint</span>
                             </a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/your-story/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 16 19"><path d="M6.808 11.29a3.19 3.19 0 0 1 .097 1.464 3.236 3.236 0 0 1-.535 1.277 3.15 3.15 0 0 1-2.286 1.316 3.43 3.43 0 0 1-2.628-.836A3.905 3.905 0 0 1 .26 12.269a4.433 4.433 0 0 1-.052-.653 5.807 5.807 0 0 1 .027-.74 5.497 5.497 0 0 1 .33-1.388 5.684 5.684 0 0 1 1.498-2.193A6.744 6.744 0 0 1 4.41 5.923q.344-.118.699-.201a1.241 1.241 0 0 1 .606-.046.792.792 0 0 1-.066 1.548 5.624 5.624 0 0 0-1.356.458 4.567 4.567 0 0 0-1.988 1.812 3.05 3.05 0 0 1 .998-.367 3.092 3.092 0 0 1 3.248 1.552 3.057 3.057 0 0 1 .257.611zm8.941.435a3.053 3.053 0 0 1 .038.708 3.185 3.185 0 0 1-1.207 2.265 3.334 3.334 0 0 1-2.609.615 3.375 3.375 0 0 1-2.165-1.35 3.722 3.722 0 0 1-.55-1.085 4.446 4.446 0 0 1-.203-1.224 5.63 5.63 0 0 1 .567-2.656 5.76 5.76 0 0 1 1.598-1.967 6.88 6.88 0 0 1 2.357-1.21 4.863 4.863 0 0 1 .676-.162.792.792 0 0 1 .602 1.404 1.277 1.277 0 0 1-.542.201 5.487 5.487 0 0 0-1.278.47 4.536 4.536 0 0 0-1.885 1.76 3.051 3.051 0 0 1 1.242-.4 3.098 3.098 0 0 1 3.359 2.631z"></path></svg>
-                                <span class="a-link_text">Tell Your Story</span>
+                                <span class="a-link__text">Tell Your Story</span>
                             </a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="a-link o-mega-menu_content-link o-mega-menu_content-2-link a-link__icon" href="https://pueblo.gpo.gov/CFPBPubs/CFPBPubs.php">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="a-link o-mega-menu__content-link o-mega-menu__content-2-link a-link__icon" href="https://pueblo.gpo.gov/CFPBPubs/CFPBPubs.php">
 <svg class="cf-icon-svg" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg"><path d="M11.16 16.153a.477.477 0 0 1-.476.475H1.316a.477.477 0 0 1-.475-.475V3.046a.477.477 0 0 1 .475-.475h6.95l2.893 2.893zm-1.11-9.924H8.059a.575.575 0 0 1-.574-.574V3.679H1.95v11.84h8.102zM3.907 4.92a1.03 1.03 0 1 0 1.029 1.03 1.03 1.03 0 0 0-1.03-1.03zm4.958 3.253h-5.87v1.108h5.87zm0 2.354h-5.87v1.109h5.87zm0 2.354h-5.87v1.109h5.87z"></path></svg>
-<span class="a-link_text">Order free brochures</span>
+<span class="a-link__text">Order free brochures</span>
  <svg class="cf-icon-svg" viewBox="0 0 14 19" xmlns="http://www.w3.org/2000/svg"><path d="M13.017 3.622v4.6a.554.554 0 0 1-1.108 0V4.96L9.747 7.122a1.65 1.65 0 0 1 .13.646v5.57A1.664 1.664 0 0 1 8.215 15h-5.57a1.664 1.664 0 0 1-1.662-1.663v-5.57a1.664 1.664 0 0 1 1.662-1.662h5.57A1.654 1.654 0 0 1 9 6.302l2.126-2.126H7.863a.554.554 0 1 1 0-1.108h4.6a.554.554 0 0 1 .554.554zM8.77 8.1l-2.844 2.844a.554.554 0 0 1-.784-.783l2.947-2.948H2.645a.555.555 0 0 0-.554.555v5.57a.555.555 0 0 0 .554.553h5.57a.555.555 0 0 0 .554-.554z"></path></svg></a>
                         </li>
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
                             <a class="a-link
-                                      o-mega-menu_content-link o-mega-menu_content-2-link
+                                      o-mega-menu__content-link o-mega-menu__content-2-link
                                       " href="/ask-cfpb/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 11 19"><path d="M10.328 6.83a5.903 5.903 0 0 1-1.439 3.64 2.874 2.874 0 0 0-.584 1v1.037a.95.95 0 0 1-.95.95h-3.71a.95.95 0 0 1-.95-.95V11.47a2.876 2.876 0 0 0-.584-1A5.903 5.903 0 0 1 .67 6.83a4.83 4.83 0 0 1 9.28-1.878 4.796 4.796 0 0 1 .38 1.88zm-.95 0a3.878 3.878 0 0 0-7.756 0c0 2.363 2.023 3.409 2.023 4.64v1.037h3.71V11.47c0-1.231 2.023-2.277 2.023-4.64zM7.83 14.572a.475.475 0 0 1-.475.476h-3.71a.475.475 0 0 1 0-.95h3.71a.475.475 0 0 1 .475.474zm-.64 1.262a.238.238 0 0 1-.078.265 2.669 2.669 0 0 1-3.274 0 .237.237 0 0 1 .145-.425h2.983a.238.238 0 0 1 .225.16z"></path></svg>
-                                <span class="a-link_text">Browse Ask CFPB</span>
+                                <span class="a-link__text">Browse Ask CFPB</span>
                             </a>
                         </li>
 
@@ -563,9 +563,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/rules-policy/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/rules-policy/">
 <div aria-level="2" role="heading">
 
 
@@ -574,30 +574,30 @@ export default `
         Rules &amp; Policy
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/rules-policy/">
                 Rules &amp; Policy Overview
             </a>
@@ -608,11 +608,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -620,9 +620,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/final-rules/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/final-rules/">
 
 
 
@@ -640,9 +640,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/regulations/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/regulations/">
 
 
 
@@ -662,8 +662,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -671,9 +671,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/rules-under-development/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/rules-under-development/">
 
 
 
@@ -691,9 +691,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/notice-opportunities-comment/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/notice-opportunities-comment/">
 
 
 
@@ -711,9 +711,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/regulatory-agenda/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/regulatory-agenda/">
 
 
 
@@ -731,9 +731,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/petitions-rulemaking/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/petitions-rulemaking/">
 
 
 
@@ -753,8 +753,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Rules &amp; Policy">
@@ -762,9 +762,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/competition-innovation/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/competition-innovation/">
 
 
 
@@ -782,9 +782,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/rules-policy/advisory-committees/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/rules-policy/advisory-committees/">
 
 
 
@@ -821,9 +821,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/enforcement/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/enforcement/">
 <div aria-level="2" role="heading">
 
 
@@ -832,30 +832,30 @@ export default `
         Enforcement
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/enforcement/">
                 Enforcement Overview
             </a>
@@ -866,11 +866,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Enforcement">
@@ -878,9 +878,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/actions/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/actions/">
 
 
 
@@ -898,9 +898,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/enforcement-by-the-numbers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/enforcement-by-the-numbers/">
 
 
 
@@ -918,9 +918,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/petitions/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/petitions/">
 
 
 
@@ -940,8 +940,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Enforcement">
@@ -949,9 +949,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/warning-letters/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/warning-letters/">
 
 
 
@@ -969,9 +969,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/payments-harmed-consumers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/payments-harmed-consumers/">
 
 
 
@@ -989,9 +989,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/enforcement/information-industry-whistleblowers/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/enforcement/information-industry-whistleblowers/">
 
 
 
@@ -1028,9 +1028,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/compliance/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/compliance/">
 <div aria-level="2" role="heading">
 
 
@@ -1039,30 +1039,30 @@ export default `
         Compliance
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/compliance/">
                 Compliance Overview
             </a>
@@ -1073,11 +1073,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1085,9 +1085,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/compliance-resources/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/compliance-resources/">
 
 
 
@@ -1105,9 +1105,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/advisory-opinion-program/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/advisory-opinion-program/">
 
 
 
@@ -1125,9 +1125,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/circulars/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/circulars/">
 
 
 
@@ -1147,8 +1147,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1156,9 +1156,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervision-examinations/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervision-examinations/">
 
 
 
@@ -1176,9 +1176,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervisory-highlights/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervisory-highlights/">
 
 
 
@@ -1196,9 +1196,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/supervisory-guidance/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/supervisory-guidance/">
 
 
 
@@ -1218,8 +1218,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Compliance">
@@ -1227,9 +1227,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/registration-and-submission-programs/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/registration-and-submission-programs/">
 
 
 
@@ -1247,9 +1247,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/compliance/amicus/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/compliance/amicus/">
 
 
 
@@ -1286,9 +1286,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/data-research/">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="/data-research/">
 <div aria-level="2" role="heading">
 
 
@@ -1297,30 +1297,30 @@ export default `
         Data &amp; Research
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
-        <div class="o-mega-menu_content-overview o-mega-menu_content-2-overview
-                    o-mega-menu_content-overview-heading o-mega-menu_content-2-overview-heading ">
-            <a class="o-mega-menu_content-overview-link o-mega-menu_content-2-overview-link
+        <div class="o-mega-menu__content-overview o-mega-menu__content-2-overview
+                    o-mega-menu__content-overview-heading o-mega-menu__content-2-overview-heading ">
+            <a class="o-mega-menu__content-overview-link o-mega-menu__content-2-overview-link
                         " href="/data-research/">
                 Data &amp; Research Overview
             </a>
@@ -1331,11 +1331,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1343,9 +1343,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/research-reports/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/research-reports/">
 
 
 
@@ -1363,9 +1363,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/research-hub/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/research-hub/">
 
 
 
@@ -1383,9 +1383,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-complaints/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-complaints/">
 
 
 
@@ -1403,9 +1403,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/hmda/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/hmda/">
 
 
 
@@ -1425,8 +1425,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1434,9 +1434,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/public-data-inventory/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/public-data-inventory/">
 
 
 
@@ -1454,9 +1454,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/consumer-credit-trends/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/consumer-credit-trends/">
 
 
 
@@ -1474,9 +1474,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/mortgage-performance-trends/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/mortgage-performance-trends/">
 
 
 
@@ -1494,9 +1494,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/financial-well-being-survey-data/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/financial-well-being-survey-data/">
 
 
 
@@ -1516,8 +1516,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="Data &amp; Research">
@@ -1525,9 +1525,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/credit-card-data/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/credit-card-data/">
 
 
 
@@ -1545,9 +1545,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/prepaid-accounts/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/prepaid-accounts/">
 
 
 
@@ -1572,21 +1572,21 @@ export default `
 
 
 
-            <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
+            <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
 
 
-                <div class="o-mega-menu_content-list o-mega-menu_content-2-list
-                            o-mega-menu_content-list__featured o-mega-menu_content-2-list__featured ">
-                    <div role="heading" aria-level="3" class="h5 o-mega-menu_group-heading">
+                <div class="o-mega-menu__content-list o-mega-menu__content-2-list
+                            o-mega-menu__content-list__featured o-mega-menu__content-2-list__featured ">
+                    <div role="heading" aria-level="3" class="h5 o-mega-menu__group-heading">
                         Featured
                     </div>
                     <ul aria-label="Featured">
 
-                        <li class="o-mega-menu_content-item o-mega-menu_content-2-item
-                                    o-mega-menu_content-item__has-icon o-mega-menu_content-2-item__has-icon ">
-                            <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/data-research/financial-well-being-survey-data/">
+                        <li class="o-mega-menu__content-item o-mega-menu__content-2-item
+                                    o-mega-menu__content-item--has-icon o-mega-menu__content-2-item__has-icon ">
+                            <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/data-research/financial-well-being-survey-data/">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 17 19"><path d="m12.673 10.779.798 4.02c.221 1.11-.407 1.566-1.395 1.013L8.5 13.81l-3.576 2.002c-.988.553-1.616.097-1.395-1.013l.397-2.001.401-2.02-1.51-1.397-1.498-1.385c-.832-.769-.592-1.507.532-1.64l2.026-.24 2.044-.242 1.717-3.722c.474-1.028 1.25-1.028 1.724 0l1.717 3.722 2.044.242 2.026.24c1.124.133 1.364.871.533 1.64L14.184 9.38z"></path></svg>
-                                <span><span class="a-link_text">Help advance financial well-being</span></span>
+                                <span><span class="a-link__text">Help advance financial well-being</span></span>
                             </a>
                         </li>
 
@@ -1611,9 +1611,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-1-item " data-js-hook="behavior_flyout-menu">
+<li class="o-mega-menu__content-item o-mega-menu__content-1-item " data-js-hook="behavior_flyout-menu">
 
-    <a aria-haspopup="menu" class="o-mega-menu_content-link o-mega-menu_content-1-link o-mega-menu_content-link__has-children o-mega-menu_content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
+    <a aria-haspopup="menu" class="o-mega-menu__content-link o-mega-menu__content-1-link o-mega-menu__content-link__has-children o-mega-menu__content-1-link__has-children" data-js-hook="behavior_flyout-menu_trigger" href="#">
 <div aria-level="2" role="heading">
 
 
@@ -1622,25 +1622,25 @@ export default `
         News
 
 
-        <span class="o-mega-menu_content-link-icon-post o-mega-menu_content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-closed o-mega-menu_content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
-<span class="o-mega-menu_content-link-icon-open o-mega-menu_content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
+        <span class="o-mega-menu__content-link-icon-post o-mega-menu__content-1-link-icon-post"><svg class="cf-icon-svg" viewBox="0 0 10 19" xmlns="http://www.w3.org/2000/svg"><path d="M1.6 17.262a1.03 1.03 0 0 1-.728-1.757l6.073-6.073L.872 3.36a1.03 1.03 0 0 1 1.455-1.455l6.8 6.8a1.03 1.03 0 0 1 0 1.456l-6.8 6.8a1.025 1.025 0 0 1-.727.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-closed o-mega-menu__content-1-link-icon-closed"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 15.313a1.026 1.026 0 0 1-.728-.302l-6.8-6.8a1.03 1.03 0 0 1 1.455-1.456L8.5 12.828l6.073-6.073a1.03 1.03 0 0 1 1.455 1.456l-6.8 6.8a1.026 1.026 0 0 1-.728.302z"></path></svg></span>
+<span class="o-mega-menu__content-link-icon-open o-mega-menu__content-1-link-icon-open"><svg class="cf-icon-svg" viewBox="0 0 17 19" xmlns="http://www.w3.org/2000/svg"><path d="M15.3 15.32a1.026 1.026 0 0 1-.727-.302L8.5 8.946l-6.073 6.072a1.03 1.03 0 0 1-1.456-1.455l6.801-6.8a1.03 1.03 0 0 1 1.456 0l6.8 6.8a1.03 1.03 0 0 1-.727 1.757z"></path></svg></span>
 </div>
 </a>
 
 
 
-<div class="o-mega-menu_content o-mega-menu_content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
+<div class="o-mega-menu__content o-mega-menu__content-2 " aria-expanded="false" role="navigation" data-js-hook="behavior_flyout-menu_content">
 
 
 
-    <button class="o-mega-menu_content-alt-trigger o-mega-menu_content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
+    <button class="o-mega-menu__content-alt-trigger o-mega-menu__content-2-alt-trigger " data-js-hook="behavior_flyout-menu_trigger">
         <svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="0 0 10 19"><path d="M8.4 17.269a1.026 1.026 0 0 1-.727-.302l-6.801-6.8a1.03 1.03 0 0 1 0-1.456l6.8-6.8a1.03 1.03 0 0 1 1.456 1.455L3.055 9.439l6.073 6.073A1.03 1.03 0 0 1 8.4 17.27z"></path></svg>
         Back
     </button>
 
 
-    <div class="o-mega-menu_content-wrapper o-mega-menu_content-2-wrapper ">
+    <div class="o-mega-menu__content-wrapper o-mega-menu__content-2-wrapper ">
 
 
 
@@ -1648,11 +1648,11 @@ export default `
 
 
 
-        <div class="o-mega-menu_content-lists o-mega-menu_content-2-lists ">
+        <div class="o-mega-menu__content-lists o-mega-menu__content-2-lists ">
 
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="News">
@@ -1660,9 +1660,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=press-release">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=press-release">
 
 
 
@@ -1680,9 +1680,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=op-ed&amp;categories=speech">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=op-ed&amp;categories=speech">
 
 
 
@@ -1700,9 +1700,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=testimony">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=testimony">
 
 
 
@@ -1720,9 +1720,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=directors-statement">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=directors-statement">
 
 
 
@@ -1742,8 +1742,8 @@ export default `
         </div>
     </div>
 
-    <div class="o-mega-menu_content-list-group o-mega-menu_content-2-list-group ">
-        <div class="o-mega-menu_content-list o-mega-menu_content-2-list ">
+    <div class="o-mega-menu__content-list-group o-mega-menu__content-2-list-group ">
+        <div class="o-mega-menu__content-list o-mega-menu__content-2-list ">
 
 
             <ul aria-label="News">
@@ -1751,9 +1751,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/blog/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/blog/">
 
 
 
@@ -1771,9 +1771,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/blog/?categories=directors-notebook">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/blog/?categories=directors-notebook">
 
 
 
@@ -1791,9 +1791,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/activity-log/">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/activity-log/">
 
 
 
@@ -1811,9 +1811,9 @@ export default `
 
 
 
-<li class="o-mega-menu_content-item o-mega-menu_content-2-item ">
+<li class="o-mega-menu__content-item o-mega-menu__content-2-item ">
 
-    <a class="o-mega-menu_content-link o-mega-menu_content-2-link " href="/about-us/newsroom/?categories=consumer-advisories">
+    <a class="o-mega-menu__content-link o-mega-menu__content-2-link " href="/about-us/newsroom/?categories=consumer-advisories">
 
 
 
@@ -1869,54 +1869,54 @@ export default `
         <div class="wrapper
                     ">
 
-            <div class="m-global-eyebrow_actions">
+            <div class="m-global-eyebrow__actions">
                 <ul class="m-list
                            m-list__horizontal
-                           m-global-eyebrow_languages">
-                    <li class="m-list_item">
+                           m-global-eyebrow__languages">
+                    <li class="m-list__item">
 
                         <a href="/es/" hreflang="es" lang="es">
                             Español
                         </a>
 
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/zh/" hreflang="zh" lang="zh">
                             中文
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/vi/" hreflang="vi" lang="vi">
                             Tiếng Việt
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ko/" hreflang="ko" lang="ko">
                             한국어
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/tl/" hreflang="tl" lang="tl">
                             Tagalog
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ru/" hreflang="ru" lang="ru">
                             Pусский
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ar/" hreflang="ar" lang="ar">
                             العربية
                         </a>
                     </li>
-                    <li class="m-list_item">
+                    <li class="m-list__item">
                         <a href="/language/ht/" hreflang="ht" lang="ht">
                             Kreyòl Ayisyen
                         </a>
                     </li>
                 </ul>
-                <span class="m-global-eyebrow_phone">
+                <span class="m-global-eyebrow__phone">
                     <a href="tel:+1-855-411-2372">(855) 411-2372</a>
                 </span>
             </div>