diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index f9c49c7..52b0137 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -146,6 +146,12 @@ function template_preprocess_status_report(&$variables) {
     ),
   );
 
+  // Count number of items with different severity for summary.
+  $counters = array('error', 'warning', 'info');
+  foreach ($counters as $counter) {
+    $variables[$counter] = 0;
+  }
+
   foreach ($variables['requirements'] as $i => $requirement) {
     // Always use the explicit requirement severity, if defined. Otherwise,
     // default to REQUIREMENT_OK in the installer to visually confirm that
@@ -162,6 +168,10 @@ function template_preprocess_status_report(&$variables) {
     }
     $variables['requirements'][$i]['severity_title'] = $severity['title'];
     $variables['requirements'][$i]['severity_status'] = $severity['status'];
+
+    if (in_array($severity['status'], $counters)) {
+      $variables[$severity['status']]++;
+    }
   }
 }
 
diff --git a/core/modules/system/templates/status-report.html.twig b/core/modules/system/templates/status-report.html.twig
index b6ad739..86fe0b5 100644
--- a/core/modules/system/templates/status-report.html.twig
+++ b/core/modules/system/templates/status-report.html.twig
@@ -11,6 +11,9 @@
  *   - description: (optional) The requirement's description.
  *   - severity_title: The title of the severity.
  *   - severity_status: Indicates the severity status.
+ * - error: The number of errors found.
+ * - warning: The number of warnings found.
+ * - info: The number of items which are neither errors nor warnings.
  *
  * @see template_preprocess_status_report()
  *
diff --git a/core/themes/seven/css/components/system-status-report.css b/core/themes/seven/css/components/system-status-report.css
index aeac1d3..6849d42 100644
--- a/core/themes/seven/css/components/system-status-report.css
+++ b/core/themes/seven/css/components/system-status-report.css
@@ -13,3 +13,10 @@
 .system-status-report__entry:last-child {
   border-bottom: 1px solid #bebfb9;
 }
+
+@media screen and (max-width: 48em) {
+  .system-status-report {
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+}
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index e68b75a..8d14442 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -11,6 +11,7 @@ global-styling:
       css/components/breadcrumb.css: {}
       css/components/buttons.css: {}
       css/components/colors.css: {}
+      css/components/counter.css: {}
       css/components/messages.css: {}
       css/components/dropbutton.component.css: {}
       css/components/entity-meta.css: {}
@@ -28,6 +29,7 @@ global-styling:
       css/components/search-admin-settings.css: {}
       css/components/tablesort-indicator.css: {}
       css/components/system-status-report.css: {}
+      css/components/system-status-report-counters.css: {}
       css/components/tabs.css: {}
       css/components/views-ui.css: {}
     layout:
diff --git a/core/themes/stable/css/system/system.admin.css b/core/themes/stable/css/system/system.admin.css
index c8e20cf..e6d57ae 100644
--- a/core/themes/stable/css/system/system.admin.css
+++ b/core/themes/stable/css/system/system.admin.css
@@ -200,39 +200,6 @@ small .admin-link:after {
   background-position: top 50% right 0;
 }
 
-/* Status report. */
-.system-status-report__status-title {
-  position: relative;
-  vertical-align: top;
-  width: 25%;
-  padding: 10px 6px 10px 40px; /* LTR */
-  box-sizing: border-box;
-  font-weight: normal;
-}
-[dir="rtl"] .system-status-report__status-title {
-    padding: 10px 40px 10px 6px;
-}
-.system-status-report__status-icon:before {
-  content: "";
-  background-repeat: no-repeat;
-  height: 16px;
-  width: 16px;
-  display: block;
-  position: absolute;
-  left: 12px; /* LTR */
-  top: 12px;
-}
-[dir="rtl"] .system-status-report__status-icon:before  {
-  left: auto;
-  right: 12px;
-}
-.system-status-report__status-icon--error:before {
-  background-image: url(../../images/core/icons/e32700/error.svg);
-}
-.system-status-report__status-icon--warning:before {
-  background-image: url(../../images/core/icons/e29700/warning.svg);
-}
-
 /**
  * Appearance page.
  */
diff --git a/core/themes/stable/templates/admin/status-report.html.twig b/core/themes/stable/templates/admin/status-report.html.twig
index 7f4c600..a7746ba 100644
--- a/core/themes/stable/templates/admin/status-report.html.twig
+++ b/core/themes/stable/templates/admin/status-report.html.twig
@@ -11,6 +11,9 @@
  *   - description: (optional) The requirement's description.
  *   - severity_title: The title of the severity.
  *   - severity_status: Indicates the severity status.
+ * - error: The number of errors found.
+ * - warning: The number of warnings found.
+ * - info: The number of items which are neither errors nor warnings.
  *
  * @see template_preprocess_status_report()
  */