diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 899c49dd0cc9f3d5289e760ba0460ccf4f91b614..7148e84e711ee51eec103bf1e1227059d928d78a 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -32,7 +32,7 @@ function bartik_preprocess_html(&$variables) {
   }
 
   if (!empty($variables['page']['featured_top'])) {
-    $variables['attributes']['class'][] = 'featured-top';
+    $variables['attributes']['class'][] = 'has-featured-top';
   }
 
 }
diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css
index bb1d6edae3f769978c309143e83fc9481eb0d23b..1455eddf9161361fac38ab4234b1b97e2134aae3 100644
--- a/core/themes/bartik/css/components/admin.css
+++ b/core/themes/bartik/css/components/admin.css
@@ -24,7 +24,7 @@
   text-align: center;
   text-shadow: none;
 }
-#featured-top .demo-block {
+.featured-top .demo-block {
   font-size: 0.55em;
 }
 #header .demo-block {
diff --git a/core/themes/bartik/css/components/featured-top.css b/core/themes/bartik/css/components/featured-top.css
index c55bd59ec172cbf7a8abcf49444d6a32da357725..80724cfdb6c4f6e738f097459933904f3f4b6d43 100644
--- a/core/themes/bartik/css/components/featured-top.css
+++ b/core/themes/bartik/css/components/featured-top.css
@@ -1,6 +1,9 @@
-/* ----------------- Featured ----------------- */
+/**
+ * @file
+ * Visual styles for Bartik's featured top.
+ */
 
-#featured-top {
+.featured-top {
   text-align: center;
   font-size: 1.2em;
   font-weight: normal;
@@ -12,11 +15,11 @@
   border-bottom: 1px solid #e7e7e7;
   text-shadow: 1px 1px #fff;
 }
-#featured-top h2 {
+.featured-top h2 {
   font-size: 1.2em;
   line-height: 1;
 }
-#featured-top p {
+.featured-top p {
   margin: 0;
   padding: 0;
 }
diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css
index d2a25db44de642b7931ed028b90abe3e397ec861..de3e25e76024d1a790ffefa486b5cb3b45397fa6 100644
--- a/core/themes/bartik/css/components/messages.css
+++ b/core/themes/bartik/css/components/messages.css
@@ -5,7 +5,7 @@
   margin: 0 auto;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.featured-top #messages {
+.has-featured-top #messages {
   background: #f0f0f0;
   background: rgba(30, 50, 10, 0.08);
 }
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index a454b36e1775f6133c3dd4b93c251240ff555e21..1113a079dfe8a38c5a0728936dbfc914c862fb8b 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -10,7 +10,7 @@ body,
   min-height: 100%;
 }
 #header div.section,
-#featured-top aside.section,
+.featured-top__inner,
 #messages div.section,
 #main,
 #featured-bottom,
@@ -144,7 +144,7 @@ body,
 @media all and (min-width: 851px) {
 
   #header div.section,
-  #featured-top aside.section,
+  .featured-top__inner,
   #messages div.section,
   #main,
   #featured-bottom,
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 838089265a2f6471fd008f09e23d21b4a8fa4b0f..8429b447189b9cd7600b3dfe0f6715c1f360ed3f 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -115,8 +115,8 @@
       </div>
     {% endif %}
     {% if page.featured_top %}
-      <div id="featured-top">
-        <aside class="section clearfix" role="complementary">
+      <div class="featured-top">
+        <aside class="featured-top__inner clearfix" role="complementary">
           {{ page.featured_top }}
         </aside>
       </div>