1 files changed, 4 insertions, 4 deletions
diff --git a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
index 3b8294a1dec..35770c32f9f 100644
--- a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
@@ -1,9 +1,9 @@
 = form_for [@project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-branches-settings' }
-  .card
-    .card-header.gl-font-weight-bold
+  = render Pajamas::CardComponent.new(card_options: { class: "gl-mb-5" }) do |c|
+    - c.header do
       = s_("ProtectedBranch|Protect a branch")
-    .card-body
+    - c.body do
       = form_errors(@protected_branch, pajamas_alert: true)
       .form-group.row
         = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-sm-12'
@@ -31,5 +31,5 @@
             - force_push_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: force_push_docs_url }
             = (s_("ProtectedBranch|Allow all users with push access to %{tag_start}force push%{tag_end}.") % { tag_start: force_push_link_start, tag_end: '</a>' }).html_safe
       = render_if_exists 'projects/protected_branches/ee/code_owner_approval_form', f: f
-    .card-footer
+    - c.footer do
       = f.submit s_('ProtectedBranch|Protect'), class: 'gl-button btn btn-confirm', disabled: true, data: { qa_selector: 'protect_button' }