diff --git a/preview-src/docs-roles.adoc b/preview-src/docs-roles.adoc
index 3dd9d883..59e6c2c7 100644
--- a/preview-src/docs-roles.adoc
+++ b/preview-src/docs-roles.adoc
@@ -1,5 +1,5 @@
 = Docs roles with a long title
-:page-role: not-on-aura new-5.17
+:page-role: alpha aura-db-enterprise beta deprecated-5.17 invented-label new-5.17 not-on-aura
 :page-theme: docs
 :page-banner: warning
 :page-banner-text: Lorem ipsum dolor sit est.
@@ -22,7 +22,7 @@ Blocks with the appropriate roles have labels added.
 [role="label--new-5.17 label--enterprise-edition"]
 === (Discrete) H3 AuraDB Enterprise AND Not on Aura
 
-Lorem ipsum dolor sit
+Labels are not displayed for discrete headers.
 
 
 [role=label--aura-db-enterprise label--not-on-aura]
diff --git a/src/js/60-docs-roles.js b/src/js/60-docs-roles.js
index 4b6c867f..a132da83 100644
--- a/src/js/60-docs-roles.js
+++ b/src/js/60-docs-roles.js
@@ -25,9 +25,11 @@ document.addEventListener('DOMContentLoaded', function () {
     var label = role.replace('label--', '')
     var labelParts = label.split('-')
 
-    // label could be eg label--new-5.19 but in rolesData it's just new
-    label = rolesData[labelParts[0]] ? labelParts[0] : label
+    // label could be eg aura-db-enterprise - we use the full label
+    // label could be eg new-5.20 - we use 'new' for the label and add the version as text
+    label = (rolesData[label] && rolesData[label].category !== 'version') ? label : labelParts[0]
 
+    // ignore labels that are not defined in rolesData
     if (!rolesData[label]) {
       return
     }
@@ -63,12 +65,13 @@ document.addEventListener('DOMContentLoaded', function () {
   const roleDivs = document.querySelectorAll('body.docs:not(.docshome) *[class*="label--"]')
 
   roleDivs.forEach(function (roleDiv) {
-    // ignore spans because they're inline
-    // we only care about labels on block elements
-    // DIV or TABLE
-    if (roleDiv.nodeName === 'SPAN') return
-
     var roles = roleDiv.classList
+
+    // ignore:
+    // - spans because they're inline and we only care about labels on block elements DIV or TABLE
+    // - discrete headers
+    if (roleDiv.nodeName === 'SPAN' || [...roles].includes('discrete')) return
+
     roles = [...roles].sort().filter(function (c) {
       return (c.startsWith('label--'))
     })
@@ -79,6 +82,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     roles.forEach(function (role) {
       const labelDetails = getLabelDetails(role)
+
+      // remove the role from the parent div
+      roleDiv.classList.remove(role)
+
       if (typeof labelDetails === 'undefined') {
         return
       }
@@ -93,9 +100,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
       labelSpan.appendChild(document.createTextNode(labelDetails.text))
 
-      // remove the role from the parent div
-      roleDiv.classList.remove(role)
-
       labels.push(labelSpan)
     })