[skip ci] Convert panel related class names to card

46 files changed, 204 insertions, 204 deletions

diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index f0cc4d7ee62..faa5854bb40 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -7,9 +7,9 @@
 
   %hr
 
-  .panel.panel-default
-    .panel-heading Sidekiq running processes
-    .panel-body
+  .card
+    .card-header Sidekiq running processes
+    .card-body
       - if @sidekiq_processes.empty?
         %h4.cred
           %i.fa.fa-exclamation-triangle
@@ -41,5 +41,5 @@
 
 
 
-  .panel.panel-default
+  .card
     %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: 0" }
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 62087525b31..40da3346905 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -10,8 +10,8 @@
 %hr
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Group info:
       %ul.well-list
         %li
@@ -58,9 +58,9 @@
             = group_lfs_status(@group)
             = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
 
-    .panel.panel-default
-      .panel-heading
-        %h3.panel-title
+    .card
+      .card-header
+        %h3.card-title
           Projects
           %span.badge.badge-pill
             #{@group.projects.count}
@@ -73,12 +73,12 @@
                 = storage_counter(project.statistics.storage_size)
             %span.float-right.light
               %span.monospace= project.full_path + '.git'
-      .panel-footer
+      .card-footer
         = paginate @projects, param_name: 'projects_page', theme: 'gitlab'
 
     - if @group.shared_projects.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Projects shared with #{@group.name}
           %span.badge.badge-pill
             #{@group.shared_projects.count}
@@ -94,10 +94,10 @@
 
   .col-md-6
     - if can?(current_user, :admin_group_member, @group)
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Add user(s) to the group:
-        .panel-body.form-holder
+        .card-body.form-holder
           %p.light
             Read more about project permissions
             %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
@@ -111,8 +111,8 @@
             = button_tag 'Add users to group', class: "btn btn-create"
       = render 'shared/members/requests', membership_source: @group, requesters: @requesters, force_mobile_view: true
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @group.name
         group members
         %span.badge.badge-pill= @group.members.size
@@ -120,5 +120,5 @@
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-xs"
       %ul.well-list.group-users-list.content-list.members-list
         = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @members, param_name: 'members_page', theme: 'gitlab'
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index 8ae004047a7..f72616b4f71 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -25,8 +25,8 @@
         %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
 
   %hr
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Current Status:
       - if no_errors
         = icon('circle', class: 'cgreen')
@@ -34,7 +34,7 @@
       - else
         = icon('warning', class: 'cred')
         #{ s_('HealthCheck|Unhealthy') }
-    .panel-body
+    .card-body
       - if no_errors
         #{ s_('HealthCheck|No Health Problems Detected') }
       - else
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index d9e2ce5e74c..02e4426b3a5 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -15,8 +15,8 @@
     %hr
 
     - if @hooks.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           System hooks (#{@hooks.count})
         %ul.content-list
           - @hooks.each do |hook|
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 396ce5c100c..fd22fda5c73 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -10,8 +10,8 @@
 - if @project.last_repository_check_failed?
   .row
     .col-md-12
-      .panel
-        .panel-heading.alert.alert-danger
+      .card
+        .card-header.alert.alert-danger
           Last repository check
           = "(#{time_ago_in_words(@project.last_repository_check_at)} ago)"
           failed. See
@@ -19,8 +19,8 @@
           for error messages.
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Project info:
       %ul.well-list
         %li
@@ -110,10 +110,10 @@
               = visibility_level_icon(@project.visibility_level)
               = visibility_level_label(@project.visibility_level)
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Transfer project
-      .panel-body
+      .card-body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put, html: { class: 'form-horizontal' } do |f|
           .form-group
             = f.label :new_namespace_id, "Namespace", class: 'control-label'
@@ -130,10 +130,10 @@
             .col-sm-offset-2.col-sm-10
               = f.submit 'Transfer', class: 'btn btn-primary'
 
-    .panel.panel-default.repository-check
-      .panel-heading
+    .card.repository-check
+      .card-header
         Repository check
-      .panel-body
+      .card-body
         = form_for @project, url: repository_check_admin_project_path(@project), method: :post do |f|
           .form-group
             - if @project.last_repository_check_at.nil?
@@ -158,8 +158,8 @@
 
   .col-md-6
     - if @group
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           %strong= @group.name
           group members
           %span.badge.badge-pill= @group_members.size
@@ -168,13 +168,13 @@
               = icon('pencil-square-o', text: 'Manage access')
         %ul.well-list.content-list.members-list
           = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
-        .panel-footer
+        .card-footer
           = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
 
     = render 'shared/members/requests', membership_source: @project, requesters: @requesters, force_mobile_view: true
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %strong= @project.name
         project members
         %span.badge.badge-pill= @project.users.size
@@ -182,5 +182,5 @@
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-xs"
       %ul.well-list.project_members.content-list.members-list
         = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
-      .panel-footer
+      .card-footer
         = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'
diff --git a/app/views/admin/requests_profiles/index.html.haml b/app/views/admin/requests_profiles/index.html.haml
index cb02a750490..adfc67d66d0 100644
--- a/app/views/admin/requests_profiles/index.html.haml
+++ b/app/views/admin/requests_profiles/index.html.haml
@@ -13,8 +13,8 @@
   - if @profiles.present?
     .prepend-top-default
       - @profiles.each do |path, profiles|
-        .panel.panel-default.panel-small
-          .panel-heading
+        .card.card-small
+          .card-header
             %code= path
           %ul.content-list
             - profiles.each do |profile|
diff --git a/app/views/admin/users/_profile.html.haml b/app/views/admin/users/_profile.html.haml
index 6bc217f84cc..af22652e07c 100644
--- a/app/views/admin/users/_profile.html.haml
+++ b/app/views/admin/users/_profile.html.haml
@@ -1,5 +1,5 @@
-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Profile
   %ul.well-list
     %li
diff --git a/app/views/admin/users/_projects.html.haml b/app/views/admin/users/_projects.html.haml
index a126a858ea8..81cfb71af16 100644
--- a/app/views/admin/users/_projects.html.haml
+++ b/app/views/admin/users/_projects.html.haml
@@ -1,13 +1,13 @@
 - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present?
-  .panel.panel-default.contributed-projects
-    .panel-heading Projects contributed to
+  .card.contributed-projects
+    .card-header Projects contributed to
     = render 'shared/projects/list',
       projects: contributed_projects.sort_by(&:star_count).reverse,
       projects_limit: 5, stars: true, avatar: false
 
 - if local_assigns.has_key?(:projects) && projects.present?
-  .panel.panel-default
-    .panel-heading Personal projects
+  .card
+    .card-header Personal projects
     = render 'shared/projects/list',
       projects: projects.sort_by(&:star_count).reverse,
       projects_limit: 10, stars: true, avatar: false
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index d22cc38a2a1..245b9f22f01 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -2,8 +2,8 @@
 = render 'admin/users/head'
 
 - if @user.groups.any?
-  .panel.panel-default
-    .panel-heading Group projects
+  .card
+    .card-header Group projects
     %ul.well-list
       - @user.group_members.includes(:source).each do |group_member|
         - group = group_member.group
@@ -26,8 +26,8 @@
 
 
   .col-md-6
-    .panel.panel-default
-      .panel-heading Joined projects (#{@joined_projects.count})
+    .card
+      .card-header Joined projects (#{@joined_projects.count})
       %ul.well-list
         - @joined_projects.sort_by(&:full_name).each do |project|
           - member = project.team.find_member(@user.id)
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index c4f5ec155e9..8b914d58671 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -5,8 +5,8 @@
 
 .row
   .col-md-6
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         = @user.name
       %ul.well-list
         %li
@@ -18,8 +18,8 @@
               = @user.username
     = render 'admin/users/profile', user: @user
 
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Account:
       %ul.well-list
         %li
@@ -128,20 +128,20 @@
   .col-md-6
     - unless @user == current_user
       - unless @user.confirmed?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             Confirm user
-          .panel-body
+          .card-body
             - if @user.unconfirmed_email.present?
               - email = " (#{@user.unconfirmed_email})"
             %p This user has an unconfirmed email address#{email}. You may force a confirmation.
             %br
             = link_to 'Confirm user', confirm_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - if @user.blocked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This user is blocked
-          .panel-body
+          .card-body
             %p A blocked user cannot:
             %ul
               %li Log in
@@ -149,10 +149,10 @@
             %br
             = link_to 'Unblock user', unblock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
       - else
-        .panel.panel-warning
-          .panel-heading
+        .card.bg-warning
+          .card-header
             Block this user
-          .panel-body
+          .card-body
             %p Blocking user has the following effects:
             %ul
               %li User will not be able to login
@@ -162,18 +162,18 @@
             %br
             = link_to 'Block user', block_admin_user_path(@user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put, class: "btn btn-warning"
       - if @user.access_locked?
-        .panel.panel-info
-          .panel-heading
+        .card.bg-info
+          .card-header
             This account has been locked
-          .panel-body
+          .card-body
             %p This user has been temporarily locked due to excessive number of failed logins. You may manually unlock the account.
             %br
             = link_to 'Unlock user', unlock_admin_user_path(@user), method: :put, class: "btn btn-info", data: { confirm: 'Are you sure?' }
 
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user')
-        .panel-body
+        .card-body
           - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
             %p Deleting a user has the following effects:
             = render 'users/deletion_guidance', user: @user
@@ -196,10 +196,10 @@
               %p
                 You don't have access to delete this user.
 
-      .panel.panel-danger
-        .panel-heading
+      .card.bg-danger
+        .card-header
           = s_('AdminUsers|Delete user and contributions')
-        .panel-body
+        .card-body
           - if can?(current_user, :destroy_user, @user)
             %p
               This option deletes the user and any contributions that
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 42afd9c2fe3..4da5102a21d 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -73,7 +73,7 @@
   - if @todos.any?
     .js-todos-list-container
       .js-todos-options{ data: { per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages } }
-        .panel.panel-default.panel-without-border.panel-without-margin
+        .card.card-without-border.card-without-margin
           %ul.content-list.todos-list
             = render @todos
       = paginate @todos, theme: "gitlab"
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index e9589213f80..3e65d211c50 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -51,5 +51,5 @@
           - if discussion.diff_discussion? && discussion.diff_file
             = render "discussions/diff_with_notes", discussion: discussion
           - else
-            .panel.panel-default
+            .card
               = render partial: "discussions/notes", locals: { discussion: discussion, disable_collapse_class: true }
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 86cd0759a2c..5f6ddfc6348 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,8 +1,8 @@
 - breadcrumb_title "General Settings"
-.panel.panel-default.prepend-top-default
-  .panel-heading
+.card.prepend-top-default
+  .card-header
     Group settings
-  .panel-body
+  .card-body
     = form_for @group, html: { multipart: true, class: "form-horizontal gl-show-field-errors" }, authenticity_token: true do |f|
       = form_errors(@group)
       = render 'shared/group_form', f: f
@@ -45,9 +45,9 @@
       .form-actions
         = f.submit 'Save group', class: "btn btn-save"
 
-.panel.panel-danger
-  .panel-heading Remove group
-  .panel-body
+.card.bg-danger
+  .card-header Remove group
+  .card-body
     = form_tag(@group, method: :delete) do
       %p
         Removing group will cause all child projects and resources to be removed.
@@ -58,9 +58,9 @@
         = button_to 'Remove group', '#', class: "btn btn-remove js-confirm-danger", data: { "confirm-danger-message" => remove_group_message(@group) }
 
 - if supports_nested_groups?
-  .panel.panel-warning
-    .panel-heading Transfer group
-    .panel-body
+  .card.bg-warning
+    .card-header Transfer group
+    .card-body
       = form_for @group, url: transfer_group_path(@group), method: :put do |f|
         .form-group
           = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: "Search groups", data: { data: parent_group_options(@group) } })
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index a266700edea..685178ca9d2 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -22,8 +22,8 @@
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
           = icon("search")
         = render 'shared/members/sort_dropdown'
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Members with access to
       %strong= @group.name
       %span.badge.badge-pill= @members.total_count
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index 9c8e03051c1..d6cd30b64a4 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title "Projects"
 
-.panel.panel-default.prepend-top-default
-  .panel-heading
+.card.prepend-top-default
+  .card-header
     %strong= @group.name
     projects:
     - if can? current_user, :admin_group, @group
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index bf2725dc328..42fc16b59c5 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -33,8 +33,8 @@
     .documentation-index.wiki
       = markdown(@help_index)
   .col-md-4
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         Quick help
       %ul.well-list
         %li= link_to 'See our website for getting help', support_url
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 1b18c1078c6..a08bcc5fe24 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -129,8 +129,8 @@
   .lead
     List inside panel
   .example
-    .panel.panel-default
-      .panel-heading Your list
+    .card
+      .card-header Your list
       %ul.well-list
         %li
           One item
@@ -416,26 +416,26 @@
 
   .row
     .col-md-6
-      .panel.panel-success
-        .panel-heading Success
-        .panel-body
+      .card.bg-success
+        .card-header Success
+        .card-body
           = lorem
-      .panel.panel-primary
-        .panel-heading Primary
-        .panel-body
+      .card.bg-primary
+        .card-header Primary
+        .card-body
           = lorem
-      .panel.panel-info
-        .panel-heading Info
-        .panel-body
+      .card.bg-info
+        .card-header Info
+        .card-body
           = lorem
     .col-md-6
-      .panel.panel-warning
-        .panel-heading Warning
-        .panel-body
+      .card.bg-warning
+        .card-header Warning
+        .card-body
           = lorem
-      .panel.panel-danger
-        .panel-heading Danger
-        .panel-body
+      .card.bg-danger
+        .card-header Danger
+        .card-body
           = lorem
 
   %h2#alerts Alerts
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index e463a81fec1..02d5b08f7a3 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,8 +1,8 @@
 - is_admin = defined?(admin) ? true : false
 .row.prepend-top-default
   .col-md-4
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         SSH Key
       %ul.well-list
         %li
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index 12e5a8e8d69..398f76d379a 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,13 +7,13 @@
 
 - return unless branches.any?
 
-.panel.panel-default.prepend-top-10
-  .panel-heading
-    %h4.panel-title
+.card.prepend-top-10
+  .card-header
+    %h4.card-title
       = panel_title
   %ul.content-list.all-branches
     - branches.first(overview_max_branches).each do |branch|
       = render "projects/branches/branch", branch: branch, merged: project.repository.merged_to_root_ref?(branch)
   - if branches.size > overview_max_branches
-    .panel-footer.text-center
+    .card-footer.text-center
       = link_to show_more_text, project_branches_filtered_path(project, state: state), id: "state-#{state}", data: { state: state }
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index 6f5835cb9be..8f8eb2c3d5a 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -1,8 +1,8 @@
 - commits, hidden = limited_commits(@commits)
 - commits = Commit.decorate(commits, @project)
 
-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Commits (#{@commits.count})
   - if hidden > 0
     %ul.content-list
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index d99b0b08249..f8302e16a73 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -8,8 +8,8 @@
       "v-on:dismiss-overview-dialog" => "dismissOverviewDialog()" }
   = icon("spinner spin", "v-show" => "isLoading")
   .wrapper{ "v-show" => "!isLoading && !hasError" }
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         {{ __('Pipeline Health') }}
       .content-block
         .container-fluid
@@ -33,8 +33,8 @@
                     %a{ "href" => "#", "data-value" => "90" }
                       {{ n__('Last %d day', 'Last %d days', 90) }}
     .stage-panel-container
-      .panel.panel-default.stage-panel
-        .panel-heading
+      .card.stage-panel
+        .card-header
           %nav.col-headers
             %ul
               %li.stage-header
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index 778ff91362d..3ff4e160a4d 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -5,9 +5,9 @@
 %hr
 
 - if @project.import_failed?
-  .panel.panel-danger
-    .panel-heading The repository could not be imported.
-    .panel-body
+  .card.bg-danger
+    .card-header The repository could not be imported.
+    .card-body
       %pre
         :preserve
           #{h(sanitize_repo_path(@project, @project.import_error))}
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 816d4b18788..ab599cda74e 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -5,10 +5,10 @@
   .d-none.alert.alert-danger.mr-compare-errors
   .merge-request-branches.js-merge-request-new-compare.row{ 'data-target-project-url': project_new_merge_request_update_branches_path(@source_project), 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
     .col-md-6
-      .panel.panel-default.panel-new-merge-request
-        .panel-heading
+      .card.card-new-merge-request
+        .card-header
           Source branch
-        .panel-body.clearfix
+        .card-body.clearfix
           .merge-request-select.dropdown
             = f.hidden_field :source_project_id
             = dropdown_toggle @merge_request.source_project_path, { toggle: "dropdown", field_name: "#{f.object_name}[source_project_id]", disabled: @merge_request.persisted? }, { toggle_class: "js-compare-dropdown js-source-project" }
@@ -29,15 +29,15 @@
                 = render 'projects/merge_requests/dropdowns/branch',
                   branches: @merge_request.source_branches,
                   selected: f.object.source_branch
-        .panel-footer
+        .card-footer
           .text-center= icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
 
     .col-md-6
-      .panel.panel-default.panel-new-merge-request
-        .panel-heading
+      .card.card-new-merge-request
+        .card-header
           Target branch
-        .panel-body.clearfix
+        .card-body.clearfix
           - projects = target_projects(@project)
           .merge-request-select.dropdown
             = f.hidden_field :target_project_id
@@ -59,7 +59,7 @@
                 = render 'projects/merge_requests/dropdowns/branch',
                   branches: @merge_request.target_branches,
                   selected: f.object.target_branch
-        .panel-footer
+        .card-footer
           .text-center= icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit
 
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
index 82e20eeebb3..73ea30e1d3d 100644
--- a/app/views/projects/pages/_access.html.haml
+++ b/app/views/projects/pages/_access.html.haml
@@ -1,8 +1,8 @@
 - if @project.pages_deployed?
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Access pages
-    .panel-body
+    .card-body
       %p
         %strong
           Congratulations! Your pages are served under:
diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml
index 7d6c30b7f8d..4ada19a1368 100644
--- a/app/views/projects/pages/_destroy.haml
+++ b/app/views/projects/pages/_destroy.haml
@@ -1,9 +1,9 @@
 - if @project.pages_deployed?
   - if can?(current_user, :remove_pages, @project)
-    .panel.panel-default.panel.panel-danger
-      .panel-heading Remove pages
+    .card.bg-danger
+      .card-header Remove pages
       .errors-holder
-      .panel-body
+      .card-body
         %p
           Removing the pages will prevent from exposing them to outside world.
         .form-actions
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
index 27bbe52a714..7c9a77b2aaf 100644
--- a/app/views/projects/pages/_list.html.haml
+++ b/app/views/projects/pages/_list.html.haml
@@ -1,8 +1,8 @@
 - verification_enabled = Gitlab::CurrentSettings.pages_domain_verification_enabled?
 
 - if can?(current_user, :update_pages, @project) && @domains.any?
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Domains (#{@domains.count})
     %ul.well-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
       - @domains.each do |domain|
diff --git a/app/views/projects/pages/_no_domains.html.haml b/app/views/projects/pages/_no_domains.html.haml
index 7cea5f3e70b..8c93cf7a8ad 100644
--- a/app/views/projects/pages/_no_domains.html.haml
+++ b/app/views/projects/pages/_no_domains.html.haml
@@ -1,6 +1,6 @@
 - if can?(current_user, :update_pages, @project)
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       Domains
     .nothing-here-block
       Support for domains and certificates is disabled.
diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml
index e442e6e9a09..cd9177c0f9e 100644
--- a/app/views/projects/pages/_use.html.haml
+++ b/app/views/projects/pages/_use.html.haml
@@ -1,8 +1,8 @@
 - unless @project.pages_deployed?
-  .panel.panel-info
-    .panel-heading
+  .card.bg-info
+    .card-header
       Configure pages
-    .panel-body
+    .card-body
       %p
         Learn how to upload your static site and have it served by
         GitLab by following the
diff --git a/app/views/projects/project_members/_groups.html.haml b/app/views/projects/project_members/_groups.html.haml
index e5a689f9625..128f52ff648 100644
--- a/app/views/projects/project_members/_groups.html.haml
+++ b/app/views/projects/project_members/_groups.html.haml
@@ -1,5 +1,5 @@
-.panel.panel-default.project-members-groups
-  .panel-heading
+.card.project-members-groups
+  .card-header
     Groups with access to
     %strong= @project.name
     %span.badge.badge-pill= group_links.size
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index 930ff85a20c..a30870a241c 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,8 +1,8 @@
 - project = local_assigns.fetch(:project)
 - members = local_assigns.fetch(:members)
 
-.panel.panel-default
-  .panel-heading.flex-project-members-panel
+.card
+  .card-header.flex-project-members-panel
     %span.flex-project-title
       Members of
       %strong= project.name
diff --git a/app/views/projects/protected_branches/shared/_branches_list.html.haml b/app/views/projects/protected_branches/shared/_branches_list.html.haml
index a09c13176c3..5d774e1a91f 100644
--- a/app/views/projects/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/shared/_branches_list.html.haml
@@ -1,7 +1,7 @@
-.panel.panel-default.protected-branches-list.js-protected-branches-list
+.card.protected-branches-list.js-protected-branches-list
   - if @protected_branches.empty?
-    .panel-heading
-      %h3.panel-title
+    .card-header
+      %h3.card-title
         Protected branch (#{@protected_branches_count})
     %p.settings-message.text-center
       There are currently no protected branches, protect a branch with the form above.
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 9f0c4f3b3a8..de2d4b72257 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.namespace.becomes(Namespace), @project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
-  .panel.panel-default
-    .panel-heading
-      %h3.panel-title
+  .card
+    .card-header
+      %h3.card-title
         Protect a branch
-    .panel-body
+    .card-body
       .form-horizontal
         = form_errors(@protected_branch)
         .form-group
@@ -29,5 +29,5 @@
           .col-md-10
             = yield :push_access_levels
 
-    .panel-footer
+    .card-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true
diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index 5a53c704fcb..a40d04faaaa 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -1,9 +1,9 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f|
-  .panel.panel-default
-    .panel-heading
-      %h3.panel-title
+  .card
+    .card-header
+      %h3.card-title
         Protect a tag
-    .panel-body
+    .card-body
       .form-horizontal
         = form_errors(@protected_tag)
         .form-group
@@ -25,5 +25,5 @@
             .create_access_levels-container
               = yield :create_access_levels
 
-    .panel-footer
+    .card-footer
       = f.submit 'Protect', class: 'btn-create btn', disabled: true
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index 02908e16dc5..1b333fe5287 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -1,7 +1,7 @@
-.panel.panel-default.protected-tags-list.js-protected-tags-list
+.card.protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
-    .panel-heading
-      %h3.panel-title
+    .card-header
+      %h3.card-title
         Protected tag (#{@protected_tags_count})
     %p.settings-message.text-center
       There are currently no protected tags, protect a tag with the form above.
diff --git a/app/views/projects/registry/repositories/index.html.haml b/app/views/projects/registry/repositories/index.html.haml
index 2c80f7c3fa3..f08a421931a 100644
--- a/app/views/projects/registry/repositories/index.html.haml
+++ b/app/views/projects/registry/repositories/index.html.haml
@@ -16,11 +16,11 @@
 
   .row.prepend-top-10
     .col-lg-12
-      .panel.panel-default
-        .panel-heading
-          %h4.panel-title
+      .card
+        .card-header
+          %h4.card-title
             = s_('ContainerRegistry|How to use the Container Registry')
-        .panel-body
+        .card-body
           %p
             - link_token = link_to(_('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank')
             - link_2fa = link_to(_('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank')
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index ef5319b6d31..bda597cc02b 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -7,12 +7,12 @@
       = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')
 
   .col-lg-9
-    .panel.panel-default.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
-      .panel-heading
-        %h3.panel-title
+    .card.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(@project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/metrics') } }
+      .card-header
+        %h3.card-title
           = s_('PrometheusService|Common metrics')
           %span.badge.badge-pill.js-monitored-count 0
-      .panel-body
+      .card-body
         .loading-metrics.js-loading-metrics
           %p.prepend-top-10.prepend-left-10
             = icon('spinner spin', class: 'metrics-load-spinner')
@@ -22,13 +22,13 @@
             = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
         %ul.list-unstyled.metrics-list.hidden.js-metrics-list
 
-    .panel.panel-default.hidden.js-panel-missing-env-vars
-      .panel-heading
-        %h3.panel-title
+    .card.hidden.js-panel-missing-env-vars
+      .card-header
+        %h3.card-title
           = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
           = s_('PrometheusService|Missing environment variable')
           %span.badge.badge-pill.js-env-var-count 0
-      .panel-body.hidden
+      .card-body.hidden
         .flash-container
           .flash-notice
             .flash-text
diff --git a/app/views/projects/settings/ci_cd/_badge.html.haml b/app/views/projects/settings/ci_cd/_badge.html.haml
index 9be0f8ac477..d14360913a4 100644
--- a/app/views/projects/settings/ci_cd/_badge.html.haml
+++ b/app/views/projects/settings/ci_cd/_badge.html.haml
@@ -2,15 +2,15 @@
   .col-lg-12
     %h4
       = badge.title.capitalize
-    .panel.panel-default
-      .panel-heading
+    .card
+      .card-header
         %b
           = badge.title.capitalize
           ·
         = badge.to_html
         .float-right
           = render 'shared/ref_switcher', destination: 'badges', align_right: true
-      .panel-body
+      .card-body
         .row
           .col-md-2.text-center
             Markdown
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index 0f655e4ed83..a15bb4c4f3f 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,11 +1,11 @@
 .row.prepend-top-default.append-bottom-default.triggers-container
   .col-lg-12
     = render "projects/triggers/content"
-    .panel.panel-default
-      .panel-heading
-        %h4.panel-title
+    .card
+      .card-header
+        %h4.card-title
           Manage your project's triggers
-      .panel-body
+      .card-body
         = render "projects/triggers/form", btn_text: "Add trigger"
         %hr
         - if @triggers.any?
@@ -26,7 +26,7 @@
           %p.settings-message.text-center.append-bottom-default
             No triggers have been created yet. Add one using the form above.
 
-      .panel-footer
+      .card-footer
 
         %p
           In the following examples, you can see the exact API call you need to
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 49555b6ff4e..987a5d4f13f 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -1,5 +1,5 @@
 - if @issues.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.issues-list.issuable-list
       = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index 0517896cfbd..700ec4b606f 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -1,5 +1,5 @@
 - if @merge_requests.to_a.any?
-  .panel.panel-default.panel-small.panel-without-border
+  .card.card-small.card-without-border
     %ul.content-list.mr-list.issuable-list
       = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests
 
diff --git a/app/views/shared/members/_requests.html.haml b/app/views/shared/members/_requests.html.haml
index f288cf9ec33..54679ab86cc 100644
--- a/app/views/shared/members/_requests.html.haml
+++ b/app/views/shared/members/_requests.html.haml
@@ -4,8 +4,8 @@
 
 - return if requesters.empty?
 
-.panel.panel-default.prepend-top-default{ class: ('panel-mobile' if force_mobile_view ) }
-  .panel-heading
+.card.prepend-top-default{ class: ('card-mobile' if force_mobile_view ) }
+  .card-header
     Users requesting access to
     %strong= membership_source.name
     %span.badge.badge-pill= requesters.size
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 7175e275f95..ff90fcd4c52 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -1,9 +1,9 @@
 - show_counter = local_assigns.fetch(:show_counter, false)
 - primary = local_assigns.fetch(:primary, false)
-- panel_class = primary ? 'panel-primary' : 'panel-default'
+- panel_class = primary ? 'bg-primary' : ''
 
-.panel{ class: panel_class }
-  .panel-heading
+.card{ class: panel_class }
+  .card-header
     .title
       = title
     - if show_counter
diff --git a/app/views/shared/plugins/_index.html.haml b/app/views/shared/plugins/_index.html.haml
index fc643c3ecc2..5f426370dc6 100644
--- a/app/views/shared/plugins/_index.html.haml
+++ b/app/views/shared/plugins/_index.html.haml
@@ -10,8 +10,8 @@
 
   .col-lg-8.append-bottom-default
     - if plugins.any?
-      .panel.panel-default
-        .panel-heading
+      .card
+        .card-header
           Plugins (#{plugins.count})
         %ul.content-list
           - plugins.each do |file|
diff --git a/app/views/sherlock/queries/_backtrace.html.haml b/app/views/sherlock/queries/_backtrace.html.haml
index 30e956e5f40..4f5146cefb9 100644
--- a/app/views/sherlock/queries/_backtrace.html.haml
+++ b/app/views/sherlock/queries/_backtrace.html.haml
@@ -1,6 +1,6 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.application_backtrace')
     %ul.well-list
@@ -15,8 +15,8 @@
             = t('sherlock.line')
             = location.line
 
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.full_backtrace')
     %ul.well-list
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 4e6ba2e7eac..64e785de863 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -1,6 +1,6 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
     %ul.well-list
@@ -23,8 +23,8 @@
           = t('sherlock.line')
           = frame.line
 
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
@@ -38,8 +38,8 @@
           :preserve
             #{highlight("#{@query.id}.sql", @query.formatted_query)}
 
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
diff --git a/app/views/sherlock/transactions/_general.html.haml b/app/views/sherlock/transactions/_general.html.haml
index 8533b130da6..25745b13e98 100644
--- a/app/views/sherlock/transactions/_general.html.haml
+++ b/app/views/sherlock/transactions/_general.html.haml
@@ -1,6 +1,6 @@
 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
     %ul.well-list