@@ -322,6 +322,14 @@ src/content/articles/internal-developer-portal-platform-self-service-actions/pdf
   ]}
 />
 
+### Stretching the badge out to the same size and centering text:
+
+<List
+  variant="badge-list"
+  classes={{
+    titleClass: "block w-full text-center",
+  }}
+
 ### Spacing out the boxes:
 
 <List
 
@@ -0,0 +1,29 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>User Avatar Icon</title>}
+  <path
+    d="M 23.547421,10.930935 13.068776,0.45285245 c -0.603095,-0.60346993 -1.581847,-0.60346993 -2.185692,0 L 8.707142,2.6287942 11.467429,5.3890808 c 0.641438,-0.2167504 1.377002,-0.071344 1.888316,0.4399696 0.513751,0.5145948 0.658126,1.25644 0.436126,1.8999413 l 2.660161,2.6602553 c 0.643595,-0.221719 1.38619,-0.07828 1.900223,0.436594 0.718407,0.718127 0.718407,1.882035 0,2.600631 -0.718596,0.718688 -1.882504,0.718688 -2.601474,0 -0.540376,-0.540939 -0.673877,-1.334534 -0.400314,-2.000254 L 12.86965,8.9454003 12.869369,15.473882 a 1.8581286,1.8581286 0 0 1 0.486376,0.347813 c 0.718407,0.718126 0.718407,1.882129 0,2.601286 -0.718595,0.718314 -1.883066,0.718314 -2.60063,0 -0.718408,-0.719157 -0.718408,-1.883066 0,-2.601192 a 1.8425661,1.8425661 0 0 1 0.60197,-0.401345 V 8.8311188 A 1.816691,1.816691 0 0 1 10.755115,8.4297743 C 10.210801,7.8862107 10.079926,7.0875529 10.358833,6.4192078 L 7.6378274,3.6979213 0.45281338,10.882467 c -0.60375117,0.604032 -0.60375117,1.582878 0,2.186441 L 10.931646,23.547179 c 0.603283,0.603563 1.581847,0.603563 2.18588,0 L 23.547327,13.117565 c 0.603564,-0.603751 0.603564,-1.58316 0,-2.18663"
+  ></path>
+</svg>
@@ -132,4 +132,34 @@ describe('List (Astro)', () => {
       expect(lead?.getAttribute('style')).toBeNull()
     })
   })
+
+  test('applies interactive card styling for the card-grid-list variant', async () => {
+    const List = (await import('@components/List/index.astro')).default
+
+    const renderedHtml = await container.renderToString(List, {
+      props: {
+        variant: 'card-grid-list',
+        items: [
+          {
+            lead: 'Owner clarity matters.',
+            text: 'Each card should clearly communicate its primary action.',
+          },
+        ],
+      },
+    })
+
+    await withJsdomEnvironment(async ({ window }) => {
+      window.document.body.innerHTML = renderedHtml
+
+      const card = window.document.querySelector('ul li')
+      const lead = window.document.querySelector('ul li em')
+
+      expect(card).toBeTruthy()
+      expect(card?.className).toContain('hover:-translate-y-1')
+      expect(card?.className).toContain('hover:bg-page-base')
+      expect(card?.className).toContain('hover:shadow-md')
+      expect(card?.className).toContain('focus-within:border-primary')
+      expect(lead?.textContent).toContain('Owner clarity matters.')
+    })
+  })
 })
@@ -17,7 +17,10 @@ export type Props = {
 const { items, classes }: Props = Astro.props
 
 const ulClass = ["grid grid-cols-1 md:grid-cols-2 gap-4", classes?.ul]
-const liClass = ["bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors", classes?.li]
+const liClass = [
+  "bg-page-offset border border-trim rounded-lg p-5 transition-all duration-200 ease-out hover:-translate-y-1 hover:border-primary hover:bg-page-base hover:shadow-md focus-within:-translate-y-1 focus-within:border-primary focus-within:bg-page-base focus-within:shadow-md",
+  classes?.li,
+]
 const emClass = ["block text-page-inverse font-semibold not-italic mb-2", classes?.em]
 ---
 
 
@@ -28,7 +28,7 @@ Every dashboard you create is a promise to maintain it. Dashboards without owner
 Dashboard accumulation isn't anyone's fault — it's a natural consequence of how teams work. Every dashboard enters your inventory through a legitimate path, and almost none ever leave.
 
 <List
-  variant="check-icons-list"
+  variant="zebra-list"
   items={[
     {
       lead: "New services get dashboards",
@@ -53,8 +53,11 @@ Dashboard accumulation isn't anyone's fault — it's a natural consequence of ho
   ]}
 />
 
+Each of these patterns has a different expected lifecycle, but they all share the same outcome: permanent residency in your Grafana instance. Understanding the intended lifespan of each type is key to building cleanup policies that make sense — you wouldn't apply the same retention rules to a service overview dashboard and an incident debug dashboard.
+
 <Table
-  variant="vertical-column-delineation-table"
+  variant="criteria-highlight-table"
+  fullWidth={false}
   content={{
     figure: "Dashboard types and their lifecycle patterns.",
     thead: {
@@ -89,18 +92,21 @@ Dashboard accumulation isn't anyone's fault — it's a natural consequence of ho
 
 The asymmetry is stark: creating a dashboard takes minutes, deciding to delete one feels like it requires a committee.
 
-Beyond the clutter, dashboards aren't free. Every panel issues queries to your backend — Prometheus, InfluxDB, your SQL warehouse. A dashboard with 20 panels viewed by 50 people triggers 1,000 queries every refresh cycle. Grafana-managed alerts linked to dashboard panels run continuously, checking for firing conditions even when nobody's watching. That DEBUG dashboard from last quarter? Its alert rules are still querying your metrics database every minute.
-
 <Newsletter />
 
+Beyond the clutter, dashboards aren't free. Every panel issues queries to your backend — Prometheus, InfluxDB, your SQL warehouse. A dashboard with 20 panels viewed by 50 people triggers 1,000 queries every refresh cycle. Grafana-managed alerts linked to dashboard panels run continuously, checking for firing conditions even when nobody's watching. That DEBUG dashboard from last quarter? Its alert rules are still querying your metrics database every minute.
+
 ## Measuring Dashboard Health
 
 You can't make evidence-based decisions about what to keep or delete without usage data. The first step in any hygiene program is instrumenting your Grafana instance to track who's looking at what.
 
 For each dashboard, you need four categories of metrics:
 
 <List
-  variant="check-icons-list"
+  variant="side-by-side-list"
+  classes={{
+    wrapper: "sm:mr-12 mb-6",
+  }}
   items={[
     {
       lead: "View metrics",
@@ -130,41 +136,51 @@ Raw metrics are useful but overwhelming when you have hundreds of dashboards. A
 A reasonable weighting:
 
 <List
-  variant="check-icons-list"
+  variant="badge-list"
+  classes={{
+    titleClass: "block w-full text-center",
+  }}
   items={[
     {
-      lead: "Usage score (35%)",
-      text: "Based on views and unique viewers in the last 30 days. Zero views scores zero; 100+ views with 10+ unique viewers scores full marks.",
+      title: "Usage score (35%)",
+      lead: "Based on views and unique viewers in the last 30 days.",
+      text: "Zero views scores zero; 100+ views with 10+ unique viewers scores full marks.",
     },
     {
-      lead: "Freshness score (25%)",
-      text: "Based on time since last edit. Edited in the last 30 days scores 100; over a year without edits scores 0.",
+      title: "Freshness score (25%)",
+      lead: "Based on time since last edit.",
+      text: "Edited in the last 30 days scores 100; over a year without edits scores 0.",
     },
     {
-      lead: "Ownership score (25%)",
-      text: "Has an assigned owner? Has a team tag? Has any tags at all? Each adds points.",
+      title: "Ownership score (25%)",
+      lead: "Has an assigned owner?",
+      text: "Has a team tag? Has any tags at all? Each adds points.",
     },
     {
-      lead: "Quality score (15%)",
-      text: "Penalize broken panels heavily (they actively mislead), excessive complexity (30+ panels), and suspiciously simple dashboards (fewer than 3 panels might be incomplete).",
+      title: "Quality score (15%)",
+      lead: "Penalize broken panels heavily (they actively mislead),",
+      text: "excessive complexity (30+ panels), and suspiciously simple dashboards (fewer than 3 panels might be incomplete).",
     },
   ]}
 />
 
 Beyond the numeric score, flag dashboards with specific problems: "no-recent-views," "stale," "no-owner," "broken-panels," "unmaintained," "likely-clone" (title contains "copy"), or "incident-artifact" (title contains "debug").
 
-These flags help prioritize review. A dashboard scoring 40 with "broken-panels" needs immediate attention — it's actively misleading anyone who looks at it. A dashboard scoring 40 with "no-recent-views" can wait for the next cleanup cycle.
-
 <Callout type="success">
 Automate usage tracking from day one. Without data, hygiene decisions become political debates instead of evidence-based choices. "Nobody uses this dashboard" is much more persuasive when you can prove it with numbers.
 </Callout>
 
+These flags help prioritize review. A dashboard scoring 40 with "broken-panels" needs immediate attention — it's actively misleading anyone who looks at it. A dashboard scoring 40 with "no-recent-views" can wait for the next cleanup cycle.
+
 ## Making Cleanup Stick
 
 Process alone won't fix dashboard rot. People hoard dashboards because deletion feels risky and there's no reward for tidiness. You need to change the incentives — and have responses ready for the inevitable objections.
 
 <List
-  variant="check-icons-list"
+  variant="timeline-list"
+  classes={{
+    wrapper: "sm:ml-6 sm:mr-12 mb-6",
+  }}
   items={[
     {
       lead: "\"I might need it someday.\"",
@@ -199,6 +215,8 @@ The biggest obstacle to dashboard hygiene isn't technical — it's cultural. Peo
 
 Dashboard hygiene isn't a one-time project. It's ongoing maintenance, like any other operational practice.
 
+If you do nothing else: implement usage tracking and run one cleanup campaign. Those two actions will give you the data to make informed decisions and the momentum to build a sustainable hygiene practice.
+
 <Download
   resource="grafana-dashboard-hygiene-pruning-actionable-metrics"
   title="Download the Dashboard Hygiene Guide"
@@ -219,6 +237,4 @@ Dashboard hygiene isn't a one-time project. It's ongoing maintenance, like any o
   ]}
 />
 
-If you do nothing else: implement usage tracking and run one cleanup campaign. Those two actions will give you the data to make informed decisions and the momentum to build a sustainable hygiene practice.
-
 The goal isn't the smallest possible dashboard count. It's ensuring that every dashboard that exists is accurate, maintained, and serves a clear purpose. When an engineer searches for "payments" during an incident, they should find 3 relevant dashboards, not 30 stale ones.