diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 6d71afb..bd6bb34 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -10,11 +10,11 @@ global-styling:
       css/components/breadcrumb.css: {}
       css/components/captions.css: {}
       css/components/comments.css: {}
-      css/components/content.css: {}
       css/components/contextual.css: {}
       # @see https://www.drupal.org/node/2389735
       css/components/dropbutton.component.css: {}
       css/components/featured-top.css: {}
+      css/components/field.css: {}
       css/components/footer.css: {}
       css/components/form.css: {}
       css/components/forum.css: {}
@@ -22,6 +22,7 @@ global-styling:
       css/components/region-help.css: {}
       css/components/item-list.css: {}
       css/components/messages.css: {}
+      css/components/node.css: {}
       css/components/node-preview.css: {}
       css/components/pager.css: {}
       css/components/primary-menu.css: {}
diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css
index 1455edd..ec2197e 100644
--- a/core/themes/bartik/css/components/admin.css
+++ b/core/themes/bartik/css/components/admin.css
@@ -1,12 +1,12 @@
 /* ---------- Admin-specific Theming ---------- */
-.path-admin #content img {
+.path-admin .content img {
   margin-right: 15px; /* LTR */
 }
-[dir="rtl"] .path-admin #content img {
+[dir="rtl"] .path-admin .content img {
   margin-left: 15px;
   margin-right: 0;
 }
-.path-admin #content .simpletest-image img {
+.path-admin .content .simpletest-image img {
   margin: 0;
 }
 .path-admin #admin-dblog img {
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 9fcb73e..aec2597 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -97,6 +97,18 @@
   margin-right: 0;
   padding: 5px 5px 5px 2px;
 }
+/**
+ * @todo:
+ * unpublished nodes have class .node--unpublished
+ * change this to .comment--unpublished
+ */
+.unpublished .comment-text .comment-arrow {
+  border-left: 1px solid #fff4f4;
+  border-right: 1px solid #fff4f4;
+}
+.unpublished {
+  padding: 20px 15px 0;
+}
 .comment-footer {
   display: table-row;
 }
diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css
index 6c70680..b3ea3c0 100644
--- a/core/themes/bartik/css/components/content.css
+++ b/core/themes/bartik/css/components/content.css
@@ -1,194 +1,22 @@
 /* ----------------- Content ------------------ */
 
-.content,
-.node__content {
-  margin-top: 10px;
-}
-h1#page-title {
-  font-size: 2em;
-  line-height: 1;
-}
 #content h2 {
   margin-bottom: 2px;
   font-size: 1.429em;
   line-height: 1.4;
 }
-.node__content {
-  font-size: 1.071em;
-}
-.node--view-mode-teaser .node__content {
-  font-size: 1em;
-}
-.node--view-mode-teaser h2 {
-  margin-top: 0;
-  padding-top: 0.5em;
-}
-.node--view-mode-teaser h2 a {
-  color: #181818;
-}
-.node--view-mode-teaser {
-  border-bottom: 1px solid #d3d7d9;
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-}
-.node--view-mode-teaser.node--sticky {
-  background: #f9f9f9;
-  background: rgba(0, 0, 0, 0.024);
-  border: 1px solid #d3d7d9;
-  padding: 0 15px 15px;
-}
-.node--view-mode-teaser .node__content {
-  clear: none;
-  line-height: 1.6;
-}
-.node__meta {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 0.857em;
-  color: #68696b;
-  margin-bottom: -5px;
-}
-.node__meta .field-name-field-user-picture img {
-  float: left; /* LTR */
-  margin: 1px 20px 0 0; /* LTR */
-}
-[dir="rtl"] .node__meta .field-name-field-user-picture img {
-  float: right;
-  margin-left: 20px;
-  margin-right: 0;
-}
-.field-type-taxonomy-term-reference {
-  margin: 0 0 1.2em;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.field-type-taxonomy-term-reference .field-label {
-  font-weight: normal;
-  margin: 0;
-  padding-right: 5px; /* LTR */
-}
-[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
-  padding-left: 5px;
-  padding-right: 0;
-}
-.field-type-taxonomy-term-reference .field-label,
-.field-type-taxonomy-term-reference ul.links {
-  font-size: 0.8em;
-}
-.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label,
-.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links {
-  font-size: 0.821em;
-}
-.field-type-taxonomy-term-reference ul.links {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-.field-type-taxonomy-term-reference ul.links li {
-  float: left; /* LTR */
-  padding: 0 1em 0 0; /* LTR */
-  white-space: nowrap;
-}
-[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
-  padding: 0 0 0 1em;
-  float: right;
-}
-.node__links {
-  text-align: right; /* LTR */
-}
-[dir="rtl"] .node__links {
-  text-align: left;
-}
-@media all and (min-width: 560px) {
-  .node .field-type-image {
-    float: left; /* LTR */
-    margin: 0 1em 0 0; /* LTR */
-  }
-  [dir="rtl"] .node .field-type-image {
-    float: right;
-    margin: 0 0 0 1em;
-  }
-  .node .field-type-image + .field-type-image {
-    clear: both;
-  }
-}
-.field-type-image img,
-.field-name-field-user-picture img {
-  margin: 0 0 1em;
-}
 ul.links {
   color: #68696b;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.821em;
 }
-.node--unpublished,
-.unpublished {
+.node--unpublished {
   padding: 20px 15px 0;
 }
-.node--unpublished .comment-text .comment-arrow,
-.unpublished .comment-text .comment-arrow {
+.node--unpublished .comment-text .comment-arrow {
   border-left: 1px solid #fff4f4;
   border-right: 1px solid #fff4f4;
 }
-.node-preview-container {
-  background: #d1e8f5;
-  background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4);
-  background-image: linear-gradient(to bottom, #d1e8f5, #d3e8f4);
-  font-family: Arial, sans-serif;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3333);
-  position: fixed;
-  z-index: 499;
-  width: 100%;
-  padding: 10px;
-}
-.node-preview-backlink {
-  background-color: #419ff1;
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5);
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #419ff1, #1076d5); /* LTR */
-  border: 1px solid #0048c8;
-  border-radius: .4em;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
-  color: #fff;
-  font-size: 0.9em;
-  line-height: normal;
-  margin: 0;
-  padding: 4px 1em 4px 0.6em; /* LTR */
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
-}
-[dir="rtl"] .node-preview-backlink {
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #419ff1, #1076d5);
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #419ff1, #1076d5);
-  padding: 4px 0.6em 4px 1em;
-  float: right;
-}
-.node-preview-backlink:focus,
-.node-preview-backlink:hover {
-  background-color: #419cf1;
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef);
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef); /* LTR */
-  border: 1px solid #0048c8;
-  text-decoration: none;
-  color: #fff;
-}
-[dir="rtl"] .node-preview-backlink:focus,
-[dir="rtl"] .node-preview-backlink:hover {
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #59abf3, #2a90ef);
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #59abf3, #2a90ef);
-}
-.node-preview-backlink:active {
-  background-color: #0e69be;
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef);
-  background: url(../../../../misc/icons/000000/chevron-left.svg) left no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef); /* LTR */
-  border: 1px solid #0048c8;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
-}
-.node-preview-backlink:active {
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, -webkit-linear-gradient(top, #0e69be, #2a93ef);
-  background: url(../../../../misc/icons/000000/chevron-right.svg) right no-repeat, linear-gradient(to bottom, #0e69be, #2a93ef);
-}
-.node-preview-backlink::before {
-  content: '';
-  width: 10px;
-  display: inline-block;
-}
 .region-content ul,
 .region-content ol {
   margin: 1em 0;
diff --git a/core/themes/bartik/css/components/field.css b/core/themes/bartik/css/components/field.css
new file mode 100644
index 0000000..ded40d6
--- /dev/null
+++ b/core/themes/bartik/css/components/field.css
@@ -0,0 +1,63 @@
+/**
+ * @file
+ * Visual styles for Bartik's node component.
+ */
+
+.field-type-taxonomy-term-reference {
+  margin: 0 0 1.2em;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.field-type-taxonomy-term-reference .field-label {
+  font-weight: normal;
+  margin: 0;
+  padding-right: 5px; /* LTR */
+}
+[dir="rtl"] .field-type-taxonomy-term-reference .field-label {
+  padding-left: 5px;
+  padding-right: 0;
+}
+.field-type-taxonomy-term-reference .field-label,
+.field-type-taxonomy-term-reference ul.links {
+  font-size: 0.8em;
+}
+.node--view-mode-teaser .field-type-taxonomy-term-reference .field-label,
+.node--view-mode-teaser .field-type-taxonomy-term-reference ul.links {
+  font-size: 0.821em;
+}
+.field-type-taxonomy-term-reference ul.links {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.field-type-taxonomy-term-reference ul.links li {
+  float: left; /* LTR */
+  padding: 0 1em 0 0; /* LTR */
+  white-space: nowrap;
+}
+[dir="rtl"] .field-type-taxonomy-term-reference ul.links li {
+  padding: 0 0 0 1em;
+  float: right;
+}
+.node__links {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .node__links {
+  text-align: left;
+}
+@media all and (min-width: 560px) {
+  .node .field-type-image {
+    float: left; /* LTR */
+    margin: 0 1em 0 0; /* LTR */
+  }
+  [dir="rtl"] .node .field-type-image {
+    float: right;
+    margin: 0 0 0 1em;
+  }
+  .node .field-type-image + .field-type-image {
+    clear: both;
+  }
+}
+.field-type-image img,
+.field-name-field-user-picture img {
+  margin: 0 0 1em;
+}
diff --git a/core/themes/bartik/css/components/form.css b/core/themes/bartik/css/components/form.css
index a5cfcf6..7c6b4d9 100644
--- a/core/themes/bartik/css/components/form.css
+++ b/core/themes/bartik/css/components/form.css
@@ -237,7 +237,7 @@ input.form-submit:focus {
   line-height: 1.2;
   margin-left: 120px; /* LTR */
 }
-#content h2.comment-form {
+.content h2.comment-form {
   margin-bottom: 0.5em;
 }
 .comment-form .form-textarea {
diff --git a/core/themes/bartik/css/components/node.css b/core/themes/bartik/css/components/node.css
new file mode 100644
index 0000000..267d5dd
--- /dev/null
+++ b/core/themes/bartik/css/components/node.css
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * Visual styles for Bartik's node component.
+ */
+
+.content,
+.node__content {
+  margin-top: 10px;
+}
+.node__content {
+  font-size: 1.071em;
+}
+.content__page-title {
+  font-size: 2em;
+  line-height: 1;
+}
+.content h2 {
+  margin-bottom: 2px;
+  font-size: 1.429em;
+  line-height: 1.4;
+}
+/* View mode teaser styles*/
+.node--view-mode-teaser .node__content {
+  font-size: 1em;
+}
+.node--view-mode-teaser h2 {
+  margin-top: 0;
+  padding-top: 0.5em;
+}
+.node--view-mode-teaser h2 a {
+  color: #181818;
+}
+.node--view-mode-teaser {
+  border-bottom: 1px solid #d3d7d9;
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+}
+.node--view-mode-teaser.node--sticky {
+  background: #f9f9f9;
+  background: rgba(0, 0, 0, 0.024);
+  border: 1px solid #d3d7d9;
+  padding: 0 15px 15px;
+}
+.node--view-mode-teaser .node__content {
+  clear: none;
+  line-height: 1.6;
+}
+/* Node metadata styles */
+.node__meta {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.857em;
+  color: #68696b;
+  margin-bottom: -5px;
+}
+.node__meta .field-name-field-user-picture img {
+  float: left; /* LTR */
+  margin: 1px 20px 0 0; /* LTR */
+}
+[dir="rtl"] .node__meta .field-name-field-user-picture img {
+  float: right;
+  margin-left: 20px;
+  margin-right: 0;
+}
+/* Unpublished node styles */
+.node--unpublished {
+  padding: 20px 15px 0;
+}
+.node--unpublished .comment-text .comment-arrow {
+  border-left: 1px solid #fff4f4;
+  border-right: 1px solid #fff4f4;
+}
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 1113a07..f6b0041 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -48,7 +48,7 @@ body,
 #main-wrapper {
   min-height: 300px;
 }
-#content .section,
+.content .section,
 .sidebar .section {
   padding: 0 15px;
 }
@@ -152,7 +152,7 @@ body,
   #site-footer__bottom {
     max-width: 1290px;
   }
-  #content,
+  .content,
   #sidebar-first,
   #sidebar-second,
   .region-featured-bottom-first,
@@ -166,7 +166,7 @@ body,
     float: left; /* LTR */
     position: relative;
   }
-  [dir="rtl"] #content,
+  [dir="rtl"] .content,
   [dir="rtl"] #sidebar-first,
   [dir="rtl"] #sidebar-second,
   [dir="rtl"] .region-featured-bottom-first,
@@ -178,30 +178,30 @@ body,
   [dir="rtl"] .region-footer-fourth {
     float: right;
   }
-  .layout-two-sidebars #content {
+  .layout-two-sidebars .content {
     margin-left: 25%;
     margin-right: 25%;
     width: 50%;
   }
-  .layout-one-sidebar #content {
+  .layout-one-sidebar .content {
     width: 75%;
   }
-  .layout-no-sidebars #content {
+  .layout-no-sidebars .content {
     width: 100%;
   }
-  .layout-sidebar-first #content {
+  .layout-sidebar-first .content {
     margin-left: 25%; /* LTR */
     margin-right: 0; /* LTR */
   }
-  [dir="rtl"] .layout-sidebar-first #content {
+  [dir="rtl"] .layout-sidebar-first .content {
     margin-left: 0;
     margin-right: 25%;
   }
-  .layout-sidebar-second #content {
+  .layout-sidebar-second .content {
     margin-right: 25%; /* LTR */
     margin-left: 0; /* LTR */
   }
-  [dir="rtl"] .layout-sidebar-second #content {
+  [dir="rtl"] .layout-sidebar-second .content {
     margin-right: 0;
     margin-left: 25%;
   }
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index 9a08d04..3f5e9bf 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -24,10 +24,10 @@ body.maintenance-page {
 .maintenance-page #main {
   margin: 0;
 }
-.maintenance-page #content .section {
+.maintenance-page .content .section {
   padding: 0 0 0 10px; /* LTR */
 }
-[dir="rtl"] .maintenance-page #content .section {
+[dir="rtl"] .maintenance-page .content .section {
   padding-left: 0;
   padding-right: 10px;
 }
diff --git a/core/themes/bartik/css/print.css b/core/themes/bartik/css/print.css
index 7c07339..b90fd95 100644
--- a/core/themes/bartik/css/print.css
+++ b/core/themes/bartik/css/print.css
@@ -23,8 +23,8 @@ body {
 .add-or-remove-shortcuts {
   display: none;
 }
-.one-sidebar #content,
-.two-sidebars #content {
+.one-sidebar .content,
+.two-sidebars .content {
   width: 100%;
 }
 #featured-bottom-wrapper {
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 8429b44..063b6c9 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -124,12 +124,12 @@
     <div id="main-wrapper" class="clearfix">
       <div id="main" class="clearfix">
         {{ page.breadcrumb }}
-        <main id="content" class="column" role="main">
+        <main class="content column" role="main">
           <section class="section">
-            <a id="main-content" tabindex="-1"></a>
+            <a class="main-content" tabindex="-1"></a>
             {{ title_prefix }}
             {% if title %}
-              <h1 class="title" id="page-title">
+              <h1 class="title" class="content__page-title">
                 {{ title }}
               </h1>
             {% endif %}