diff --git a/app/components/diffs/overflow_warning_component.html.haml b/app/components/diffs/overflow_warning_component.html.haml
index 907d066e73def99bd88425c7b797e848e119a314..b184fa1d52754fedfc9f8ba6d654149cd95b8b93 100644
--- a/app/components/diffs/overflow_warning_component.html.haml
+++ b/app/components/diffs/overflow_warning_component.html.haml
@@ -1,9 +1,9 @@
 = render Pajamas::AlertComponent.new(title: _('Too many changes to show.'),
   variant: :warning,
-  alert_class: 'gl-mb-5') do
-  .gl-alert-body
+  alert_class: 'gl-mb-5') do |c|
+  = c.body do
     = message
 
-  .gl-alert-actions
+  = c.actions do
     = diff_link
     = patch_link
diff --git a/app/components/pajamas/alert_component.html.haml b/app/components/pajamas/alert_component.html.haml
index 92bf81a4f8d5607799de1fdead689de51f358f5e..782ac8b9ca2693daac2f08e2c70b2871f30c4b60 100644
--- a/app/components/pajamas/alert_component.html.haml
+++ b/app/components/pajamas/alert_component.html.haml
@@ -11,4 +11,9 @@
     - if @title
       %h4.gl-alert-title
         = @title
-    = content
+    - if body?
+      .gl-alert-body
+        = body
+    - if actions?
+      .gl-alert-actions
+        = actions
diff --git a/app/components/pajamas/alert_component.rb b/app/components/pajamas/alert_component.rb
index ef35ae195b08c5fa2d01bd7b81c23b152e16587f..c1b2132da29199961471b0a23297fc7ac4497467 100644
--- a/app/components/pajamas/alert_component.rb
+++ b/app/components/pajamas/alert_component.rb
@@ -36,6 +36,9 @@ def base_class
 
     delegate :sprite_icon, to: :helpers
 
+    renders_one :body
+    renders_one :actions
+
     ICONS = {
       info: 'information-o',
       warning: 'warning',
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index ec084c05cf7a6cb72f6a1fd8e657d08295fcdc66..55c25ca32d533fbeb372b1f0f7792d6aaeb7fd12 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -18,9 +18,9 @@
 - else
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    title: _('Service Ping payload not found in the application cache')) do
+    title: _('Service Ping payload not found in the application cache')) do |c|
 
-    .gl-alert-body
+    = c.body do
       - enable_service_ping_link_url = help_page_path('user/admin_area/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
       - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
       - generate_manually_link_url = help_page_path('administration/troubleshooting/gitlab_rails_cheat_sheet', anchor: 'generate-service-ping')
diff --git a/app/views/admin/dashboard/_security_newsletter_callout.html.haml b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
index 9b994b757f9e6095195c252e5c0faa3f71c32640..4b1303cc97c491d70672be8a231d81aabaacb8f3 100644
--- a/app/views/admin/dashboard/_security_newsletter_callout.html.haml
+++ b/app/views/admin/dashboard/_security_newsletter_callout.html.haml
@@ -6,9 +6,9 @@
     alert_data: { feature_id: Users::CalloutsHelper::SECURITY_NEWSLETTER_CALLOUT,
                   dismiss_endpoint: callouts_path,
                   defer_links: 'true' },
-    close_button_data: { testid: 'close-security-newsletter-callout' }) do
-  .gl-alert-body
+    close_button_data: { testid: 'close-security-newsletter-callout' }) do |c|
+  = c.body do
     = s_('AdminArea|Sign up for the GitLab Security Newsletter to get notified for security updates.')
-  .gl-alert-actions
+  = c.actions do
     = link_to 'https://about.gitlab.com/company/preference-center/', target: '_blank', rel: 'noreferrer noopener', class: 'deferred-link gl-alert-action btn-confirm btn-md gl-button' do
       = s_('AdminArea|Sign up for the GitLab newsletter')
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 8ac6f63cdfb8203a8754d8a49f8f2679e8ae39ea..944d7bfced00087ecd28b27566ed792fb8735ffa 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -27,8 +27,8 @@
   - if @group.new_record?
     .form-group.row
       .offset-sm-2.col-sm-10
-        = render Pajamas::AlertComponent.new(dismissible: false) do
-          .gl-alert-body
+        = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+          = c.body do
             = render 'shared/group_tips'
     .form-actions
       = f.submit _('Create group'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index be7055e6f7b60ff587eb58866617f206695a053f..16f6e71d79bbadb21d5a8a9a2eead353bc5bd4d7 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -16,8 +16,8 @@
     .col-md-12
       = render Pajamas::AlertComponent.new(variant: :danger,
         alert_class: 'gl-mb-5',
-        alert_data: { testid: 'last-repository-check-failed-alert' }) do
-        .gl-alert-body
+        alert_data: { testid: 'last-repository-check-failed-alert' }) do |c|
+        = c.body do
           - last_check_message = _("Last repository check (%{last_check_timestamp}) failed. See the 'repocheck.log' file for error messages.")
           - last_check_message = last_check_message % { last_check_timestamp: time_ago_with_tooltip(@project.last_repository_check_at) }
           = last_check_message.html_safe
diff --git a/app/views/admin/runners/edit.html.haml b/app/views/admin/runners/edit.html.haml
index 59e9c784e5f5084b7e490820136af817bfdd013a..dba18b2f608929ec9db809562e83fd213500b6b8 100644
--- a/app/views/admin/runners/edit.html.haml
+++ b/app/views/admin/runners/edit.html.haml
@@ -26,8 +26,8 @@
             %td
               = render Pajamas::AlertComponent.new(variant: :danger,
                 dismissible: false,
-                title: project.full_name) do
-                .gl-alert-actions
+                title: project.full_name) do |c|
+                = c.actions do
                   = link_to _('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-confirm btn-md gl-button'
 
   %table.table{ data: { testid: 'unassigned-projects' } }
diff --git a/app/views/admin/users/_users.html.haml b/app/views/admin/users/_users.html.haml
index 86391b980c0e4ac9dd042e6999c94bbe529b76ec..a7ed7b8c0521756976f5a90e90c391f5b4a7ba89 100644
--- a/app/views/admin/users/_users.html.haml
+++ b/app/views/admin/users/_users.html.haml
@@ -1,8 +1,8 @@
 - if registration_features_can_be_prompted?
   = render Pajamas::AlertComponent.new(variant: :tip,
     alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = render 'shared/registration_features_discovery_message', feature_title: s_('RegistrationFeatures|send emails to users')
 
 .top-area
diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index b7d1aa6f9441e26ee4fb7b1631a61e5ab50d4e4b..720e3ff08e250ac6444d52c3847bac2870b9eef9 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -7,13 +7,13 @@
   %span.gl-ml-2= s_('ClusterIntegration|Kubernetes cluster is being created...')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-api-unreachable') do |c|
+  = c.body do
     = s_('ClusterIntegration|Your cluster API is unreachable. Please ensure your API URL is correct.')
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do
-  .gl-alert-body
+  alert_class: 'hidden js-cluster-authentication-failure js-cluster-api-unreachable') do |c|
+  = c.body do
     = s_('ClusterIntegration|There was a problem authenticating with your cluster. Please ensure your CA Certificate and Token are valid.')
 
 .hidden.js-cluster-success.bs-callout.bs-callout-success{ role: 'alert' }
diff --git a/app/views/clusters/clusters/_deprecation_alert.html.haml b/app/views/clusters/clusters/_deprecation_alert.html.haml
index 202e2c14d3fe9e9238b5f6dafb8acbf899ce99f9..3a83efec29b574f1e0867ae0cf2d3612ec8e1abb 100644
--- a/app/views/clusters/clusters/_deprecation_alert.html.haml
+++ b/app/views/clusters/clusters/_deprecation_alert.html.haml
@@ -1,5 +1,5 @@
-= render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mt-6 gl-mb-3') do
-  .gl-alert-body
+= render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mt-6 gl-mb-3') do |c|
+  = c.body do
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
     - issue_link_start = link_start % { url: 'https://gitlab.com/gitlab-org/configure/general/-/issues/199' }
     - docs_link_start = link_start % { url: help_page_path('user/clusters/agent/index.md') }
diff --git a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index ffd910b1b9d06b5dd1ee68bdf752e34ec7bdc93c..b130e0c7214e1927603f37fb520bedbdec132ead 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -2,9 +2,9 @@
 
 = render Pajamas::AlertComponent.new(title: s_('ClusterIntegration|Did you know?'),
   alert_class: 'gcp-signup-offer',
-  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do
-  .gl-alert-body
+  alert_data: { feature_id: Users::CalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: callouts_path }) do |c|
+  = c.body do
     = s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
-  .gl-alert-actions
+  = c.actions do
     %a.gl-button.btn-confirm.text-decoration-none{ href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', rel: 'noopener noreferrer' }
       = s_("ClusterIntegration|Apply for credit")
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index 95b3ad26e996939872084a4cf1781e1bddf49daa..654ee70dbee7cc8d9f0cc2f156c27d602abdf654 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/app/views/groups/_import_group_from_another_instance_panel.html.haml
@@ -5,8 +5,8 @@
         = s_('GroupsNew|Import groups from another instance of GitLab')
       = link_to _('History'), history_import_bulk_imports_path, class: 'gl-link gl-ml-auto'
     = render Pajamas::AlertComponent.new(dismissible: false,
-      variant: :warning) do
-      .gl-alert-body
+      variant: :warning) do |c|
+      = c.body do
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - docs_link_end = '</a>'.html_safe
         = s_('GroupsNew|Not all related objects are migrated. %{docs_link_start}More info%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
diff --git a/app/views/groups/_import_group_from_file_panel.html.haml b/app/views/groups/_import_group_from_file_panel.html.haml
index ddd7481e0bd0badbabb07ddb93c9611d3c14de25..04170c30a2074905c55d038a9b9976e12134a6b3 100644
--- a/app/views/groups/_import_group_from_file_panel.html.haml
+++ b/app/views/groups/_import_group_from_file_panel.html.haml
@@ -7,8 +7,8 @@
     %h4
       = _('Import group from file')
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
         - link_end = '</a>'.html_safe
         = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: link_end }
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 62bc574231f209ccc6014fe33d44ade203803168..6cae416311e8b4b70b6d5ea9480abdb914aa3f86 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -3,8 +3,8 @@
 .sub-section
   %h4= s_('GroupSettings|Export group')
   %p= _('Export this group with all related data.')
-  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_class: 'gl-mb-4') do |c|
+    = c.body do
       - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index.md') }
       - docs_link_end = '</a>'.html_safe
       = s_('GroupsNew|This feature is deprecated and replaced by %{docs_link_start}group migration%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
@@ -12,8 +12,8 @@
     - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
     = export_information.html_safe
     = link_to _('Learn more.'), help_page_path('user/group/settings/import_export.md'), target: '_blank', rel: 'noopener noreferrer'
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+    = c.body do
       %p.gl-mb-0
         %p= _('The following items will be exported:')
         %ul
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index 66d6b516a86a64d2c2b6c5f8e5e0db9505920d49..e765638953ae459273fc90b3b8e224909c9d9689 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,8 +1,8 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.paid?
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5', alert_data: { testid: 'group-has-linked-subscription-alert' }) do |c|
+    = c.body do
       = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 
 .js-confirm-danger{ data: group_settings_confirm_modal_data(group, remove_form_id) }
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index f5d9d0e2587475a9c56caaf3eb25273ec9d3a338..e65c3cd13f6a26b551a6607b8bb9868b12bf4a7d 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -13,7 +13,7 @@
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group's current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
     - if group.paid?
-      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false, alert_class: 'gl-mb-5') do |c|
+        = c.body do
           = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
     .js-transfer-group-form{ data: initial_data }
diff --git a/app/views/import/shared/_errors.html.haml b/app/views/import/shared/_errors.html.haml
index aa6fcc445fdb2cce2f77dbf45877be7658002f9c..ae54d0544f3ef7384e0abe68f1444a93683e5e1a 100644
--- a/app/views/import/shared/_errors.html.haml
+++ b/app/views/import/shared/_errors.html.haml
@@ -1,7 +1,7 @@
 - if @errors.present?
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       - @errors.each do |error|
         = error
diff --git a/app/views/layouts/header/_registration_enabled_callout.html.haml b/app/views/layouts/header/_registration_enabled_callout.html.haml
index affee15c4d0407a9699d1556615d4843b8af086c..03e961bda8f743cf089ca307223ed024365dd752 100644
--- a/app/views/layouts/header/_registration_enabled_callout.html.haml
+++ b/app/views/layouts/header/_registration_enabled_callout.html.haml
@@ -5,10 +5,10 @@
   alert_class: 'js-registration-enabled-callout',
   alert_data: { feature_id: Users::CalloutsHelper::REGISTRATION_ENABLED_CALLOUT,
                 dismiss_endpoint: callouts_path },
-  close_button_data: { testid: 'close-registration-enabled-callout' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-registration-enabled-callout' }) do |c|
+  = c.body do
     = _('Only allow anyone to register for accounts on GitLab instances that you intend to be used by anyone. Allowing anyone to register makes GitLab instances more vulnerable.')
-  .gl-alert-actions
+  = c.actions do
     = link_to general_admin_application_settings_path(anchor: 'js-signup-settings'), class: 'btn gl-alert-action btn-confirm btn-md gl-button' do
       %span.gl-button-text
         = _('Turn off')
diff --git a/app/views/layouts/header/_storage_enforcement_banner.html.haml b/app/views/layouts/header/_storage_enforcement_banner.html.haml
index 92c02d6ecfd39a11c81e740a9addb034dc8a5378..6613130fdf3ae6afa57393fb1aaf49dec747ad7a 100644
--- a/app/views/layouts/header/_storage_enforcement_banner.html.haml
+++ b/app/views/layouts/header/_storage_enforcement_banner.html.haml
@@ -8,7 +8,7 @@
   alert_data: { feature_id: banner_info[:callouts_feature_name],
                 dismiss_endpoint: banner_info[:callouts_path],
                 group_id: namespace.id,
-                defer_links: "true" }) do
-  .gl-alert-body
+                defer_links: "true" }) do |c|
+  = c.body do
     = banner_info[:text]
     = banner_info[:learn_more_link]
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 8568e61aa330126c8968d4baa48dde1c3907c15b..bbbb8154c51deaaeef4eda19d2b106a5cad20b3c 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -3,15 +3,15 @@
 
 - if current_user.ldap_user?
   = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Profiles|Some options are unavailable for LDAP accounts')
 
 - if params[:two_factor_auth_enabled_successfully]
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-my-5',
-    close_button_class: 'js-close-2fa-enabled-success-alert') do
-    .gl-alert-body
+    close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+    = c.body do
       = html_escape(_('You have set up 2FA for your account! If you lose access to your 2FA device, you can use your recovery codes to access your account. Alternatively, if you upload an SSH key, you can %{anchorOpen}use that key to generate additional recovery codes%{anchorClose}.')) % { anchorOpen: '<a href="%{href}">'.html_safe % { href: help_page_path('user/profile/account/two_factor_authentication', anchor: 'generate-new-recovery-codes-using-ssh') }, anchorClose: '</a>'.html_safe }
 
 .row.gl-mt-3.js-search-settings-section
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 5d74bbe99716a213c6911f2e55a1d0fbadde210b..26c9b2f0ee1fb58a225f48a7bfb1270d9840074f 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -3,8 +3,8 @@
 
 %div
   - if @user.errors.any?
-    = render Pajamas::AlertComponent.new(variant: :danger) do
-      .gl-alert-body
+    = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+      = c.body do
         %ul
           - @user.errors.full_messages.each do |msg|
             %li= msg
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 3ae64643420dfc8bc69ee444c93fc1970e6a477a..b85b7841d55163d96e630af8a8c378dcecdad818 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -42,8 +42,8 @@
           - if @error
             = render Pajamas::AlertComponent.new(title: @error[:message],
               variant: :danger,
-              dismissible: false) do
-              .gl-alert-body
+              dismissible: false) do |c|
+              = c.body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 
           .form-group
diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index f9d8a2d29894ddeaf97393a38adf5d307d28a757..85a7b9eb22b1cd0478b7a3e69c4d29fd1db40b2a 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -3,7 +3,7 @@
 
 = render Pajamas::AlertComponent.new(variant: :warning,
   dismissible: false,
-  alert_class: 'project-deletion-failed-message') do
-  .gl-alert-body
+  alert_class: 'project-deletion-failed-message') do |c|
+  = c.body do
     This project was scheduled for deletion, but failed with the following message:
     = project.delete_error
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 66857dadb65eae6d8c3ad071693ccc6b985b223a..5a2add9de1e558a9707b0e7379f13b9eaa30becc 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -2,8 +2,8 @@
 - if event && show_last_push_widget?(event)
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_class: 'gl-mt-3',
-    close_button_class: 'js-close-banner') do
-    .gl-alert-body
+    close_button_class: 'js-close-banner') do |c|
+    = c.body do
       %span= s_("LastPushEvent|You pushed to")
       %strong.gl-display-inline-flex.gl-max-w-50p{ data: { toggle: 'tooltip' }, title: event.ref_name }
         = link_to event.ref_name, project_commits_path(event.project, event.ref_name), class: 'ref-name gl-text-truncate'
@@ -15,6 +15,6 @@
       #{time_ago_with_tooltip(event.created_at)}
 
     - if can?(current_user, :create_merge_request_in, event.project.default_merge_request_target)
-      .gl-alert-actions
+      = c.actions do
         = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn gl-button btn-confirm qa-create-merge-request" do
           #{ _('Create merge request') }
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index e79825bdfc4de064761d19fabb67f69ffd458294..66fa1a69ef951f64ebd5551c5fe08b5d53072e35 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -39,8 +39,8 @@
     = project_tip.html_safe
 = render Pajamas::AlertComponent.new(alert_class: "gl-mb-4 gl-display-none js-user-readme-repo",
   dismissible: false,
-  variant: :success) do
-  .gl-alert-body
+  variant: :success) do |c|
+  = c.body do
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/profile/index', anchor: 'add-details-to-your-profile-with-a-readme') }
     = html_escape(_('%{project_path} is a project that you can use to add a README to your GitLab profile. Create a public project and initialize the repository with a README to get started. %{help_link_start}Learn more.%{help_link_end}')) % { project_path: "<strong>#{current_user.username} / #{current_user.username}</strong>".html_safe, help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
 
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index aefa4a41ab5b2322d701b94c00015e6b3798a771..f80601ef22153bda044fcc269ab25ac4f9b9a0d6 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -6,12 +6,13 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5 gl-mt-5',
     variant: :danger,
-    dismissible: false) do
+    dismissible: false) do |c|
     - blob_url = project_blob_path(@project, @id)
     - external_link_icon = content_tag 'span', { aria: { label: _('Opens new window') }} do
       - sprite_icon('external-link', css_class: 'gl-icon').html_safe
     - blob_link_start = '<a href="%{url}" class="gl-link" target="_blank" rel="noopener noreferrer">'.html_safe % { url: blob_url }
-    = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
+    = c.body do
+      = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start, link_end: '</a>'.html_safe , icon: external_link_icon }
 
 
 %h3.page-title.blob-edit-page-title
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 07bae7819a4089418a09d0e145617243e814b20b..c06f60bd05d315ca8ec4a7cd32cf50eda03ed37f 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,8 +2,8 @@
 - default_ref = params[:ref] || @project.default_branch
 
 - if @error
-  = render Pajamas::AlertComponent.new(variant: :danger) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
       = @error
 %h3.page-title
   = _('New Branch')
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 82d3bfbcfe6dbf1336331a99db95340c05c615c4..f887a4c744ea247cc38261efc040f558b816577b 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -36,8 +36,8 @@
 - if hidden > 0
   %li
     = render Pajamas::AlertComponent.new(variant: :warning,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)
 
 - if can_update_merge_request && context_commits&.empty?
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 9b64f158a1bc7d831745ebb99fe374e82deb0ee4..13fd4cee0ccd03c5d77c55adb0265ce0e14dac36 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -3,8 +3,8 @@
   = render Pajamas::AlertComponent.new(title: _('Fork Error!'),
     variant: :danger,
     alert_class: 'gl-mt-5',
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       %p
         = _("You tried to fork %{link_to_the_project} but it failed for the following reason:").html_safe % { link_to_the_project: link_to_project(@project) }
 
@@ -17,5 +17,5 @@
           - else
             = error
 
-      .gl-alert-actions
-        = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
+    = c.actions do
+      = link_to _('Try to fork again'), new_project_fork_path(@project), title: _("Fork"), class: "btn gl-alert-action btn-info btn-md gl-button"
diff --git a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
index f28b951ad62ff4293050df48ea93bcf10e4a0ba0..291edf014c3510e4a495405d4abd5479d7ef572f 100644
--- a/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
+++ b/app/views/projects/issues/_alert_moved_from_service_desk.html.haml
@@ -3,6 +3,6 @@
 - service_desk_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: service_desk_link_url }
 
 = render Pajamas::AlertComponent.new(variant: :warning,
-  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do
-  .gl-alert-body.gl-mr-3
+  alert_class: 'hide js-alert-moved-from-service-desk-warning gl-mt-5') do |c|
+  = c.body do
     = s_('This project does not have %{service_desk_link_start}Service Desk%{service_desk_link_end} enabled, so the user who created the issue will no longer receive email notifications about new activity.').html_safe % { service_desk_link_start: service_desk_link_start, service_desk_link_end: '</a>'.html_safe }
diff --git a/app/views/projects/mattermosts/new.html.haml b/app/views/projects/mattermosts/new.html.haml
index b01dabbbadfb7e2b22b82269f39cc683981d025d..8254198bd412a7c6c67aceeec3284212eef80338 100644
--- a/app/views/projects/mattermosts/new.html.haml
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -5,8 +5,8 @@
 - @content_class = 'limit-container-width' unless fluid_layout
 
 - if @teams_error_message
-  = render Pajamas::AlertComponent.new(variant: :danger) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger) do |c|
+    = c.body do
       = @teams_error_message
 
 %h3
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index b40fef0e892e6968a0d6d4427301d31657cf7b82..488c49736e62abd30c2642feb0a06e53899dae05 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -8,8 +8,8 @@
   - if @merge_request.closed_or_merged_without_fork?
     = render Pajamas::AlertComponent.new(alert_class: 'gl-mb-5',
       variant: :danger,
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = _('The source project of this merge request has been removed.')
 
   .detail-page-header.border-bottom-0.pt-0.pb-0
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index ce5a042fbf8e8cc9610b4efde708a65fd4c982e1..4596fcd280db1b05980f85b2a32eacad39d9ba1e 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -10,8 +10,8 @@
   = render "projects/merge_requests/mr_box"
 
   = render Pajamas::AlertComponent.new(variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       - if @merge_request.for_fork? && !@merge_request.source_project
         = err_fork_project_removed
       - elsif !@merge_request.source_branch_exists?
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index 13aa8f56d2002b1fcdfdbd9f4e5c76f7fad6a016..4ec721762024591f4ffa9cb9868c82779ff206e3 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -14,8 +14,8 @@
 - if can?(current_user, :read_issue, @project) && @milestone.total_issues_count == 0
   = render Pajamas::AlertComponent.new(dismissible: false,
     alert_data: { testid: 'no-issues-alert' },
-    alert_class: 'gl-mt-3 gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mt-3 gl-mb-5') do |c|
+    = c.body do
       = _('Assign some issues to this milestone.')
 - else
   = render 'shared/milestones/milestone_complete_alert', milestone: @milestone do
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index bc8400a63f9791abed76d1277c841c63d8201c8d..d689b54678ee3aa4b9fea5c1639fa2b4d1966bac 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -37,8 +37,8 @@
           .panel-footer
             = f.submit _('Mirror repository'), class: 'gl-button btn btn-confirm js-mirror-submit qa-mirror-repository-button', name: :update_remote_mirror
     - else
-      = render Pajamas::AlertComponent.new(dismissible: false) do
-        .gl-alert-body
+      = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+        = c.body do
           = _('Mirror settings are only available to GitLab administrators.')
 
     .panel.panel-default
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
index d3e2854ff1940fe80f18bea317cd6f2a8045ab43..9d9603b09476aebcd58305b5a09fa3dd595976b3 100644
--- a/app/views/projects/pages_domains/_form.html.haml
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -1,7 +1,8 @@
 - if domain_presenter.errors.any?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
-    - domain_presenter.errors.full_messages.each do |msg|
-      = msg
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.body do
+      - domain_presenter.errors.full_messages.each do |msg|
+        = msg
 
 .form-group.border-section
   .row
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index d1d9a220068c78cb38a70047e30f2cdb29fb04a6..0d9cb7290aca9249fbe1b94ba96d24d711e97ed8 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -7,8 +7,8 @@
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
   = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
 %h2.gl-mb-4
diff --git a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
index fdd4dfba6164707e8264514a56de15577dd44fa3..d69f54608e92afb4033cd9d15ff4c421832086de 100644
--- a/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
+++ b/app/views/shared/_auto_devops_implicitly_enabled_banner.html.haml
@@ -1,12 +1,12 @@
 - if show_auto_devops_implicitly_enabled_banner?(project, current_user)
   = render Pajamas::AlertComponent.new(alert_class: 'qa-auto-devops-banner auto-devops-implicitly-enabled-banner',
     close_button_class: 'hide-auto-devops-implicitly-enabled-banner',
-    close_button_data: { project_id: project.id }) do
-    .gl-alert-body
+    close_button_data: { project_id: project.id }) do |c|
+    = c.body do
       = s_("AutoDevOps|The Auto DevOps pipeline has been enabled and will be used if no alternative CI configuration file is found.")
       - unless Gitlab.config.registry.enabled
         %div
           = _('Container registry is not enabled on this GitLab instance. Ask an administrator to enable it in order for Auto DevOps to work.')
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Settings'), project_settings_ci_cd_path(project), class: 'alert-link btn gl-button btn-confirm'
       = link_to _('More information'), help_page_path('topics/autodevops/index.md'), target: '_blank', class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 0e0b1ea699321875cca02d9319f1b87b40c793a3..7248403d6c9bb313cd4c732038dcc6035f678ab0 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -24,8 +24,8 @@
     = render Pajamas::AlertComponent.new(variant: :danger,
       alert_class: 'gl-mt-3 js-import-url-error hide',
       dismissible: false,
-      close_button_class: 'js-close-2fa-enabled-success-alert') do
-      .gl-alert-body
+      close_button_class: 'js-close-2fa-enabled-success-alert') do |c|
+      = c.body do
         = s_('Import|There is not a valid Git repository at this URL. If your HTTP repository is not publicly accessible, verify your credentials.')
   = render_if_exists 'shared/ee/import_form', f: f, ci_cd_only: ci_cd_only
   .row
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index 195bd15f840f3b6b4f9968ebe21440e4d95f4d7d..91cd91ec38b4237318710fb3832628bcad4ff741 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,9 +1,9 @@
 - if show_no_password_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-password-message',
-    close_button_class: 'js-hide-no-password-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-password-message') do |c|
+    = c.body do
       = no_password_message
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action btn btn-confirm btn-md gl-button'
       = link_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index d30679b43057ff8dd946867dc757f9c80757132a..c4d8cb092dc2e8299a1108eaeb1fbf84d7c87be3 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,9 +1,9 @@
 - if show_no_ssh_key_message?
   = render Pajamas::AlertComponent.new(variant: :warning,
     alert_class: 'js-no-ssh-message',
-    close_button_class: 'js-hide-no-ssh-message') do
-    .gl-alert-body
+    close_button_class: 'js-hide-no-ssh-message') do |c|
+    = c.body do
       = s_("MissingSSHKeyWarningLink|You can't push or pull repositories using SSH until you add an SSH key to your profile.")
-    .gl-alert-actions
+    = c.actions do
       = link_to s_('MissingSSHKeyWarningLink|Add SSH key'), profile_keys_path, class: "gl-alert-action btn btn-confirm btn-md gl-button"
       = link_to s_("MissingSSHKeyWarningLink|Don't show again"), profile_path(user: { hide_no_ssh_key: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index 76fb34985c001ccdea2254db847b7fb6f8907540..0af378cb883d65cf51597d5e217c7947dd3fd924 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,6 +1,6 @@
 - if outdated_browser?
-  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(variant: :danger, dismissible: false) do |c|
+    = c.body do
       = s_('OutdatedBrowser|GitLab may not work properly, because you are using an outdated web browser.')
       %br
       - browser_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('install/requirements', anchor: 'supported-web-browsers') }
diff --git a/app/views/shared/_project_limit.html.haml b/app/views/shared/_project_limit.html.haml
index 7e1874f3416d87931d2624f270d600caf526b162..b630c829c7651bb98879cf8bdb07130a85831741 100644
--- a/app/views/shared/_project_limit.html.haml
+++ b/app/views/shared/_project_limit.html.haml
@@ -1,9 +1,9 @@
 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
   = render Pajamas::AlertComponent.new(variant: :warning,
     dismissible: false,
-    alert_class: 'project-limit-message') do
-    .gl-alert-body
+    alert_class: 'project-limit-message') do |c|
+    = c.body do
       = _("You won't be able to create new projects because you have reached your project limit.")
-    .gl-alert-actions
+    = c.actions do
       = link_to _('Remind later'), '#', class: 'alert-link hide-project-limit-message btn gl-button btn-confirm'
       = link_to _("Don't show again"), profile_path(user: {hide_project_limit: true}), method: :put, class: 'alert-link btn gl-button btn-default gl-ml-3'
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index 96f015c7a4bdcf2281cb5f6523e75eda59f5ae8e..8de7552c39ae5ec9db1d5333e51fc217b273777d 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,10 +1,10 @@
 - if session[:ask_for_usage_stats_consent]
-  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do
-    .gl-alert-body
+  = render Pajamas::AlertComponent.new(alert_class: 'service-ping-consent-message') do |c|
+    = c.body do
       - docs_link = link_to _('collect usage information'), help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
       - settings_link = link_to _('your settings'), metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'
       = s_('To help improve GitLab, we would like to periodically %{docs_link}. This can be changed at any time in %{settings_link}.').html_safe % { docs_link: docs_link, settings_link: settings_link }
-    .gl-alert-actions.gl-mt-3
+    = c.actions do
       - send_service_data_path = admin_application_settings_path(application_setting: { version_check_enabled: 1, usage_ping_enabled: 1 })
       - not_now_path = admin_application_settings_path(application_setting: { version_check_enabled: 0, usage_ping_enabled: 0 })
       = link_to _("Send service data"), send_service_data_path, 'data-url' => admin_application_settings_path, method: :put, 'data-check-enabled': true, 'data-service-ping-enabled': true, class: 'js-service-ping-consent-action alert-link btn gl-button btn-info'
diff --git a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
index 2294c44d49f488625e559e07152cebc44b43a2df..0899756d088bf2d9d3744f741a772a43d4973faa 100644
--- a/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
+++ b/app/views/shared/_two_factor_auth_recovery_settings_check.html.haml
@@ -3,10 +3,10 @@
   alert_data: { feature_id: Users::CalloutsHelper::TWO_FACTOR_AUTH_RECOVERY_SETTINGS_CHECK,
                 dismiss_endpoint: callouts_path,
                 defer_links: 'true' },
-  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-account-recovery-regular-check-callout' }) do |c|
+  = c.body do
     = s_('Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place.')
     = link_to _('Learn more.'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'recovery-codes'), target: '_blank', rel: 'noopener noreferrer'
-  .gl-alert-actions
+  = c.actions do
     = link_to profile_two_factor_auth_path, class: 'deferred-link btn gl-alert-action btn-confirm btn-md gl-button' do
       = s_('Profiles|Manage two-factor authentication')
diff --git a/app/views/shared/errors/_gitaly_unavailable.html.haml b/app/views/shared/errors/_gitaly_unavailable.html.haml
index e99c41f2496f8f6b4983cf10dcc61dab77d7942d..c9d7920b9c27d3ec0008cee2a99aaa9af05327f0 100644
--- a/app/views/shared/errors/_gitaly_unavailable.html.haml
+++ b/app/views/shared/errors/_gitaly_unavailable.html.haml
@@ -1,6 +1,6 @@
 = render Pajamas::AlertComponent.new(alert_class: 'gl-my-5',
   variant: :danger,
   dismissible: false,
-  title: reason) do
-  .gl-alert-body
+  title: reason) do |c|
+  = c.body do
     = s_('The git server, Gitaly, is not available at this time. Please contact your administrator.')
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index ce04e24b09f0fb3c39b37227d7c51d60893590a6..932971402a21fe490d1ba1b6ecac93faa89ce34b 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -12,8 +12,8 @@
 - if hook_log.internal_error_message.present?
   = render Pajamas::AlertComponent.new(title: _('Internal error occurred while delivering this webhook.'),
     variant: :danger,
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = _('Error: %{error}') % { error: hook_log.internal_error_message }
 
 %h4= _('Response')
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index e0d5f738273436129aa88bd67e0e3332babf5c26..62e1a930ee6838169ce70634bb3dd30e248cac3d 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -8,8 +8,8 @@
 - if @conflict
   = render Pajamas::AlertComponent.new(variant: :danger,
     dismissible: false,
-    alert_class: 'gl-mb-5') do
-    .gl-alert-body
+    alert_class: 'gl-mb-5') do |c|
+    = c.body do
       Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
       Please check out
       = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project, issuable]), target: "_blank", rel: 'noopener noreferrer'
diff --git a/app/views/shared/milestones/_milestone_complete_alert.html.haml b/app/views/shared/milestones/_milestone_complete_alert.html.haml
index 4685a93a343dd0811b57fda71ea110b8b7a19c8b..86f9193cc7a99daf40652b6a54dc0246fe0221b9 100644
--- a/app/views/shared/milestones/_milestone_complete_alert.html.haml
+++ b/app/views/shared/milestones/_milestone_complete_alert.html.haml
@@ -3,6 +3,6 @@
 - if milestone.complete? && milestone.active?
   = render Pajamas::AlertComponent.new(variant: :success,
     alert_data: { testid: 'all-issues-closed-alert' },
-    dismissible: false) do
-    .gl-alert-body
-    = yield
+    dismissible: false) do |c|
+    = c.body do
+      = yield
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
index 365cee5fadc235beb64cfc1f9d552dd364a67574..4bf02b71109b90919a7d94bb61f6d717408ecc7e 100644
--- a/app/views/shared/runners/_runner_type_alert.html.haml
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -3,14 +3,14 @@
 - if runner.group_type?
   = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is available to all projects and subgroups in a group.'),
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
 - else
   = render Pajamas::AlertComponent.new(alert_class: alert_class,
     title: s_('Runners|This runner is associated with specific projects.'),
-    dismissible: false) do
-    .gl-alert-body
+    dismissible: false) do |c|
+    = c.body do
       = s_('Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.')
       = link_to _('Learn more.'), help_page_path('ci/runners/runners_scope', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/web_hooks/_hook_errors.html.haml b/app/views/shared/web_hooks/_hook_errors.html.haml
index a100a620ceabfd6cce6e02393aaeff4ff30ab157..d95efe83e15dc39d24c8138b1e5d0d742aecf8d9 100644
--- a/app/views/shared/web_hooks/_hook_errors.html.haml
+++ b/app/views/shared/web_hooks/_hook_errors.html.haml
@@ -11,13 +11,13 @@
     support_link_start: link_start % { url: support_path },
     support_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook was automatically disabled'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.body do
       = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
 - elsif hook.permanently_disabled?
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook failed to connect'),
-    variant: :danger) do
-    .gl-alert-body
+    variant: :danger) do |c|
+    = c.body do
       = s_('Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % { strong_start: strong_start, strong_end: strong_end }
 - elsif hook.temporarily_disabled?
   - help_path = help_page_path('user/project/integrations/webhooks', anchor: 'webhook-fails-or-multiple-webhook-requests-are-triggered')
@@ -27,6 +27,6 @@
     help_link_start: link_start % { url: help_path },
     help_link_end: link_end }
   = render Pajamas::AlertComponent.new(title: s_('Webhooks|Webhook fails to connect'),
-    variant: :warning) do
-    .gl-alert-body
+    variant: :warning) do |c|
+    = c.body do
       = s_('Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % placeholders
diff --git a/ee/app/views/admin/application_settings/_elasticsearch_form.html.haml b/ee/app/views/admin/application_settings/_elasticsearch_form.html.haml
index bdbad2124fd2bf8384e9b59f8acf6c8ab8d08717..e0e5c21035f89b1230f8c6f85875fa69fe75d0fe 100644
--- a/ee/app/views/admin/application_settings/_elasticsearch_form.html.haml
+++ b/ee/app/views/admin/application_settings/_elasticsearch_form.html.haml
@@ -23,11 +23,11 @@
             - if halted_migrations
               = render Pajamas::AlertComponent.new(variant: :warning,
                 title: _('Elasticsearch migration halted'),
-                alert_class: 'gl-my-3') do
-                .gl-alert-body
+                alert_class: 'gl-my-3') do |c|
+                = c.body do
                   = html_escape_once(_('Check the %{code_open}elasticsearch.log%{code_close} file to debug why the migration halted and make any changes before retrying the migration. When you fix the cause of the failure, select %{strong_open}Retry migration%{strong_close}, and the migration is scheduled to retry in the background.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe, code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
                   = link_to _('Learn more.'), help_page_path('integration/elasticsearch', anchor: 'advanced-search-migrations')
-                .gl-alert-actions
+                = c.actions do
                   - migration = Elastic::DataMigrationService.halted_migration
                   = link_to _('Retry migration'), admin_elasticsearch_retry_migration_path(version: migration.version), class: 'btn gl-alert-action btn-warning gl-button', disabled: @last_elasticsearch_reindexing_task&.in_progress?, data: { confirm: _('Are you sure you want to retry this migration?') }, method: :post
 
diff --git a/ee/app/views/admin/application_settings/advanced_search.html.haml b/ee/app/views/admin/application_settings/advanced_search.html.haml
index fe536bef8233f25c9543354ee4fb860b6f2ad092..4afc043b1a28bc45927b0eda59e772a863686dfd 100644
--- a/ee/app/views/admin/application_settings/advanced_search.html.haml
+++ b/ee/app/views/admin/application_settings/advanced_search.html.haml
@@ -13,8 +13,8 @@
     %div{ class: [container_class, @content_class, 'gl-pt-5!'] }
       = render Pajamas::AlertComponent.new(title: s_('AdvancedSearch|Reindex required'),
         dismissible: false,
-        variant: :warning) do
-        .gl-alert-body
+        variant: :warning) do |c|
+        = c.body do
           = s_('Introduced in GitLab 13.1, before using %{reindexing_link_start}zero-downtime reindexing%{link_end} and %{migrations_link_start}Advanced Search migrations%{link_end}, you need to %{recreate_link_start}recreate your index%{link_end}.').html_safe % { reindexing_link_start: help_zero_downtime_reindexing_link_start, migrations_link_start: help_advanced_search_migrations_link_start, recreate_link_start: help_recreate_index_link_start, link_end: '</a>'.html_safe }
 
 = render_if_exists 'admin/application_settings/elasticsearch_form'
diff --git a/ee/app/views/groups/saml_providers/_response_debug.html.haml b/ee/app/views/groups/saml_providers/_response_debug.html.haml
index add800df5a0bbaa92fa591d803bb825751927574..bf47cbbbce9181dec1124f9912f1bbc15621bad7 100644
--- a/ee/app/views/groups/saml_providers/_response_debug.html.haml
+++ b/ee/app/views/groups/saml_providers/_response_debug.html.haml
@@ -1,7 +1,7 @@
 = bootstrap_form_for @saml_response_check.tap(&:valid?), url: '#', html: { class: 'gl-show-field-errors' } do |f|
   - if f.object.valid?
-    = render Pajamas::AlertComponent.new(variant: :success) do
-      .gl-alert-body
+    = render Pajamas::AlertComponent.new(variant: :success) do |c|
+      = c.body do
         = s_('GroupSAML|Valid SAML Response')
   = f.errors_on :xml_response, hide_attribute_name: true
   = f.text_field :name_id, disabled: true, label: s_('GroupSAML|NameID'), label_class: 'label-bold', input_group_class: 'gl-field-error-anchor'
diff --git a/ee/app/views/groups/usage_quotas/_product_purchase_success_alert.html.haml b/ee/app/views/groups/usage_quotas/_product_purchase_success_alert.html.haml
index 81e4f53835c57c88d53bade225696fc036bdb0de..8a7c735877ce384fb5d0e428cc1988b1a27876b3 100644
--- a/ee/app/views/groups/usage_quotas/_product_purchase_success_alert.html.haml
+++ b/ee/app/views/groups/usage_quotas/_product_purchase_success_alert.html.haml
@@ -1,5 +1,5 @@
 = render Pajamas::AlertComponent.new(title: _('Thanks for your purchase!'),
   variant: :success,
-  close_button_data: { testid: 'close-product-purchase-success' }) do
-  .gl-alert-body
+  close_button_data: { testid: 'close-product-purchase-success' }) do |c|
+  = c.body do
     = _('You have successfully purchased %{product}. You\'ll receive a receipt by email. Your purchase may take a minute to sync, so refresh the page if you don\'t see it yet.') % { product: product_name }
diff --git a/ee/app/views/layouts/header/_ee_subscribable_banner.html.haml b/ee/app/views/layouts/header/_ee_subscribable_banner.html.haml
index d2b656a0cd4d483b40e440008e817167fec3db20..ad119e7ae9ed47a68dd6698b603b3ad97a3f224b 100644
--- a/ee/app/views/layouts/header/_ee_subscribable_banner.html.haml
+++ b/ee/app/views/layouts/header/_ee_subscribable_banner.html.haml
@@ -5,8 +5,8 @@
   .js-gitlab-ee-license-banner.hidden{ class: [container_class, @content_class, 'gl-pt-5!'] }
     = render Pajamas::AlertComponent.new(variant: :danger,
       title: message,
-      alert_data: { license_expiry: subscribable.expires_at, defer_links: "true" }) do
-      .gl-alert-body
+      alert_data: { license_expiry: subscribable.expires_at, defer_links: "true" }) do |c|
+      = c.body do
         - if subscribable.block_changes?
           = link_to_button_style(path: renew_subscription_path, track_property: 'renew')
         - elsif subscribable.expired?
diff --git a/ee/app/views/layouts/header/_seats_count_alert.html.haml b/ee/app/views/layouts/header/_seats_count_alert.html.haml
index 01617e1819a4108b45e6bbd8d013df839372b5de..db4cb0fbb33500d504550273f8a9d9e4f0d5e198 100644
--- a/ee/app/views/layouts/header/_seats_count_alert.html.haml
+++ b/ee/app/views/layouts/header/_seats_count_alert.html.haml
@@ -5,9 +5,9 @@
                   feature_id: Users::GroupCalloutsHelper::APPROACHING_SEAT_COUNT_THRESHOLD,
                   group_id: root_namespace.id },
     title: _('%{group_name} is approaching the limit of available seats') % { group_name: group_name },
-    close_button_data: { testid: 'approaching-seats-count-threshold-alert-dismiss' }) do
-    .gl-alert-body
+    close_button_data: { testid: 'approaching-seats-count-threshold-alert-dismiss' }) do |c|
+    = c.body do
       = _('Your subscription has %{remaining_seats_count} out of %{total_seats_count} seats remaining. Even if you reach the number of seats in your subscription, you can continue to add users, and GitLab will bill you for the overage.') % { remaining_seats_count: remaining_seats_count, total_seats_count: total_seats_count }
       = learn_more_link
-    .gl-alert-actions
+    = c.actions do
       = seats_usage_link
diff --git a/ee/app/views/projects/services/gitlab_slack_application/_top.html.haml b/ee/app/views/projects/services/gitlab_slack_application/_top.html.haml
index 72d24881c3aa1c95957ea7a8199f85bcb9c8ced8..947be9b9ed3977eba806f98ebf9223e9249ef57e 100644
--- a/ee/app/views/projects/services/gitlab_slack_application/_top.html.haml
+++ b/ee/app/views/projects/services/gitlab_slack_application/_top.html.haml
@@ -1,5 +1,5 @@
 - if session.delete(:slack_install_success)
   = render Pajamas::AlertComponent.new(title: s_('SlackIntegration|GitLab for Slack was successfully installed.'),
-    variant: :success) do
-    .gl-alert-body
+    variant: :success) do |c|
+    = c.body do
       = s_('SlackIntegration|You can now close this window and go to your Slack workspace.')
diff --git a/ee/app/views/shared/_manual_quarterly_reconciliation_banner.html.haml b/ee/app/views/shared/_manual_quarterly_reconciliation_banner.html.haml
index 44644d8266e2ebfedf0aebdbecd73d2f953f1519..12371357343f78a7b12a466baaefb4fc5d78af9e 100644
--- a/ee/app/views/shared/_manual_quarterly_reconciliation_banner.html.haml
+++ b/ee/app/views/shared/_manual_quarterly_reconciliation_banner.html.haml
@@ -7,9 +7,9 @@
       variant: payload.display_error_version? ? :danger : :warning,
       alert_class: 'gl-my-5',
       alert_data: { testid: 'manual-quarterly-co-term-banner' },
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = payload.body
-      .gl-alert-actions
+      = c.actions do
         = link_to s_('SubscriptionBanner|Export license usage file'), admin_license_usage_export_path(format: :csv), class: 'btn gl-alert-action gl-button btn-confirm'
         = link_to s_('SubscriptionBanner|Add new license'), new_admin_license_path, class: 'btn gl-alert-action gl-button btn-default'
diff --git a/ee/app/views/shared/_manual_renewal_banner.html.haml b/ee/app/views/shared/_manual_renewal_banner.html.haml
index 79fa0d056e868c37e089bcfc67ad0326c96f3810..a454c7f6a1f346c674a3772bea85fab008fc47ba 100644
--- a/ee/app/views/shared/_manual_renewal_banner.html.haml
+++ b/ee/app/views/shared/_manual_renewal_banner.html.haml
@@ -7,9 +7,9 @@
       variant: payload.display_error_version? ? :danger : :warning,
       alert_class: 'gl-my-5',
       alert_data: { testid: 'manual-renewal-banner' },
-      dismissible: false) do
-      .gl-alert-body
+      dismissible: false) do |c|
+      = c.body do
         = payload.body
-      .gl-alert-actions
+      = c.actions do
         = link_to s_('SubscriptionBanner|Export license usage file'), admin_license_usage_export_path(format: :csv), class: 'btn gl-alert-action gl-button btn-confirm'
         = link_to s_('SubscriptionBanner|Add new license'), new_admin_license_path, class: 'btn gl-alert-action gl-button btn-default'
diff --git a/ee/app/views/shared/_minute_limit_banner.html.haml b/ee/app/views/shared/_minute_limit_banner.html.haml
index a0544a419431e2133f19a4aeaa0be276af715f0a..d2b75bb0fe0e05b7f679e5a698ea3de358f02c40 100644
--- a/ee/app/views/shared/_minute_limit_banner.html.haml
+++ b/ee/app/views/shared/_minute_limit_banner.html.haml
@@ -3,8 +3,8 @@
     .row
       = render Pajamas::AlertComponent.new(title: s_("Changes to free tier public projects"),
         alert_class: 'gl-mt-5 js-minute-limit-banner',
-        alert_data: { feature_id: ::Users::CalloutsHelper::MINUTE_LIMIT_BANNER, dismiss_endpoint: callouts_path }) do
-        .gl-alert-body
+        alert_data: { feature_id: ::Users::CalloutsHelper::MINUTE_LIMIT_BANNER, dismiss_endpoint: callouts_path }) do |c|
+        = c.body do
           - minutes_quota_link = external_link("included in the 400 minutes per month CI/CD minutes quota", "https://about.gitlab.com/blog/2021/11/11/public-project-minute-limits")
           - enrollment_link = external_link("enroll in GitLab's Open Source Program", "https://about.gitlab.com/blog/2022/02/04/ultimate-perks-for-open-source-projects")
           - faq_link = external_link("FAQ", "https://about.gitlab.com/pricing/faq-efficient-free-tier/#public-projects-on-gitlab-saas-free-tier")
diff --git a/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml b/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
index 660f8e35e27cef723aa23bee5a2374ec43c12eac..ee6bab33815d47fa495f4eeec36550f689cacafd 100644
--- a/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
+++ b/ee/app/views/shared/_namespace_user_cap_reached_alert.html.haml
@@ -14,8 +14,8 @@
   variant: :warning,
   close_button_class: 'js-namespace-user-cap-alert-dismiss',
   close_button_data: { cookie_id: hide_user_cap_alert_cookie_id(root_namespace),
-                       testid: 'namespace_user_cap_alert_dismiss' }) do
-  .gl-alert-body
+                       testid: 'namespace_user_cap_alert_dismiss' }) do |c|
+  = c.body do
     = s_('NamespaceUserCap|Pending users must be reviewed and approved by a group owner. Learn more about %{user_caps_link_start}user caps%{link_end} and %{users_pending_approval_link_start}users pending approval%{link_end}.').html_safe % { user_caps_link_start: user_caps_link_start, users_pending_approval_link_start: users_pending_approval_link_start, link_end: link_end }
-  .gl-alert-actions
+  = c.actions do
     = link_to(s_('NamespaceUserCap|View pending approvals'), pending_users_link, class: "btn gl-alert-action btn-md gl-button btn-confirm")
diff --git a/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml b/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
index aa1acd81b4d21d0694e4e26f1559d8ca1ee7bae4..8f2089cb451876ca88b94e58bf5733d0649ae386 100644
--- a/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
+++ b/ee/app/views/shared/_new_user_signups_cap_reached_alert.html.haml
@@ -10,9 +10,9 @@
     alert_class: 'js-new-user-signups-cap-reached',
     alert_data: { feature_id: ::EE::Users::CalloutsHelper::NEW_USER_SIGNUPS_CAP_REACHED,
                   dismiss_endpoint: callouts_path,
-                  defer_links: "true" }) do
-    .gl-alert-body
+                  defer_links: "true" }) do |c|
+    = c.body do
       = s_('Admin|Additional users must be reviewed and approved by a system administrator. Learn more about %{help_link_start}usage caps%{help_link_end}.').html_safe % { help_link_start: help_link_start, help_link_end: help_link_end }
-      - if User.blocked_pending_approval.count > 0
-        .gl-alert-actions
-          = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-confirm gl-button'
+    - if User.blocked_pending_approval.count > 0
+      = c.actions do
+        = link_to s_('Admin|View pending user approvals'), admin_users_path({ filter: 'blocked_pending_approval' }), class: 'btn gl-alert-action btn-confirm gl-button'
diff --git a/ee/app/views/shared/_user_over_limit_free_plan_alert.html.haml b/ee/app/views/shared/_user_over_limit_free_plan_alert.html.haml
index 04b1f960b740bb5a2adc4333c7afe00703a52b64..029ce2d083f6095144daa0ec88066671e6f27133 100644
--- a/ee/app/views/shared/_user_over_limit_free_plan_alert.html.haml
+++ b/ee/app/views/shared/_user_over_limit_free_plan_alert.html.haml
@@ -15,10 +15,10 @@
           namespace_name: source.root_ancestor.name },
         close_button_data: { track_action: 'dismiss_banner',
                              track_label: 'user_limit_banner',
-                             testid: 'user-over-limit-free-plan-dismiss' }) do
-        .gl-alert-body
+                             testid: 'user-over-limit-free-plan-dismiss' }) do |c|
+        = c.body do
           = _("You can't add any more, but you can manage your existing members, for example, by removing inactive members and replacing them with new members. To get more members an owner of this namespace can start a trial or upgrade to a paid tier.")
-        .gl-alert-actions
+        = c.actions do
           = link_to _('Manage members'),
             group_usage_quotas_path(source.root_ancestor),
             class: 'btn gl-alert-action btn-info btn-md gl-button',
@@ -43,8 +43,8 @@
         title: _('From June 22, 2022 (GitLab 15.1), free personal namespaces and top-level groups will be limited to %{free_limit} members') % { free_limit: ::Namespaces::FreeUserCap::FREE_USER_LIMIT },
         close_button_data: { track_action: 'dismiss_banner',
                              track_label: 'user_limit_banner',
-                             testid: 'user-over-limit-free-plan-dismiss' }) do
-        .gl-alert-body
+                             testid: 'user-over-limit-free-plan-dismiss' }) do |c|
+        = c.body do
           = _('Your %{doc_link_start}namespace%{doc_link_end}, %{strong_start}%{namespace_name}%{strong_end} has more than %{free_limit} members. From June 22, 2022, it will be limited to %{free_limit}, and the remaining members will get a %{link_start}status of Over limit%{link_end} and lose access to the namespace. You can go to the Usage Quotas page to manage which %{free_limit} members will remain in your namespace. To get more members, an owner can start a trial or upgrade to a paid tier.').html_safe % { namespace_name: source.root_ancestor.name,
             free_limit: ::Namespaces::FreeUserCap::FREE_USER_LIMIT,
             doc_link_start: '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/index', anchor: 'namespaces') },
@@ -53,7 +53,7 @@
             strong_end: "</strong>".html_safe,
             link_start: '<a href="https://about.gitlab.com/blog/2022/03/24/efficient-free-tier" target="_blank" rel="noopener noreferrer">'.html_safe,
             link_end: '</a>'.html_safe }
-        .gl-alert-actions
+        = c.actions do
           = link_to _('Manage members'),
             group_usage_quotas_path(source.root_ancestor),
             class: 'btn gl-alert-action btn-info btn-md gl-button',
diff --git a/ee/app/views/shared/billings/_eoa_bronze_plan_banner.html.haml b/ee/app/views/shared/billings/_eoa_bronze_plan_banner.html.haml
index a65320d48a030cadb0e4f66b337730f4e96f0a29..fe08f778ba836518cf898830ecc7ba240d348f5b 100644
--- a/ee/app/views/shared/billings/_eoa_bronze_plan_banner.html.haml
+++ b/ee/app/views/shared/billings/_eoa_bronze_plan_banner.html.haml
@@ -3,7 +3,7 @@
     = render Pajamas::AlertComponent.new(title: s_("BillingPlans|End of availability for the Bronze Plan"),
       alert_class: 'gl-mt-5 js-eoa-bronze-plan-banner',
       alert_data: { feature_id: ::EE::Users::CalloutsHelper::EOA_BRONZE_PLAN_BANNER,
-                    dismiss_endpoint: callouts_path }) do
-      .gl-alert-body
+                    dismiss_endpoint: callouts_path }) do |c|
+      = c.body do
         - announcement_link = external_link("announcement blog", "https://about.gitlab.com/blog/2021/01/26/new-gitlab-product-subscription-model")
         = s_("BillingPlans|While GitLab is ending availability of the Bronze plan, you can still renew your Bronze subscription one additional time before %{eoa_bronze_plan_end_date}. We are also offering a limited time free upgrade to our Premium Plan (up to 25 users)! Learn more about the changes and offers in our %{announcement_link}.").html_safe % { announcement_link: announcement_link, eoa_bronze_plan_end_date: eoa_bronze_plan_end_date.in_time_zone.to_date.to_s(:medium) }
diff --git a/ee/app/views/shared/billings/customers_dot_unavailable.html.haml b/ee/app/views/shared/billings/customers_dot_unavailable.html.haml
index 1019203f5fab2d880a93bd5411517ffa35737965..f94e2b00e89bcfb356f804c64d5e38c6f7daf18b 100644
--- a/ee/app/views/shared/billings/customers_dot_unavailable.html.haml
+++ b/ee/app/views/shared/billings/customers_dot_unavailable.html.haml
@@ -3,6 +3,6 @@
 = render Pajamas::AlertComponent.new(title: _('Subscription service outage'),
   variant: :danger,
   alert_class: 'gl-mb-5',
-  dismissible: false) do
-  .gl-alert-body
+  dismissible: false) do |c|
+  = c.body do
     = html_escape(_("The GitLab subscription service (customers.gitlab.com) is currently experiencing an outage. You can monitor the status and get updates at %{linkStart}status.gitlab.com%{linkEnd}.")) % { linkStart: "<a href=\"#{::EE::GITLAB_COM_STATUS_URL}\">".html_safe, linkEnd: '</a>'.html_safe }
diff --git a/spec/components/pajamas/alert_component_spec.rb b/spec/components/pajamas/alert_component_spec.rb
index 58c1cb2231a7af44633e6ab0f9f651fa7bff339f..e596f07a15a5428f33b6e8556188ec51622d6b50 100644
--- a/spec/components/pajamas/alert_component_spec.rb
+++ b/spec/components/pajamas/alert_component_spec.rb
@@ -2,13 +2,23 @@
 require "spec_helper"
 
 RSpec.describe Pajamas::AlertComponent, :aggregate_failures, type: :component do
-  context 'with content' do
+  context 'slots' do
+    let_it_be(:body) { 'Alert body' }
+    let_it_be(:actions) { 'Alert actions' }
+
     before do
-      render_inline(described_class.new) { '_content_' }
+      render_inline described_class.new do |c|
+        c.body { body }
+        c.actions { actions }
+      end
+    end
+
+    it 'renders alert body' do
+      expect(rendered_component).to have_content(body)
     end
 
-    it 'has content' do
-      expect(rendered_component).to have_text('_content_')
+    it 'renders actions' do
+      expect(rendered_component).to have_content(actions)
     end
   end