diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk
index 8275d0f00..7d8844fff 100644
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -37,6 +37,7 @@
   {# Slots #}
   {% if component.slots.length %}
     <h2>Slots</h2>
+    <p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -67,6 +68,7 @@
   {# Properties #}
   {% if component.properties.length %}
     <h2>Attributes & Properties</h2>
+    <p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -113,6 +115,8 @@
   {# Methods #}
   {% if component.methods.length %}
     <h2>Methods</h2>
+    <p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
+
     <div class="table-scroll">
       <table class="component-table">
         <thead>
@@ -146,6 +150,7 @@
   {# Events #}
   {% if component.events.length %}
     <h2>Events</h2>
+    <p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -172,6 +177,7 @@
   {# Custom Properties #}
   {% if component.cssProperties.length %}
     <h2>CSS custom properties</h2>
+    <p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
 
     <div class="table-scroll">
       <table class="component-table">
@@ -200,33 +206,11 @@
     </div>
   {% endif %}
 
-  {# CSS Parts #}
-  {% if component.cssParts.length %}
-    <h2>CSS parts</h2>
-
-    <div class="table-scroll">
-      <table class="component-table">
-        <thead>
-          <tr>
-            <th class="table-name">Name</th>
-            <th class="table-description">Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for cssPart in component.cssParts %}
-            <tr>
-              <td class="table-name"><code>{{ cssPart.name }}</code></td>
-              <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  {% endif %}
-
   {# Custom States #}
   {% if component.cssStates.length %}
     <h2>Custom States</h2>
+    <p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
+
     <div class="table-scroll">
       <table class="component-table">
         <thead>
@@ -249,6 +233,31 @@
     </div>
   {% endif %}
 
+  {# CSS Parts #}
+  {% if component.cssParts.length %}
+    <h2>CSS parts</h2>
+    <p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
+
+    <div class="table-scroll">
+      <table class="component-table">
+        <thead>
+          <tr>
+            <th class="table-name">Name</th>
+            <th class="table-description">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for cssPart in component.cssParts %}
+            <tr>
+              <td class="table-name"><code>{{ cssPart.name }}</code></td>
+              <td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  {% endif %}
+
   {# Dependencies #}
   {% if component.dependencies.length %}
     <h2>Dependencies</h2>