[skip ci] Convert panel related class names to card

app/assets/javascripts/badges/components/badge_list.vue

@@ -23,8 +23,8 @@ export default {
 </script>
 
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">
+  <div class="card">
+    <div class="card-header">
       {{ s__('Badges|Your badges') }}
       <span
         v-show="!isLoading"
@@ -33,19 +33,19 @@ export default {
     </div>
     <loading-icon
       v-show="isLoading"
-      class="panel-body"
+      class="card-body"
       size="2"
     />
     <div
       v-if="hasNoBadges"
-      class="panel-body"
+      class="card-body"
     >
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
     <div
       v-else
-      class="panel-body"
+      class="card-body"
     >
       <badge-list-row
         v-for="badge in badges"

app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js

@@ -2,9 +2,9 @@ import sqljs from 'sql.js';
 import { template as _template } from 'underscore';
 
 const PREVIEW_TEMPLATE = _template(`
-  <div class="panel panel-default">
-    <div class="panel-heading"><%- name %></div>
-    <div class="panel-body">
+  <div class="card">
+    <div class="card-header"><%- name %></div>
+    <div class="card-body">
       <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
     </div>
   </div>

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -17,12 +17,12 @@ export default {
 <template>
   <div
     v-if="showPanels"
-    class="panel panel-default prometheus-panel"
+    class="card prometheus-panel"
   >
-    <div class="panel-heading">
+    <div class="card-header">
       <h4>{{ name }}</h4>
     </div>
-    <div class="panel-body prometheus-graph-group">
+    <div class="card-body prometheus-graph-group">
       <slot></slot>
     </div>
   </div>

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -100,7 +100,7 @@ export default {
         : 'div';
     },
     wrapperClass() {
-      return this.isDiffDiscussion ? '' : 'panel panel-default';
+      return this.isDiffDiscussion ? '' : 'card';
     },
   },
   mounted() {

app/assets/javascripts/prometheus_metrics/prometheus_metrics.js

@@ -31,7 +31,7 @@ export default class PrometheusMetrics {
   /* eslint-disable class-methods-use-this */
   handlePanelToggle(e) {
     const $toggleBtn = $(e.currentTarget);
-    const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
+    const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
     $currentPanelBody.toggleClass('hidden');
     if ($toggleBtn.hasClass('fa-caret-down')) {
       $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');

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" }

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'

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

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|

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'

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|

app/views/admin/users/_profile.html.haml

-.panel.panel-default
-  .panel-heading
+.card
+  .card-header
     Profile
   %ul.well-list
     %li

app/views/admin/users/_projects.html.haml

 - 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

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)

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

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"

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 }

app/views/groups/edit.html.haml

 - 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) } })

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

app/views/groups/projects.html.haml

 - 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

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

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

app/views/profiles/keys/_key_details.html.haml

 - 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

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 }

app/views/projects/commits/_commit_list.html.haml

 - 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

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

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))}

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
 

app/views/projects/pages/_access.html.haml

 - 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:

app/views/projects/pages/_destroy.haml

 - 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

app/views/projects/pages/_list.html.haml

 - 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|

app/views/projects/pages/_no_domains.html.haml

 - 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.

app/views/projects/pages/_use.html.haml

 - 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

app/views/projects/project_members/_groups.html.haml

-.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

app/views/projects/project_members/_team.html.haml

 - 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

app/views/projects/protected_branches/shared/_branches_list.html.haml

-.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.

app/views/projects/protected_branches/shared/_create_protected_branch.html.haml

 = 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

app/views/projects/protected_tags/shared/_create_protected_tag.html.haml

 = 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

app/views/projects/protected_tags/shared/_tags_list.html.haml

-.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.

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')

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

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

app/views/projects/triggers/_index.html.haml

 .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

app/views/shared/_issues.html.haml

 - 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"

app/views/shared/_merge_requests.html.haml

 - 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
 

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

app/views/shared/milestones/_issuables.html.haml

 - 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

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|

app/views/sherlock/queries/_backtrace.html.haml

 .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

app/views/sherlock/queries/_general.html.haml

 .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

app/views/sherlock/transactions/_general.html.haml

 .prepend-top-default
-  .panel.panel-default
-    .panel-heading
+  .card
+    .card-header
       %strong
         = t('sherlock.general')
     %ul.well-list

features/steps/group/members.rb

@@ -63,6 +63,6 @@ class Spinach::Features::GroupMembers < Spinach::FeatureSteps
   end
 
   def group_members_list
-    find(".panel .content-list")
+    find(".card .content-list")
   end
 end

spec/features/admin/admin_requests_profiles_spec.rb

@@ -33,12 +33,12 @@ describe 'Admin::RequestsProfilesController' do
 
       visit admin_requests_profiles_path
 
-      within('.panel', text: '/gitlab-org/gitlab-ce') do
+      within('.card', text: '/gitlab-org/gitlab-ce') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile1)}']", text: time1.to_s(:long))
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile2)}']", text: time2.to_s(:long))
       end
 
-      within('.panel', text: '/gitlab-com/infrastructure') do
+      within('.card', text: '/gitlab-com/infrastructure') do
         expect(page).to have_selector("a[href='#{admin_requests_profile_path(profile3)}']", text: time3.to_s(:long))
       end
     end

spec/features/admin/admin_users_spec.rb

@@ -283,14 +283,14 @@ describe "Admin::Users" do
     end
 
     it "lists group projects" do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Group projects'
         expect(page).to have_link group.name, admin_group_path(group)
       end
     end
 
     it 'allows navigation to the group details' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         click_link group.name
       end
       within(:css, 'h3.page-title') do
@@ -300,7 +300,7 @@ describe "Admin::Users" do
     end
 
     it 'shows the group access level' do
-      within(:css, '.append-bottom-default + .panel') do
+      within(:css, '.append-bottom-default + .card') do
         expect(page).to have_content 'Developer'
       end
     end

spec/features/groups/members/search_members_spec.rb

@@ -22,7 +22,7 @@ describe 'Search group member' do
       find('.member-search-btn').click
     end
 
-    group_members_list = find(".panel .content-list")
+    group_members_list = find(".card .content-list")
     expect(group_members_list).to have_content(member.name)
     expect(group_members_list).not_to have_content(user.name)
   end

spec/features/groups/settings/group_badges_spec.rb

@@ -21,7 +21,7 @@ feature 'Group Badges' do
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content badge_1.link_url
       expect(rows[1]).to have_content badge_2.link_url
@@ -48,7 +48,7 @@ feature 'Group Badges' do
         click_button 'Add badge'
         wait_for_requests
 
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -60,7 +60,7 @@ feature 'Group Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
 
@@ -74,7 +74,7 @@ feature 'Group Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -85,7 +85,7 @@ feature 'Group Badges' do
           wait_for_requests
         end
 
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -99,7 +99,7 @@ feature 'Group Badges' do
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -109,14 +109,14 @@ feature 'Group Badges' do
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content badge_1.link_url
     end

spec/features/projects/settings/project_badges_spec.rb

@@ -22,7 +22,7 @@ feature 'Project Badges' do
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content group_badge.link_url
       expect(rows[1]).to have_content project_badge.link_url
@@ -49,7 +49,7 @@ feature 'Project Badges' do
         click_button 'Add badge'
         wait_for_requests
 
-        within '.panel-body' do
+        within '.card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -61,7 +61,7 @@ feature 'Project Badges' do
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
 
@@ -75,7 +75,7 @@ feature 'Project Badges' do
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
         within 'form' do
@@ -86,7 +86,7 @@ feature 'Project Badges' do
           wait_for_requests
         end
 
-        rows = all('.panel-body > div')
+        rows = all('.card-body > div')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -100,7 +100,7 @@ feature 'Project Badges' do
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -110,14 +110,14 @@ feature 'Project Badges' do
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.panel-body > div')
+      rows = all('.card-body > div')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content group_badge.link_url
     end

spec/javascripts/badges/components/badge_list_spec.js

@@ -33,7 +33,7 @@ describe('BadgeList component', () => {
   });
 
   it('renders a header with the badge count', () => {
-    const header = vm.$el.querySelector('.panel-heading');
+    const header = vm.$el.querySelector('.card-header');
     expect(header).toHaveText(new RegExp(`Your badges\\s+${numberOfDummyBadges}`));
   });
 

spec/javascripts/badges/components/badge_settings_spec.js

@@ -60,7 +60,7 @@ describe('BadgeSettings component', () => {
   });
 
   it('displays badge list', () => {
-    const badgeListElement = vm.$el.querySelector('.panel');
+    const badgeListElement = vm.$el.querySelector('.card');
     expect(badgeListElement).not.toBe(null);
     expect(badgeListElement).toBeVisible();
     expect(badgeListElement).toContainText('Your badges');
@@ -87,7 +87,7 @@ describe('BadgeSettings component', () => {
     });
 
     it('displays no badge list', () => {
-      const badgeListElement = vm.$el.querySelector('.panel');
+      const badgeListElement = vm.$el.querySelector('.card');
       expect(badgeListElement).toBeHidden();
     });
   });

spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js

@@ -257,9 +257,9 @@ describe('BalsamiqViewer', () => {
       name = 'name';
       resource = 'resource';
       template = `
-        <div class="panel panel-default">
-          <div class="panel-heading">name</div>
-          <div class="panel-body">
+        <div class="card">
+          <div class="card-header">name</div>
+          <div class="card-body">
             <img class="img-thumbnail" src="data:image/png;base64,image"/>
           </div>
         </div>