Feature UI (#17069)

* 16649 general contrast issues (#16759)

* fixes #16647: navigation contrast issues updated

* fixes #16651: table contrast issues new

* fixed #16649: general contrast issues

* fixes #16649: feedback changes

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>

* 16648 dashboard contrast issues (#16824)

* fixed #16648: dashboard contrast issues

* reinstate amendment to 16649

* fixed #16648: created gridstack override and removed inline bug fix

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>

* fixed #16853: accessibility issues

* fixed #16847: updated font (#16848)

* fixed #16847: updated font

* fixed #16847: changed font to local and added current font as fallback

* fixed #16847: removed inter and added padding to page header

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16849 document hierarchy issues (#16875)

* fixed #16849: h elements not in sequential order

* fixed #16849: Lists do not contain only li elements

* fixed #16849: fixed h hierarchy on rack object pages

* Remove standalone h5 classes

* Remove unnecessary line breaks

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16650 button contrast issues (#16845)

* fixed #16650: button contrast issues

* fixed #16650: green bg text contrast issue

* Revert errant JS resource updates

* Revert custom button colors

* Fix indentation

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16907 web UI refresh (#16915)

* closes #16907: web ui refresh

* closes #16907: changed default widget color to primary color

* closes #16907: removed comma

* Revert dashboard widget color changes

* Rename logo images for consistency

* Restore original dashboard widget config

* Remove .navbar-brand-autodark from logo

* Restore logo file names

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* 16394 distinguish product edition (#16924)

* closes #16907: web ui refresh

* closes #16907: changed default widget color to primary color

* closes #16907: removed comma

* closes #16394: distinguish product edition

* Revert dashboard changes

* Clean up redundant styling (merge error)

* removed labs logo and added sub text for all editions

* fixed motif bug

* Fix "flashing" of side nav under dark mode

* Use title case for edition label

* altered edition text style

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Query release features to toggle commercial theme

* fixes dark mode primary button contrast issue

* fixes #16913: hidden admin nav link (#16978)

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* fixed 16852: misc accessbility problems (#16977)

* fixed 16852: misc accessbility problems

* Restore tooltip text

* Add translation support

* Add missing i18n

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* fixes issues in #16850 (#16986)

* fixes issues in #16850: issue 3 and 5

* Add link text for 'clear' button on table column

* Translate aria label

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Jeremy Stretch <jstretch@netboxlabs.com>

* Use alternate footer links for commercial releases

* Remove Inter font

* Adjust base font weight to 500

* Retain default text color for hyperlinks inside tables

* Logo & edition cleanup

* Move dashboard styling

* Misc cleanup

* Remove unused styles

* Misc cleanup & refactoring

---------

Co-authored-by: Andrew Gormley <andrewgormley91@gmail.com>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>

netbox/netbox/tables/columns.py

@@ -173,6 +173,7 @@ class ToggleColumn(tables.CheckBoxColumn):
             kwargs['attrs'] = {
                 'th': {
                     'class': 'w-1',
+                    'aria-label': _('Select all'),
                 },
                 'td': {
                     'class': 'w-1',
@@ -284,7 +285,7 @@ class ActionsColumn(tables.Column):
                 if len(self.actions) == 1 or (self.split_actions and idx == 0):
                     dropdown_class = attrs.css_class
                     button = (
-                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button">'
+                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button" aria-label="{attrs.title}">'
                         f'<i class="mdi mdi-{attrs.icon}"></i></a>'
                     )
 

netbox/project-static/img/logo_netbox_bright_teal.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1299.6 366">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00f2d4;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-2" d="M337.27,228.59c-12.35,0-22.88,7.8-26.94,18.74h-174.71c-2.9-7.83-9.12-14.04-16.95-16.95V55.67c10.94-4.06,18.74-14.59,18.74-26.94,0-15.87-12.86-28.73-28.73-28.73s-28.73,12.86-28.73,28.73c0,12.35,7.8,22.88,18.74,26.94v174.71c-10.94,4.06-18.74,14.59-18.74,26.94,0,4.28.94,8.33,2.62,11.98l-41.85,41.85c-3.65-1.68-7.7-2.62-11.98-2.62-15.87,0-28.73,12.86-28.73,28.73s12.86,28.73,28.73,28.73,28.73-12.86,28.73-28.73c0-4.28-.94-8.33-2.62-11.98l41.85-41.85c3.65,1.68,7.7,2.62,11.98,2.62,12.35,0,22.88-7.8,26.94-18.74h174.71c4.06,10.94,14.59,18.74,26.94,18.74,15.87,0,28.73-12.86,28.73-28.73s-12.86-28.73-28.73-28.73Z"/>
+      <path class="cls-1" d="M366,28.73c0,15.87-12.86,28.73-28.73,28.73-4.28,0-8.33-.94-11.98-2.62l-41.85,41.85c1.68,3.65,2.62,7.7,2.62,11.98,0,12.35-7.8,22.88-18.74,26.94v174.71c10.94,4.06,18.74,14.59,18.74,26.94,0,15.87-12.86,28.73-28.73,28.73s-28.73-12.86-28.73-28.73c0-12.35,7.8-22.88,18.74-26.94v-174.71c-7.83-2.9-14.04-9.12-16.95-16.95H55.67c-4.06,10.94-14.59,18.74-26.94,18.74-15.87,0-28.73-12.86-28.73-28.73s12.86-28.73,28.73-28.73c12.35,0,22.88,7.8,26.94,18.74h174.71c4.06-10.94,14.59-18.74,26.94-18.74,4.28,0,8.33.94,11.98,2.62l41.85-41.85c-1.68-3.65-2.62-7.7-2.62-11.98,0-15.87,12.86-28.73,28.73-28.73s28.73,12.86,28.73,28.73ZM579.76,136.45c-4.63-4.38-10.18-7.68-16.24-9.66-6.09-2.07-12.48-3.11-18.91-3.08-9.75-.17-19.37,2.17-27.95,6.78-2.68,1.56-5.23,3.35-7.61,5.34v-9.04h-34.53v134.64h34.53v-69.06c-.08-5.7.68-11.38,2.26-16.86,1.26-4.03,3.36-7.74,6.17-10.89,2.41-2.69,5.44-4.74,8.84-5.96,3.71-1.26,7.6-1.89,11.51-1.85,2.99,0,5.97.41,8.84,1.23,2.62.91,5,2.38,6.99,4.32,2.11,2.28,3.78,4.93,4.93,7.81,1.32,4.12,1.95,8.42,1.85,12.74v78.52h34.53v-85.1c.22-7.94-1.18-15.84-4.11-23.23-2.37-6.33-6.16-12.03-11.1-16.65ZM744.41,169.34c2.28,8.16,3.46,16.6,3.49,25.08v13.77h-98.46c.38,2.33,1.22,4.57,2.47,6.58,1.83,3.77,4.51,7.08,7.81,9.66,3.42,2.8,7.32,4.96,11.51,6.37,4.42,1.57,9.08,2.33,13.77,2.26,5.63.24,11.21-1.19,16.03-4.11,5.19-3.31,9.78-7.48,13.57-12.33l3.49-4.11,26.31,20.14-3.29,4.52c-14.18,18.09-34.12,27.34-59.2,27.34-9.78.09-19.49-1.72-28.57-5.34-8.34-3.34-15.84-8.46-21.99-15.01-6.02-6.49-10.7-14.1-13.77-22.4-3.18-8.83-4.78-18.16-4.73-27.54-.02-9.49,1.72-18.9,5.14-27.75,3.36-8.35,8.32-15.96,14.59-22.4,6.24-6.44,13.72-11.54,21.99-15.01,8.74-3.58,18.1-5.4,27.54-5.34,11.92,0,21.99,2.06,30.42,6.37,7.92,3.9,14.87,9.52,20.35,16.44,5.36,6.74,9.28,14.5,11.51,22.82ZM711.31,178.39c-.43-2.36-.98-4.69-1.64-6.99-1.14-3.45-3.04-6.61-5.55-9.25-2.45-2.78-5.56-4.9-9.04-6.17-8.68-3.42-18.36-3.27-26.93.41-3.87,1.69-7.37,4.13-10.28,7.19-2.81,2.83-5.05,6.18-6.58,9.87-.73,1.58-1.28,3.23-1.64,4.93h61.66ZM827.24,230.8c-2.56.57-5.18.84-7.81.82-2.41.12-4.82-.37-6.99-1.44-1.42-1.08-2.55-2.49-3.29-4.11-.93-2.36-1.42-4.87-1.44-7.4-.21-3.29-.41-6.58-.41-9.87v-50.57h33.71v-31.45h-33.71v-34.53h-34.53v34.53h-21.79v31.45h21.79v58.79c-.04,5.15.24,10.3.82,15.42.38,5.56,1.99,10.97,4.73,15.83,3.21,5.18,7.85,9.32,13.36,11.92,5.76,2.88,13.36,4.32,23.43,4.32,3.71-.04,7.42-.31,11.1-.82,4.47-.56,8.79-1.95,12.74-4.11l2.88-1.44v-34.33l-8.43,4.93c-1.93,1.02-4.01,1.72-6.17,2.06ZM997.03,166.46c3.16,8.91,4.76,18.3,4.73,27.75.04,9.32-1.56,18.57-4.73,27.34-3.07,8.3-7.75,15.92-13.77,22.4-6.1,6.56-13.53,11.74-21.79,15.21-8.94,3.62-18.51,5.44-28.16,5.34-9.17-.04-18.22-2.07-26.52-5.96-4.12-1.71-7.93-4.07-11.31-6.99v9.87h-34.53V53.41h34.53v83.04c3.23-2.59,6.75-4.8,10.48-6.58,8.54-4.07,17.88-6.18,27.34-6.17,9.65-.09,19.22,1.72,28.16,5.34,8.18,3.52,15.58,8.62,21.79,15.01,5.91,6.58,10.57,14.17,13.77,22.4ZM963.11,178.8c-1.41-4.39-3.8-8.39-6.99-11.72-3.07-3.26-6.78-5.85-10.89-7.61-9.47-3.57-19.92-3.57-29.39,0-4.12,1.76-7.83,4.35-10.89,7.61-3.12,3.37-5.5,7.37-6.99,11.72-1.71,4.96-2.55,10.17-2.47,15.42-.05,5.24.78,10.45,2.47,15.42,1.54,4.27,3.91,8.18,6.99,11.51,3.01,3.32,6.74,5.92,10.89,7.61,9.42,3.83,19.97,3.83,29.39,0,4.16-1.68,7.88-4.28,10.89-7.61,3.15-3.28,5.54-7.21,6.99-11.51,1.68-4.96,2.52-10.18,2.47-15.42.07-5.24-.77-10.46-2.47-15.42ZM1136.6,244.16c-28.24,27.15-72.89,27.15-101.13,0-13.17-13.29-20.56-31.24-20.55-49.95-.1-28.4,16.95-54.05,43.17-64.95,17.9-7.4,38.01-7.4,55.91,0,26.14,11,43.15,36.59,43.17,64.95,0,18.71-7.38,36.66-20.55,49.95ZM1118.51,178.8c-1.42-4.34-3.73-8.33-6.78-11.72-3.1-3.22-6.8-5.8-10.89-7.61-9.55-3.56-20.05-3.56-29.6,0-4.09,1.81-7.79,4.39-10.89,7.61-3.05,3.39-5.36,7.38-6.78,11.72-1.88,4.92-2.79,10.15-2.67,15.42-.08,5.26.82,10.49,2.67,15.42,1.47,4.25,3.77,8.17,6.78,11.51,3.05,3.28,6.77,5.87,10.89,7.61,9.49,3.84,20.11,3.84,29.6,0,4.13-1.74,7.84-4.33,10.89-7.61,3.01-3.34,5.32-7.26,6.78-11.51,1.75-4.95,2.66-10.16,2.67-15.42,0-5.25-.9-10.47-2.67-15.42ZM1291.58,126.79h-42.34l-26.52,39.47-26.93-39.47h-44.4l48.1,63.1-54.27,71.53h42.96l33.5-47.69,33.71,47.69h44.19l-54.27-71.53,46.25-63.1Z"/>
+    </g>
+  </g>
+</svg>

netbox/project-static/img/logo_netbox_dark_teal.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1299.6 366">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #00857d;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #001423;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-2" d="M337.27,228.59c-12.35,0-22.88,7.8-26.94,18.74h-174.71c-2.9-7.83-9.12-14.04-16.95-16.95V55.67c10.94-4.06,18.74-14.59,18.74-26.94,0-15.87-12.86-28.73-28.73-28.73s-28.73,12.86-28.73,28.73c0,12.35,7.8,22.88,18.74,26.94v174.71c-10.94,4.06-18.74,14.59-18.74,26.94,0,4.28.94,8.33,2.62,11.98l-41.85,41.85c-3.65-1.68-7.7-2.62-11.98-2.62-15.87,0-28.73,12.86-28.73,28.73s12.86,28.73,28.73,28.73,28.73-12.86,28.73-28.73c0-4.28-.94-8.33-2.62-11.98l41.85-41.85c3.65,1.68,7.7,2.62,11.98,2.62,12.35,0,22.88-7.8,26.94-18.74h174.71c4.06,10.94,14.59,18.74,26.94,18.74,15.87,0,28.73-12.86,28.73-28.73s-12.86-28.73-28.73-28.73Z"/>
+      <path class="cls-1" d="M366,28.73c0,15.87-12.86,28.73-28.73,28.73-4.28,0-8.33-.94-11.98-2.62l-41.85,41.85c1.68,3.65,2.62,7.7,2.62,11.98,0,12.35-7.8,22.88-18.74,26.94v174.71c10.94,4.06,18.74,14.59,18.74,26.94,0,15.87-12.86,28.73-28.73,28.73s-28.73-12.86-28.73-28.73c0-12.35,7.8-22.88,18.74-26.94v-174.71c-7.83-2.9-14.04-9.12-16.95-16.95H55.67c-4.06,10.94-14.59,18.74-26.94,18.74-15.87,0-28.73-12.86-28.73-28.73s12.86-28.73,28.73-28.73c12.35,0,22.88,7.8,26.94,18.74h174.71c4.06-10.94,14.59-18.74,26.94-18.74,4.28,0,8.33.94,11.98,2.62l41.85-41.85c-1.68-3.65-2.62-7.7-2.62-11.98,0-15.87,12.86-28.73,28.73-28.73s28.73,12.86,28.73,28.73ZM579.76,136.45c-4.63-4.38-10.18-7.68-16.24-9.66-6.09-2.07-12.48-3.11-18.91-3.08-9.75-.17-19.37,2.17-27.95,6.78-2.68,1.56-5.23,3.35-7.61,5.34v-9.04h-34.53v134.64h34.53v-69.06c-.08-5.7.68-11.38,2.26-16.86,1.26-4.03,3.36-7.74,6.17-10.89,2.41-2.69,5.44-4.74,8.84-5.96,3.71-1.26,7.6-1.89,11.51-1.85,2.99,0,5.97.41,8.84,1.23,2.62.91,5,2.38,6.99,4.32,2.11,2.28,3.78,4.93,4.93,7.81,1.32,4.12,1.95,8.42,1.85,12.74v78.52h34.53v-85.1c.22-7.94-1.18-15.84-4.11-23.23-2.37-6.33-6.16-12.03-11.1-16.65ZM744.41,169.34c2.28,8.16,3.46,16.6,3.49,25.08v13.77h-98.46c.38,2.33,1.22,4.57,2.47,6.58,1.83,3.77,4.51,7.08,7.81,9.66,3.42,2.8,7.32,4.96,11.51,6.37,4.42,1.57,9.08,2.33,13.77,2.26,5.63.24,11.21-1.19,16.03-4.11,5.19-3.31,9.78-7.48,13.57-12.33l3.49-4.11,26.31,20.14-3.29,4.52c-14.18,18.09-34.12,27.34-59.2,27.34-9.78.09-19.49-1.72-28.57-5.34-8.34-3.34-15.84-8.46-21.99-15.01-6.02-6.49-10.7-14.1-13.77-22.4-3.18-8.83-4.78-18.16-4.73-27.54-.02-9.49,1.72-18.9,5.14-27.75,3.36-8.35,8.32-15.96,14.59-22.4,6.24-6.44,13.72-11.54,21.99-15.01,8.74-3.58,18.1-5.4,27.54-5.34,11.92,0,21.99,2.06,30.42,6.37,7.92,3.9,14.87,9.52,20.35,16.44,5.36,6.74,9.28,14.5,11.51,22.82ZM711.31,178.39c-.43-2.36-.98-4.69-1.64-6.99-1.14-3.45-3.04-6.61-5.55-9.25-2.45-2.78-5.56-4.9-9.04-6.17-8.68-3.42-18.36-3.27-26.93.41-3.87,1.69-7.37,4.13-10.28,7.19-2.81,2.83-5.05,6.18-6.58,9.87-.73,1.58-1.28,3.23-1.64,4.93h61.66ZM827.24,230.8c-2.56.57-5.18.84-7.81.82-2.41.12-4.82-.37-6.99-1.44-1.42-1.08-2.55-2.49-3.29-4.11-.93-2.36-1.42-4.87-1.44-7.4-.21-3.29-.41-6.58-.41-9.87v-50.57h33.71v-31.45h-33.71v-34.53h-34.53v34.53h-21.79v31.45h21.79v58.79c-.04,5.15.24,10.3.82,15.42.38,5.56,1.99,10.97,4.73,15.83,3.21,5.18,7.85,9.32,13.36,11.92,5.76,2.88,13.36,4.32,23.43,4.32,3.71-.04,7.42-.31,11.1-.82,4.47-.56,8.79-1.95,12.74-4.11l2.88-1.44v-34.33l-8.43,4.93c-1.93,1.02-4.01,1.72-6.17,2.06ZM997.03,166.46c3.16,8.91,4.76,18.3,4.73,27.75.04,9.32-1.56,18.57-4.73,27.34-3.07,8.3-7.75,15.92-13.77,22.4-6.1,6.56-13.53,11.74-21.79,15.21-8.94,3.62-18.51,5.44-28.16,5.34-9.17-.04-18.22-2.07-26.52-5.96-4.12-1.71-7.93-4.07-11.31-6.99v9.87h-34.53V53.41h34.53v83.04c3.23-2.59,6.75-4.8,10.48-6.58,8.54-4.07,17.88-6.18,27.34-6.17,9.65-.09,19.22,1.72,28.16,5.34,8.18,3.52,15.58,8.62,21.79,15.01,5.91,6.58,10.57,14.17,13.77,22.4ZM963.11,178.8c-1.41-4.39-3.8-8.39-6.99-11.72-3.07-3.26-6.78-5.85-10.89-7.61-9.47-3.57-19.92-3.57-29.39,0-4.12,1.76-7.83,4.35-10.89,7.61-3.12,3.37-5.5,7.37-6.99,11.72-1.71,4.96-2.55,10.17-2.47,15.42-.05,5.24.78,10.45,2.47,15.42,1.54,4.27,3.91,8.18,6.99,11.51,3.01,3.32,6.74,5.92,10.89,7.61,9.42,3.83,19.97,3.83,29.39,0,4.16-1.68,7.88-4.28,10.89-7.61,3.15-3.28,5.54-7.21,6.99-11.51,1.68-4.96,2.52-10.18,2.47-15.42.07-5.24-.77-10.46-2.47-15.42ZM1136.6,244.16c-28.24,27.15-72.89,27.15-101.13,0-13.17-13.29-20.56-31.24-20.55-49.95-.1-28.4,16.95-54.05,43.17-64.95,17.9-7.4,38.01-7.4,55.91,0,26.14,11,43.15,36.59,43.17,64.95,0,18.71-7.38,36.66-20.55,49.95ZM1118.51,178.8c-1.42-4.34-3.73-8.33-6.78-11.72-3.1-3.22-6.8-5.8-10.89-7.61-9.55-3.56-20.05-3.56-29.6,0-4.09,1.81-7.79,4.39-10.89,7.61-3.05,3.39-5.36,7.38-6.78,11.72-1.88,4.92-2.79,10.15-2.67,15.42-.08,5.26.82,10.49,2.67,15.42,1.47,4.25,3.77,8.17,6.78,11.51,3.05,3.28,6.77,5.87,10.89,7.61,9.49,3.84,20.11,3.84,29.6,0,4.13-1.74,7.84-4.33,10.89-7.61,3.01-3.34,5.32-7.26,6.78-11.51,1.75-4.95,2.66-10.16,2.67-15.42,0-5.25-.9-10.47-2.67-15.42ZM1291.58,126.79h-42.34l-26.52,39.47-26.93-39.47h-44.4l48.1,63.1-54.27,71.53h42.96l33.5-47.69,33.71,47.69h44.19l-54.27-71.53,46.25-63.1Z"/>
+    </g>
+  </g>
+</svg>

netbox/project-static/img/motif.svg

@@ -0,0 +1,36 @@
+<svg width="288" height="359" viewBox="0 0 288 359" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_216_33510)">
+<g clip-path="url(#clip1_216_33510)">
+<path d="M-53.9824 216.116L75.6871 144.077L205.357 216.116L75.6871 288.154L-53.9824 216.116Z" fill="#80FFE0"/>
+<path d="M-53.9824 72.0386L75.6871 0V144.077L-53.9824 216.116V72.0386Z" fill="#B8FFEE"/>
+<path d="M205.356 216.116L335.026 288.154V432.232L205.356 360.193V216.116Z" fill="#00FFDC"/>
+<path d="M-53.9824 216.116L75.6871 288.154V432.232L-53.9824 360.193V216.116Z" fill="#00FFDC"/>
+<path d="M335.026 144.077L205.357 72.0386" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M207.109 68.8813C205.368 67.9147 203.165 68.5391 202.199 70.286C201.232 72.0269 201.856 74.2301 203.603 75.1966C205.344 76.1632 207.548 75.5388 208.514 73.7919C209.481 72.045 208.856 69.8478 207.109 68.8813Z" fill="#00F2D4"/>
+<path d="M-53.9819 216.116L75.6876 144.077" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M77.4396 147.234C79.1805 146.268 79.8109 144.065 78.8443 142.324C77.8778 140.583 75.6746 139.953 73.9337 140.919C72.1927 141.886 71.5624 144.089 72.5289 145.83C73.4955 147.571 75.6987 148.201 77.4396 147.234Z" fill="#00F2D4"/>
+<path d="M75.6866 432.231L-53.9829 360.193" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M75.6865 432.231L205.356 360.193" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M207.109 363.35C208.85 362.384 209.48 360.18 208.514 358.44C207.547 356.699 205.344 356.068 203.603 357.035C201.862 358.001 201.232 360.204 202.198 361.945C203.165 363.686 205.368 364.317 207.109 363.35Z" fill="#00F2D4"/>
+<path d="M205.356 216.116L75.6865 144.077" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M207.109 212.958C208.85 213.924 209.48 216.127 208.514 217.868C207.547 219.609 205.344 220.24 203.603 219.273C201.862 218.307 201.232 216.103 202.198 214.362C203.165 212.621 205.368 211.991 207.109 212.958Z" fill="#00F2D4"/>
+<path d="M77.4399 140.919C75.6989 139.953 73.4957 140.577 72.5292 142.324C71.5627 144.065 72.187 146.268 73.9339 147.235C75.6749 148.201 77.8781 147.577 78.8446 145.83C79.8111 144.083 79.1868 141.886 77.4399 140.919Z" fill="#00F2D4"/>
+<path d="M205.356 216.116L335.026 144.077" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M205.356 360.193V216.116" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M205.356 363.807C207.352 363.807 208.97 362.189 208.97 360.193C208.97 358.197 207.352 356.579 205.356 356.579C203.36 356.579 201.742 358.197 201.742 360.193C201.742 362.189 203.36 363.807 205.356 363.807Z" fill="#00F2D4"/>
+<path d="M75.6866 288.154L-53.9829 216.116" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M77.4391 284.997C79.1801 285.963 79.8104 288.166 78.8439 289.907C77.8773 291.648 75.6741 292.279 73.9332 291.312C72.1923 290.346 71.5619 288.142 72.5285 286.401C73.495 284.661 75.6982 284.03 77.4391 284.997Z" fill="#00F2D4"/>
+<path d="M75.6865 288.154L205.356 216.116" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M207.109 219.273C208.85 218.307 209.48 216.103 208.514 214.362C207.547 212.621 205.344 211.991 203.603 212.958C201.862 213.924 201.232 216.127 202.198 217.868C203.165 219.609 205.368 220.24 207.109 219.273Z" fill="#00F2D4"/>
+<path d="M75.6865 432.232V288.154" stroke="#00F2D4" stroke-width="4" stroke-miterlimit="10"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_216_33510">
+<rect width="288" height="359" fill="white"/>
+</clipPath>
+<clipPath id="clip1_216_33510">
+<rect width="1300.31" height="724" fill="white" transform="translate(-832)"/>
+</clipPath>
+</defs>
+</svg>

netbox/project-static/package.json

@@ -22,6 +22,7 @@
     "validate:formatting:scripts": "prettier -c src/**/*.ts"
   },
   "dependencies": {
+    "@fontsource-variable/plus-jakarta-sans": "^5.0.21",
     "@mdi/font": "7.4.47",
     "@tabler/core": "1.0.0-beta20",
     "bootstrap": "5.3.3",
@@ -32,7 +33,6 @@
     "query-string": "9.1.0",
     "sass": "1.77.8",
     "tom-select": "2.3.1",
-    "typeface-inter": "3.18.1",
     "typeface-roboto-mono": "1.1.13"
   },
   "devDependencies": {

netbox/project-static/styles/_variables.scss

@@ -1,9 +1,10 @@
 // Global variables
 
 // Set base fonts
-$font-family-sans-serif: 'Inter';
+$font-family-sans-serif: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
 // See https://github.com/tabler/tabler/issues/1812
 $font-family-monospace: 'Roboto Mono';
+$font-weight-base: 500;
 
 // Set the navigation sidebar width
 $sidebar-width: 18rem;
@@ -21,3 +22,16 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
 
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
+
+// Brand colors
+$rich-black: #001423;
+$rich-black-light: #081B2A;
+$rich-black-lighter: #0D202E;
+$rich-black-lightest: #1A2C39;
+$bright-teal: #00F2D4;
+$dark-teal: #00857D;
+
+$primary: $dark-teal;
+
+// Navbar active dropdown border color
+$navbar-active-border-color: $dark-teal;

netbox/project-static/styles/custom/_dashboard.scss

@@ -0,0 +1,12 @@
+// Alter default color for dashboard widget headings
+.grid-stack {
+  .card-header {
+    // Default color of card header changes depending on theme
+    &.bg-default {
+      background: var(--tblr-bg-surface-secondary) !important;
+    }
+    a {
+      color: inherit !important;
+    }
+  }
+}

netbox/project-static/styles/custom/_misc.scss

@@ -28,3 +28,8 @@ span.color-label {
   visibility: hidden;
   opacity: 0;
 }
+
+// NetBox edition text
+.netbox-edition {
+  letter-spacing: .15rem;
+}

netbox/project-static/styles/external.scss

@@ -4,5 +4,5 @@
 @import 'gridstack/dist/gridstack.min.css';
 
 // Fonts
-@import url("../node_modules/typeface-inter/inter.css");
 @import url("../node_modules/typeface-roboto-mono/index.css");
+@import url("../node_modules/@fontsource-variable/plus-jakarta-sans/index.css");

netbox/project-static/styles/netbox.scss

@@ -21,6 +21,7 @@
 
 // Custom styling
 @import 'custom/code';
+@import 'custom/dashboard';
 @import 'custom/interfaces';
 @import 'custom/markdown';
 @import 'custom/misc';

netbox/project-static/styles/overrides/_bootstrap.scss

@@ -20,3 +20,8 @@ hr.dropdown-divider {
   margin-bottom: 0.25rem;
   margin-top: 0.25rem;
 }
+
+// Bootstrap forces the font weight for dropdown items to $font-weight-normal
+.dropdown-item {
+  font-weight: $font-weight-base;
+}

netbox/project-static/styles/overrides/_tabler.scss

@@ -11,16 +11,38 @@ pre {
   color: inherit;
 }
 
-// Buttons
+// Slightly increase alert contrast between bg and text
+.alert {
+  background: var(--#{$prefix}bg-surface);
+}
+
+// Button adjustments
 .btn {
   // Tabler sets display: flex
   display: inline-block;
+
+  &:focus {
+    // Add button focus state
+    border: 1px solid var(--tblr-primary-fg);
+    outline: 2px solid var(--tblr-primary) !important;
+  }
 }
 .btn-sm {
   // $border-radius-sm (2px) is too small
   border-radius: $border-radius;
 }
 
+// Dropdown items
+.dropdown-item {
+  // Tabler sets display: flex
+  display: inline-block;
+}
+
+// Set footer icon color
+.footer .text-primary {
+  color: $rich-black !important;
+}
+
 // Tabs
 .nav-tabs {
   .nav-link {
@@ -29,18 +51,81 @@ pre {
   }
 }
 
-// Dropdown items
+// Altering background colors
-.dropdown-item {
+.page, .page-tabs .nav-tabs .nav-link.active {
-  // Tabler sets display: flex
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
-  display: inline-block;;
+}
+.page-body .card .card-header {
+  background: var(--tblr-bg-surface-secondary) !important;
 }
 
-table a {
+// Dark mode colors
-  // Adjust table anchor link contrast as not enough contrast in dark mode
+@if $enable-dark-mode {
-  filter: brightness(110%);
+  @include color-mode(dark, true) {
+    --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%);
+    --#{$prefix}link-color: #{$bright-teal};
+    --#{$prefix}link-color-rgb: 0,242,212;
+    --#{$prefix}link-hover-color-rgb: 0,242,212;
+    --#{$prefix}secondary: #{$gray-400};
+    --#{$prefix}primary: #{$bright-teal};
+    --#{$prefix}primary-fg: #{$rich-black};
+    --#{$prefix}primary-rgb: 0,242,212;
+    --#{$prefix}btn-active-color: #{$rich-black};
+  }
 }
 
-// Override background color alpha value
+// Dark mode overrides
-[data-bs-theme=dark] ::selection {
+body[data-bs-theme=dark] {
-  background-color: rgba(var(--tblr-primary-rgb),.48)
+  // Override background color alpha value
+  ::selection {
+    background-color: rgba(var(--tblr-primary-rgb),.48);
+  }
+
+  .btn-primary {
+    color: $rich-black !important;
+  }
+
+  // Change content color when primary teal changes with theme
+  .bg-primary {
+    .card-title,a,i {
+      color: $rich-black !important;
+    }
+  }
+  .text-bg-primary {
+    color: $rich-black !important;
+  }
+
+  // Altering background colors
+  .card {
+    background: $rich-black !important;
+  }
+
+  // Background colors to match brand colors
+  background-color: $rich-black;
+  .navbar, .page-header {
+    background-color: $rich-black;
+  }
+  .page, .page-tabs .nav-tabs .nav-link.active {
+    background-color: $rich-black-light !important;
+  }
+
+  .page-link.active, .active>.page-link {
+    color: $rich-black;
+  }
+
+  // Adjusting text colors
+  .text- {
+    &bg-primary {
+      color: $rich-black !important;
+    }
+    &muted {
+      color: var(--#{$prefix}secondary-color) !important;
+    }
+    &secondary {
+      color: $gray-400 !important;
+    }
+  }
+  .footer .text-primary {
+    color: white !important;
+  }
 }

netbox/project-static/styles/transitional/_cards.scss

@@ -16,6 +16,12 @@
       background: var(--#{$prefix}bg-surface-tertiary);
     }
 
+    // Use <h5> font size for card headers
+    h2.card-header {
+      @extend h5;
+      margin-bottom: 0;
+    }
+
     // Reduce padding
     .list-group-item {
       padding: 0.5rem 0.75rem;

netbox/project-static/styles/transitional/_forms.scss

@@ -4,6 +4,13 @@ form.object-edit {
   max-width: 800px;
 }
 
+// Use <h3> style for field group headings
+.field-group {
+  h2 {
+    @extend h3;
+  }
+}
+
 // Set bond font & append an asterisk to labels for required fields
 .col-form-label.required {
   font-weight: bold;

netbox/project-static/styles/transitional/_navigation.scss

@@ -1,18 +1,34 @@
-// Navbar styling
+// Navbar and light theme styling
 .navbar-vertical.navbar-expand-lg {
+
+  // Adds spacing to the bottom of the side navigation to avoid hidden nav items
+  @include media-breakpoint-up(lg) {
+    padding-bottom: 2rem;
+  }
+
+  // Adjust hover color & style for menu items
   .navbar-collapse {
+    .nav-link-icon {
+      color: var(--tblr-nav-link-color) !important;
+    }
+    .text-secondary {
+      color: $dark-teal !important;
+    }
+
     .dropdown-menu {
+
+      // Adjust hover color & style for menu items
       .dropdown-item {
         a {
-          color: inherit;
+          color: $rich-black;
         }
         .btn-group {
           visibility: hidden;
         }
 
-        // Adjust hover color & style for menu items
+        // Style menu item hover state
         &:hover {
-          background-color: $gray-700;
+          background-color: var(--tblr-navbar-active-bg);
           a {
             text-decoration: none;
           }
@@ -23,9 +39,9 @@
 
         // Style active menu item
         &.active {
-          background-color: $gray-700;
+          background-color: var(--tblr-navbar-active-bg);
           a {
-            color: white;
+            color: $rich-black;
           }
           .btn-group {
             visibility: visible;
@@ -35,4 +51,87 @@
       }
     }
   }
+
+  // Ensures theme toggle appears above background image
+  .navbar-nav {
+    z-index: 1;
+  }
+
+  // Logo text for non-community editions
+  .navbar-brand {
+
+    // Reduce logo padding on mobile view
+    @include media-breakpoint-down(lg) {
+      padding: 0.2rem 0;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Navigation geometric graphic for non-community editions
+  img.motif {
+    bottom: 0;
+    display: none;
+    left:0;
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%);
+    opacity: .5;
+    position: fixed;
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    width:18rem;
+
+    @include media-breakpoint-up(lg) {
+      display: block;
+    }
+  }
+}
+
+// Light theme styling
+body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+  // Background Gradient
+  background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
+}
+
+// Dark theme styling
+body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
+
+  // Background Gradient
+  background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;
+
+  // Border color for active dropdown list
+  .nav-item.dropdown.active:after {
+    border-color: $bright-teal !important;
+  }
+
+  // Adjust hover color & style for menu items
+  .dropdown-item {
+    a {
+      color: white !important;
+    }
+    &.active {
+      background-color: $navbar-dark-active-bg !important;
+      a {
+        color: white !important;
+      }
+    }
+    &:hover {
+      background-color: $navbar-dark-active-bg !important;
+    }
+    .nav-link-title {
+      color: white !important;
+    }
+  }
+  .text-secondary {
+    color: $bright-teal !important;
+  }
+
+  img.motif {
+    opacity: .25;
+  }
 }

netbox/project-static/styles/transitional/_tables.scss

@@ -23,7 +23,7 @@ table.attr-table {
 
   // Restyle row header
   th {
-    font-weight: normal;
+    font-weight: $font-weight-base;
     width: min-content;
   }
 
@@ -48,3 +48,15 @@ table.attr-table {
 td pre {
   margin-bottom: 0;
 }
+
+// Use base text color for table header links
+table th.orderable a {
+  color: var(--#{$prefix}body-color);
+}
+
+body[data-bs-theme=dark] {
+  // Adjust table header background color
+  .table thead th, .markdown>table thead th {
+    background: $rich-black !important;
+  }
+}

netbox/project-static/yarn.lock

@@ -80,6 +80,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
+"@fontsource-variable/plus-jakarta-sans@^5.0.21":
+  version "5.0.21"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/plus-jakarta-sans/-/plus-jakarta-sans-5.0.21.tgz#3bb6e0d16add99f0b93981443d4d763ea85ad13b"
+  integrity sha512-VTQB+MnaYbjLNmfxQJ/Fc2rayLGlqTiZa6nZTpplS0lJF3XKcWPPItilGFMZW4lfwIiroo+FIfBewBOF3MrMPQ==
+
 "@graphiql/plugin-explorer@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-2.0.0.tgz#d6869cba019ae6fac006ce61ae3470d8c8a83938"
@@ -2781,11 +2786,6 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typeface-inter@3.18.1:
-  version "3.18.1"
-  resolved "https://registry.yarnpkg.com/typeface-inter/-/typeface-inter-3.18.1.tgz#24cccdf29923f318589783997be20a662cd3ab9c"
-  integrity sha512-c+TBanYFCvmg3j5vPk+zxK4ocMZbPxMEmjnwG7rPQoV87xvQ6b07VbAOC0Va0XBbbZCGw6cWNeFuLeg1YQru3Q==
-
 typeface-roboto-mono@1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz#2af8662db8f9119c00efd55d6ed8877d2a69ec94"

netbox/templates/500.html

@@ -14,9 +14,9 @@
         <div class="row">
             <div class="col col-md-6 offset-md-3">
                 <div class="card border-danger mt-5">
-                    <h5 class="card-header">
+                    <h2 class="card-header">
                         <i class="mdi mdi-alert"></i> {% trans "Server Error" %}
-                    </h5>
+                    </h2>
                     <div class="card-body">
                         {% block message %}
                             <p>

netbox/templates/account/base.html

@@ -2,30 +2,29 @@
 {% load i18n %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs">
+  <ul class="nav nav-tabs" role="presentation">
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'profile' %} active{% endif %}" href="{% url 'account:profile' %}">{% trans "Profile" %}</a>
     </li>
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'bookmarks' %} active{% endif %}" href="{% url 'account:bookmarks' %}">{% trans "Bookmarks" %}</a>
     </li>
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'notifications' %} active{% endif %}" href="{% url 'account:notifications' %}">{% trans "Notifications" %}</a>
     </li>
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'subscriptions' %} active{% endif %}" href="{% url 'account:subscriptions' %}">{% trans "Subscriptions" %}</a>
     </li>
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'preferences' %} active{% endif %}" href="{% url 'account:preferences' %}">{% trans "Preferences" %}</a>
     </li>
     {% if not request.user.ldap_username %}
-      <li role="presentation" class="nav-item">
+      <li class="nav-item">
         <a class="nav-link{% if active_tab == 'password' %} active{% endif %}" href="{% url 'account:change_password' %}">{% trans "Password" %}</a>
       </li>
     {% endif %}
-    <li role="presentation" class="nav-item">
+    <li class="nav-item">
       <a class="nav-link{% if active_tab == 'api-tokens' %} active{% endif %}" href="{% url 'account:usertoken_list' %}">{% trans "API Tokens" %}</a>
     </li>
   </ul>
 {% endblock %}
-

netbox/templates/account/password.html

@@ -8,7 +8,9 @@
   <form action="." method="post" class="object-edit">
     {% csrf_token %}
     <div class="field-group mb-5">
-      <h5 class="col-9 offset-3">{% trans "Password" %}</h5>
+      <div class="row">
+        <h2 class="col-9 offset-3">{% trans "Password" %}</h2>
+      </div>
       {% render_field form.old_password %}
       {% render_field form.new_password1 %}
       {% render_field form.new_password2 %}

netbox/templates/account/preferences.html

@@ -19,7 +19,7 @@
       {% if plugin_fields %}
         <div class="field-group my-5">
           <div class="row">
-            <h5 class="col-9 offset-3">{% trans "Plugins" %}</h5>
+            <h2 class="col-9 offset-3">{% trans "Plugins" %}</h2>
           </div>
           {% for name in plugin_fields %}
             {% render_field form|getfield:name %}
@@ -31,7 +31,7 @@
     {# Table configurations #}
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Table Configurations" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Table Configurations" %}</h2>
       </div>
       <div class="row">
         {% if request.user.config.data.tables %}

netbox/templates/account/profile.html

@@ -9,7 +9,7 @@
   <div class="row mb-3">
     <div class="col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Account Details" %}</h5>
+        <h2 class="card-header">{% trans "Account Details" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Username" %}</th>
@@ -50,7 +50,7 @@
     </div>
     <div class="col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Assigned Groups" %}</h5>
+        <h2 class="card-header">{% trans "Assigned Groups" %}</h2>
         <ul class="list-group list-group-flush">
           {% for group in request.user.groups.all %}
             <li class="list-group-item">{{ group }}</li>
@@ -65,7 +65,7 @@
     <div class="row">
       <div class="col-md-12">
         <div class="card">
-          <h5 class="card-header text-center">{% trans "Recent Activity" %}</h5>
+          <h2 class="card-header text-center">{% trans "Recent Activity" %}</h2>
           <div class="table-responsive">
             {% render_table changelog_table 'inc/table.html' %}
           </div>

netbox/templates/account/token.html

@@ -16,7 +16,7 @@
   <div class="row">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Token" %}</h5>
+        <h2 class="card-header">{% trans "Token" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Key" %}</th>

netbox/templates/base/40x.html

@@ -7,9 +7,9 @@
 <div class="row my-5">
     <div class="col-6 offset-3">
         <div class="card">
-            <h5 class="card-header text-danger">
+            <h2 class="card-header text-danger">
                 {{ request_path }}
-            </h5>
+            </h2>
             <div class="card-body">
                 {% block message %}{% endblock %}
             </div>

netbox/templates/base/base.html

@@ -15,7 +15,7 @@
   >
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover" />
+    <meta name="viewport" content="initial-scale=1, maximum-scale=5, width=device-width, viewport-fit=cover" />
     <meta name="htmx-config" content='{"scrollBehavior": "auto"}'>
 
     {# Page title #}

netbox/templates/base/layout.html

@@ -19,7 +19,12 @@ Blocks:
   <div class="page">
 
     {# Sidebar #}
-    <aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
+    <aside class="navbar navbar-vertical navbar-expand-lg">
+
+      {% if 'commercial' in settings.RELEASE.features %}
+        <img class="motif" src="{% static 'motif.svg' %}" alt="{% trans "NetBox Motif" %}">
+      {% endif %}
+
       <div class="container-fluid">
 
         {# Menu toggle (mobile view) #}
@@ -28,9 +33,11 @@ Blocks:
         </button>
 
         {# Logo #}
-        <h1 class="navbar-brand navbar-brand-autodark">
+        <h1 class="navbar-brand pb-0">
           <a href="{% url 'home' %}">
-            <img src="{% static 'netbox_logo.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image">
+            <img src="{% static 'logo_netbox_dark_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-dark">
+            <img src="{% static 'logo_netbox_bright_teal.svg' %}" alt="{% trans "NetBox Logo" %}" class="navbar-brand-image hide-theme-light">
+            <div class="netbox-edition fw-semibold text-center fs-5 my-1">{{ settings.RELEASE.edition }}</div>
           </a>
         </h1>
 
@@ -140,42 +147,61 @@ Blocks:
               {% block footer_links %}
                 {# Documentation #}
                 <li class="list-inline-item">
-                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener">
+                  <a href="{% static 'docs/' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Docs" %}">
                     <i title="{% trans "Docs" %}" class="mdi mdi-book-open-variant text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# REST API #}
                 <li class="list-inline-item">
-                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener">
+                  <a href="{% url 'api-root' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API" %}">
                     <i title="{% trans "REST API" %}" class="mdi mdi-cloud-braces text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# API docs #}
                 <li class="list-inline-item">
-                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener">
+                  <a href="{% url 'api_docs' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "REST API documentation" %}">
                     <i title="{% trans "REST API documentation" %}" class="mdi mdi-book text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                   </a>
                 </li>
                 {# GraphQL API #}
                 {% if config.GRAPHQL_ENABLED %}
                   <li class="list-inline-item">
-                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener">
+                    <a href="{% url 'graphql' %}" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "GraphQL API" %}">
                       <i title="{% trans "GraphQL API" %}" class="mdi mdi-graphql text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
                     </a>
                   </li>
                 {% endif %}
-                {# GitHub #}
+
-                <li class="list-inline-item">
+                {# Commercial links #}
-                  <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener">
+                {% if settings.RELEASE.features.commercial %}
-                    <i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  {# LinkedIn #}
-                  </a>
+                  <li class="list-inline-item">
-                </li>
+                    <a href="https://www.linkedin.com/company/netboxlabs/" target="_blank" class="link-secondary" rel="noopener" aria-label="LinkedIn">
-                {# NetDev Slack #}
+                      <i title="LinkedIn" class="mdi mdi-linkedin text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
-                <li class="list-inline-item">
+                    </a>
-                  <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener">
+                  </li>
-                    <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                  {# Support #}
-                  </a>
+                  <li class="list-inline-item">
-                </li>
+                    <a href="mailto:support@netboxlabs.com" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "NetBox Labs Support" %}">
+                      <i title="{% trans "NetBox Labs Support" %}" class="mdi mdi-lifebuoy text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    </a>
+                  </li>
+
+                {# Community links #}
+                {% else %}
+                  {# GitHub #}
+                  <li class="list-inline-item">
+                    <a href="https://github.com/netbox-community/netbox" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Source Code" %}">
+                      <i title="{% trans "Source Code" %}" class="mdi mdi-github text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    </a>
+                  </li>
+                  {# NetDev Slack #}
+                  <li class="list-inline-item">
+                    <a href="https://netdev.chat" target="_blank" class="link-secondary" rel="noopener" aria-label="{% trans "Community" %}">
+                      <i title="{% trans "Community" %}" class="mdi mdi-slack text-primary" data-bs-placement="top" data-bs-toggle="tooltip"></i>
+                    </a>
+                  </li>
+                {% endif %}
               {% endblock footer_links %}
             </ul>
             {# /Footer links #}

netbox/templates/circuits/circuit.html

@@ -12,7 +12,7 @@
   <div class="row">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Circuit" %}</h5>
+        <h2 class="card-header">{% trans "Circuit" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Provider" %}</th>
@@ -62,7 +62,7 @@
         </table>
       </div>
       <div class="card">
-        <h5 class="card-header">
+        <h2 class="card-header">
           {% trans "Group Assignments" %}
           {% if perms.circuits.add_circuitgroupassignment %}
             <div class="card-actions">
@@ -71,7 +71,7 @@
               </a>
             </div>
           {% endif %}
-        </h5>
+        </h2>
         {% htmx_table 'circuits:circuitgroupassignment_list' circuit_id=object.pk %}
       </div>
       {% include 'inc/panels/custom_fields.html' %}

netbox/templates/circuits/circuitgroup.html

@@ -22,7 +22,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Circuit Group" %}</h5>
+        <h2 class="card-header">{% trans "Circuit Group" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Name" %}</th>

netbox/templates/circuits/circuitgroupassignment.html

@@ -16,7 +16,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Circuit Group Assignment" %}</h5>
+        <h2 class="card-header">{% trans "Circuit Group Assignment" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Group" %}</th>

netbox/templates/circuits/circuittype.html

@@ -16,7 +16,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Circuit Type" %}</h5>
+      <h2 class="card-header">{% trans "Circuit Type" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/circuits/inc/circuit_termination.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 <div class="card">
-    <h5 class="card-header d-flex justify-content-between">
+    <h2 class="card-header d-flex justify-content-between">
       {% blocktrans %}Termination{% endblocktrans %} {{ side }}
       <div>
         {% if not termination and perms.circuits.add_circuittermination %}
@@ -24,7 +24,7 @@
             </a>
         {% endif %}
       </div>
-    </h5>
+    </h2>
       {% if termination %}
         <table class="table table-hover attr-table">
           {% include 'circuits/inc/circuit_termination_fields.html' with termination=termination %}

netbox/templates/circuits/provider.html

@@ -17,7 +17,7 @@
 <div class="row mb-3">
 	  <div class="col col-md-6">
         <div class="card">
-          <h5 class="card-header">{% trans "Provider" %}</h5>
+          <h2 class="card-header">{% trans "Provider" %}</h2>
           <table class="table table-hover attr-table">
             <tr>
               <th scope="row">{% trans "ASNs" %}</th>
@@ -48,13 +48,13 @@
 <div class="row mb-3">
   <div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">{% trans "Provider Accounts" %}</h5>
+      <h2 class="card-header">{% trans "Provider Accounts" %}</h2>
       {% htmx_table 'circuits:provideraccount_list' provider_id=object.pk %}
     </div>
   </div>
   <div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">{% trans "Circuits" %}</h5>
+      <h2 class="card-header">{% trans "Circuits" %}</h2>
       {% htmx_table 'circuits:circuit_list' provider_id=object.pk %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/circuits/provideraccount.html

@@ -14,7 +14,7 @@
   <div class="row mb-3">
 	  <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Provider Account" %}</h5>
+        <h2 class="card-header">{% trans "Provider Account" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Provider" %}</th>
@@ -41,7 +41,7 @@
     </div>
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Circuits" %}</h5>
+        <h2 class="card-header">{% trans "Circuits" %}</h2>
         {% htmx_table 'circuits:circuit_list' provider_account_id=object.pk %}
       </div>
     {% plugin_full_width_page object %}

netbox/templates/circuits/providernetwork.html

@@ -14,7 +14,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Provider Network" %}</h5>
+        <h2 class="card-header">{% trans "Provider Network" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Provider" %}</th>
@@ -47,7 +47,7 @@
   <div class="row mb-3">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Circuits" %}</h5>
+        <h2 class="card-header">{% trans "Circuits" %}</h2>
         {% htmx_table 'circuits:circuit_list' provider_network_id=object.pk %}
       </div>
       {% plugin_full_width_page object %}

netbox/templates/core/configrevision.html

@@ -32,12 +32,12 @@
   <div class="row">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Configuration Data" %}</h5>
+        <h2 class="card-header">{% trans "Configuration Data" %}</h2>
         {% include 'core/inc/config_data.html' with config=object.data %}
       </div>
 
       <div class="card">
-        <h5 class="card-header">{% trans "Comment" %}</h5>
+        <h2 class="card-header">{% trans "Comment" %}</h2>
         <div class="card-body">
           {{ object.comment|placeholder }}
         </div>

netbox/templates/core/datafile.html

@@ -21,7 +21,7 @@
   <div class="row mb-3">
     <div class="col">
       <div class="card">
-        <h5 class="card-header">{% trans "Data File" %}</h5>
+        <h2 class="card-header">{% trans "Data File" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Source" %}</th>
@@ -52,7 +52,7 @@
         </table>
       </div>
       <div class="card">
-        <h5 class="card-header">{% trans "Content" %}</h5>
+        <h2 class="card-header">{% trans "Content" %}</h2>
         <div class="card-body">
           <pre>{{ object.data_as_string }}</pre>
         </div>

netbox/templates/core/datasource.html

@@ -28,7 +28,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Data Source" %}</h5>
+        <h2 class="card-header">{% trans "Data Source" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Name" %}</th>
@@ -81,7 +81,7 @@
     </div>
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Backend" %}</h5>
+        <h2 class="card-header">{% trans "Backend" %}</h2>
           {% with backend=object.backend_class %}
             <table class="table table-hover attr-table">
               {% for name, field in backend.parameters.items %}
@@ -111,7 +111,7 @@
   <div class="row mb-3">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Files" %}</h5>
+        <h2 class="card-header">{% trans "Files" %}</h2>
         {% htmx_table 'core:datafile_list' source_id=object.pk %}
       </div>
       {% plugin_full_width_page object %}

netbox/templates/core/job.html

@@ -26,7 +26,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Job" %}</h5>
+        <h2 class="card-header">{% trans "Job" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Object Type" %}</th>
@@ -57,7 +57,7 @@
     </div>
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Scheduling" %}</h5>
+        <h2 class="card-header">{% trans "Scheduling" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Created" %}</th>
@@ -87,7 +87,7 @@
   <div class="row">
     <div class="col col-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Data" %}</h5>
+        <h2 class="card-header">{% trans "Data" %}</h2>
         <div class="card-body">
           <pre>{{ object.data|json }}</pre>
         </div>

netbox/templates/core/objectchange.html

@@ -26,7 +26,7 @@
 <div class="row">
     <div class="col col-md-5">
         <div class="card">
-            <h5 class="card-header">{% trans "Change" %}</h5>
+            <h2 class="card-header">{% trans "Change" %}</h2>
             <table class="table table-hover attr-table">
                 <tr>
                     <th scope="row">{% trans "Time" %}</th>
@@ -75,7 +75,7 @@
     </div>
     <div class="col col-md-7">
         <div class="card">
-            <h5 class="card-header d-flex justify-content-between">
+            <h2 class="card-header d-flex justify-content-between">
               {% trans "Difference" %}
               <div class="btn-group btn-group-sm d-print-none">
                 <a {% if prev_change %}href="{% url 'core:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-outline-secondary">
@@ -85,7 +85,7 @@
                   {% trans "Next" %} <i class="mdi mdi-chevron-right" aria-hidden="true"></i>
                 </a>
               </div>
-            </h5>
+            </h2>
             <div class="card-body">
                 {% if diff_added == diff_removed %}
                     <span class="text-muted" style="margin-left: 10px;">
@@ -108,7 +108,7 @@
 <div class="row">
     <div class="col col-md-6">
         <div class="card">
-            <h5 class="card-header">{% trans "Pre-Change Data" %}</h5>
+            <h2 class="card-header">{% trans "Pre-Change Data" %}</h2>
             <div class="card-body">
             {% if object.prechange_data %}
               {% spaceless %}
@@ -128,7 +128,7 @@
     </div>
     <div class="col col-md-6">
         <div class="card">
-            <h5 class="card-header">{% trans "Post-Change Data" %}</h5>
+            <h2 class="card-header">{% trans "Post-Change Data" %}</h2>
             <div class="card-body">
                 {% if object.postchange_data %}
                   {% spaceless %}

netbox/templates/core/plugin.html

@@ -47,7 +47,7 @@
     <div class="row">
       <div class="col col-6">
         <div class="card">
-          <h5 class="card-header">{% trans "Plugin Details" %}</h5>
+          <h2 class="card-header">{% trans "Plugin Details" %}</h2>
           <table class="table table-hover attr-table">
             <tr>
               <th scope="row">{% trans "Name" %}</th>
@@ -92,7 +92,7 @@
       </div>
       <div class="col col-6">
         <div class="card">
-          <h5 class="card-header">{% trans "Version History" %}</h5>
+          <h2 class="card-header">{% trans "Version History" %}</h2>
           <div class="htmx-container table-responsive" id="object_list">
             {% include 'htmx/table.html' %}
           </div>
@@ -103,7 +103,7 @@
   {% if not plugin.is_local and not settings.RELEASE.features.commercial %}
     <div class="tab-pane" id="install" role="tabpanel" aria-labelledby="install-tab">
       <div class="card">
-        <h5 class="card-header">{% trans "Local Installation Instructions" %}</h5>
+        <h2 class="card-header">{% trans "Local Installation Instructions" %}</h2>
         <div class="card-body">
           {% include 'core/inc/plugin_installation.html' %}
         </div>

netbox/templates/core/rq_task.html

@@ -55,7 +55,7 @@
   <div class="row">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Job" %}</h5>
+        <h2 class="card-header">{% trans "Job" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Queue" %}</th>

netbox/templates/core/rq_worker.html

@@ -37,7 +37,7 @@
     <div class="row">
       <div class="col col-md-12">
         <div class="card">
-          <h5 class="card-header">{% trans "Worker" %}</h5>
+          <h2 class="card-header">{% trans "Worker" %}</h2>
           <table class="table table-hover attr-table">
             <tr>
               <th scope="row">{% trans "Name" %}</th>

netbox/templates/core/system.html

@@ -25,7 +25,7 @@
   <div class="row mb-3">
     <div class="col">
       <div class="card">
-        <h5 class="card-header">{% trans "System Status" %}</h5>
+        <h2 class="card-header">{% trans "System Status" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "NetBox release" %}</th>
@@ -82,10 +82,9 @@
   <div class="row mb-3">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Current Configuration" %}</h5>
+        <h2 class="card-header">{% trans "Current Configuration" %}</h2>
         {% include 'core/inc/config_data.html' %}
       </div>
-
     </div>
   </div>
 {% endblock content %}

netbox/templates/dcim/cable.html

@@ -9,7 +9,7 @@
   <div class="row">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Cable" %}</h5>
+        <h2 class="card-header">{% trans "Cable" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Type" %}</th>
@@ -65,11 +65,11 @@
     </div>
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Termination" %} A</h5>
+        <h2 class="card-header">{% trans "Termination" %} A</h2>
         {% include 'dcim/inc/cable_termination.html' with terminations=object.a_terminations %}
       </div>
       <div class="card">
-        <h5 class="card-header">{% trans "Termination" %} B</h5>
+        <h2 class="card-header">{% trans "Termination" %} B</h2>
         {% include 'dcim/inc/cable_termination.html' with terminations=object.b_terminations %}
       </div>
       {% plugin_right_page object %}

netbox/templates/dcim/cable_trace.html

@@ -82,7 +82,7 @@
         {# Related paths #}
         <div class="col col-md-7">
             <div class="card">
-                <h5 class="card-header">{% trans "Related Paths" %}</h5>
+                <h2 class="card-header">{% trans "Related Paths" %}</h2>
                 <table class="table table-hover">
                     <thead>
                         <tr>

netbox/templates/dcim/consoleport.html

@@ -14,7 +14,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Console Port" %}</h5>
+                <h2 class="card-header">{% trans "Console Port" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -52,7 +52,7 @@
         </div>
         <div class="col col-md-6">
           <div class="card">
-            <h5 class="card-header">{% trans "Connection" %}</h5>
+            <h2 class="card-header">{% trans "Connection" %}</h2>
             {% if object.mark_connected %}
               <div class="card-body">
                 <span class="text-success"><i class="mdi mdi-check-bold"></i></span>

netbox/templates/dcim/consoleserverport.html

@@ -14,7 +14,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Console Server Port" %}</h5>
+                <h2 class="card-header">{% trans "Console Server Port" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -52,7 +52,7 @@
         </div>
         <div class="col col-md-6">
           <div class="card">
-            <h5 class="card-header">{% trans "Connection" %}</h5>
+            <h2 class="card-header">{% trans "Connection" %}</h2>
             <div class="card-body">
             {% if object.mark_connected %}
               <div class="card-body">

netbox/templates/dcim/device.html

@@ -12,7 +12,7 @@
     <div class="row">
         <div class="col col-12 col-xl-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Device" %}</h5>
+                <h2 class="card-header">{% trans "Device" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Region" %}</th>
@@ -116,14 +116,14 @@
             </div>
             {% if vc_members %}
                 <div class="card">
-                    <h5 class="card-header">
+                    <h2 class="card-header">
                       {% trans "Virtual Chassis" %}
                       <div class="card-actions">
                         <a href="{{ object.virtual_chassis.get_absolute_url }}" class="btn btn-ghost-primary btn-sm">
                           <span class="mdi mdi-arrow-right-bold" aria-hidden="true"></span> {% trans "View Virtual Chassis" %}
                         </a>
                       </div>
-                    </h5>
+                    </h2>
                     <table class="table table-hover attr-table">
                       <thead>
                         <tr class="border-bottom">
@@ -156,7 +156,7 @@
             {% include 'inc/panels/tags.html' %}
             {% include 'inc/panels/comments.html' %}
             <div class="card">
-              <h5 class="card-header">
+              <h2 class="card-header">
                 {% trans "Virtual Device Contexts" %}
                 {% if perms.dcim.add_virtualdevicecontext %}
                   <div class="card-actions">
@@ -165,14 +165,14 @@
                     </a>
                   </div>
                 {% endif %}
-              </h5>
+              </h2>
               {% htmx_table 'dcim:virtualdevicecontext_list' device_id=object.pk %}
             </div>
             {% plugin_left_page object %}
         </div>
         <div class="col col-12 col-xl-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Management" %}</h5>
+                <h2 class="card-header">{% trans "Management" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Status" %}</th>
@@ -249,7 +249,7 @@
             </div>
             {% if object.powerports.exists and object.poweroutlets.exists %}
                 <div class="card">
-                    <h5 class="card-header">{% trans "Power Utilization" %}</h5>
+                    <h2 class="card-header">{% trans "Power Utilization" %}</h2>
                     <table class="table table-hover">
                         <thead>
                           <tr>
@@ -298,7 +298,7 @@
                 </div>
             {% endif %}
             <div class="card">
-              <h5 class="card-header">
+              <h2 class="card-header">
                 {% trans "Services" %}
                 {% if perms.ipam.add_service %}
                   <div class="card-actions">
@@ -307,12 +307,12 @@
                     </a>
                   </div>
                 {% endif %}
-              </h5>
+              </h2>
               {% htmx_table 'ipam:service_list' device_id=object.pk %}
             </div>
             {% include 'inc/panels/image_attachments.html' %}
             <div class="card">
-                <h5 class="card-header">{% trans "Dimensions" %}</h5>
+                <h2 class="card-header">{% trans "Dimensions" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Height" %}</th>
@@ -336,13 +336,13 @@
               <div class="row" style="margin-bottom: 20px">
                 <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
                   <div style="margin-left: 30px">
-                    <h4>{% trans "Front" %}</h4>
+                    <h2 class="h4">{% trans "Front" %}</h2>
                     {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='front' extra_params=svg_extra %}
                   </div>
                 </div>
                 <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
                   <div style="margin-left: 30px">
-                    <h4>{% trans "Rear" %}</h4>
+                    <h2 class="h4">{% trans "Rear" %}</h2>
                     {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='rear' extra_params=svg_extra %}
                   </div>
                 </div>

netbox/templates/dcim/device/render_config.html

@@ -8,7 +8,7 @@
   <div class="row mb-3">
     <div class="col-5">
       <div class="card">
-        <h5 class="card-header">{% trans "Config Template" %}</h5>
+        <h2 class="card-header">{% trans "Config Template" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Config Template" %}</th>
@@ -49,12 +49,12 @@
   <div class="row">
     <div class="col">
       <div class="card">
-        <h5 class="card-header d-flex justify-content-between">
+        <h2 class="card-header d-flex justify-content-between">
           {% trans "Rendered Config" %}
             <a href="?export=True" class="btn btn-primary lh-1" role="button">
               <i class="mdi mdi-download" aria-hidden="true"></i> {% trans "Download" %}
             </a>
-        </h5>
+        </h2>
         {% if config_template %}
           <pre class="card-body">{{ rendered_config }}</pre>
         {% else %}

netbox/templates/dcim/device_edit.html

@@ -4,30 +4,30 @@
 
 {% block form %}
     {% render_errors form %}
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Device" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Device" %}</h2>
       </div>
       {% render_field form.name %}
       {% render_field form.role %}
       {% render_field form.description %}
       {% render_field form.tags %}
     </div>
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Hardware" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Hardware" %}</h2>
       </div>
       {% render_field form.device_type %}
       {% render_field form.airflow %}
       {% render_field form.serial %}
       {% render_field form.asset_tag %}
     </div>
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Location" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Location" %}</h2>
       </div>
       {% render_field form.site %}
       {% render_field form.location %}
@@ -58,10 +58,10 @@
         {% render_field form.longitude %}
       {% endif %}
     </div>
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Management" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Management" %}</h2>
       </div>
       {% render_field form.status %}
       {% render_field form.platform %}
@@ -72,17 +72,17 @@
         {% render_field form.oob_ip %}
       {% endif %}
     </div>
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Virtualization" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Virtualization" %}</h2>
       </div>
       {% render_field form.cluster %}
     </div>
-    
+
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Tenancy" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Tenancy" %}</h2>
       </div>
       {% render_field form.tenant_group %}
       {% render_field form.tenant %}
@@ -90,7 +90,7 @@
 
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h2>
       </div>
       {% render_field form.virtual_chassis %}
       {% render_field form.vc_position %}
@@ -100,14 +100,14 @@
     {% if form.custom_fields %}
       <div class="field-group my-5">
         <div class="row">
-          <h5 class="col-9 offset-3">{% trans "Custom Fields" %}</h5>
+          <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
         </div>
         {% render_custom_fields form %}
       </div>
     {% endif %}
 
     <div class="field-group my-5">
-      <h5 class="text-center">{% trans "Local Config Context Data" %}</h5>
+      <h2 class="text-center">{% trans "Local Config Context Data" %}</h2>
       {% render_field form.local_context_data %}
     </div>
 

netbox/templates/dcim/devicebay.html

@@ -14,7 +14,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Device Bay" %}</h5>
+                <h2 class="card-header">{% trans "Device Bay" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -40,7 +40,7 @@
         </div>
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Installed Device" %}</h5>
+                <h2 class="card-header">{% trans "Installed Device" %}</h2>
                 {% if object.installed_device %}
                     {% with device=object.installed_device %}
                         <table class="table table-hover attr-table">

netbox/templates/dcim/devicebay_populate.html

@@ -10,7 +10,7 @@
     <div class="row mb-3">
         <div class="col col-md-6 offset-md-3">
             <div class="card">
-                <h5 class="card-header">{% block title %}{% trans "Populate" %} {{ device_bay }}{% endblock %}</h5>
+                <h2 class="card-header">{% block title %}{% trans "Populate" %} {{ device_bay }}{% endblock %}</h2>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label class="col-sm-3 col-form-label text-lg-end">{% trans "Parent Device" %}</label>

netbox/templates/dcim/devicerole.html

@@ -20,7 +20,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Device Role" %}</h5>
+      <h2 class="card-header">{% trans "Device Role" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/dcim/devicetype.html

@@ -8,7 +8,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Chassis" %}</h5>
+                <h2 class="card-header">{% trans "Chassis" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Manufacturer" %}</th>

netbox/templates/dcim/frontport.html

@@ -14,7 +14,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Front Port" %}</h5>
+                <h2 class="card-header">{% trans "Front Port" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -66,7 +66,7 @@
         </div>
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Connection" %}</h5>
+                <h2 class="card-header">{% trans "Connection" %}</h2>
                 {% if object.mark_connected %}
                     <div class="card-body text-muted">
                       <span class="text-success"><i class="mdi mdi-check-bold"></i></span> {% trans "Marked as Connected" %}

netbox/templates/dcim/htmx/cable_edit.html

@@ -7,7 +7,7 @@
 {# A side termination #}
 <div class="field-group mb-5">
   <div class="row">
-    <h5 class="col-9 offset-3">{% trans "A Side" %}</h5>
+    <h2 class="col-9 offset-3">{% trans "A Side" %}</h2>
   </div>
   {% render_field form.a_terminations_type %}
   {% if 'termination_a_device' in form.fields %}
@@ -27,7 +27,7 @@
 {# B side termination #}
 <div class="field-group mb-5">
   <div class="row">
-    <h5 class="col-9 offset-3">{% trans "B Side" %}</h5>
+    <h2 class="col-9 offset-3">{% trans "B Side" %}</h2>
   </div>
   {% render_field form.b_terminations_type %}
   {% if 'termination_b_device' in form.fields %}
@@ -47,7 +47,7 @@
 {# Cable attributes #}
 <div class="field-group mb-5">
   <div class="row">
-    <h5 class="col-9 offset-3">{% trans "Cable" %}</h5>
+    <h2 class="col-9 offset-3">{% trans "Cable" %}</h2>
   </div>
   {% render_field form.status %}
   {% render_field form.type %}
@@ -69,7 +69,7 @@
 
 <div class="field-group mb-5">
   <div class="row">
-    <h5 class="col-9 offset-3">{% trans "Tenancy" %}</h5>
+    <h2 class="col-9 offset-3">{% trans "Tenancy" %}</h2>
   </div>
   {% render_field form.tenant_group %}
   {% render_field form.tenant %}
@@ -78,7 +78,7 @@
 {% if form.custom_fields %}
   <div class="field-group mb-5">
     <div class="row">
-      <h5 class="col-9 offset-3">{% trans "Custom Fields" %}</h5>
+      <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
     </div>
     {% render_custom_fields form %}
   </div>
@@ -86,7 +86,7 @@
 
 {% if form.comments %}
   <div class="field-group mb-5">
-    <h5 class="text-center">{% trans "Comments" %}</h5>
+    <h2 class="text-center">{% trans "Comments" %}</h2>
     {% render_field form.comments %}
   </div>
 {% endif %}

netbox/templates/dcim/inc/panels/inventory_items.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 <div class="card">
-  <h5 class="card-header">
+  <h2 class="card-header">
     {% trans "Inventory Items" %}
     {% if perms.dcim.add_inventoryitem %}
       <div class="card-actions">
@@ -11,7 +11,7 @@
         </a>
       </div>
     {% endif %}
-  </h5>
+  </h2>
   <table class="table table-hover">
     <thead>
       <tr>

netbox/templates/dcim/inc/panels/racktype_dimensions.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="card">
-  <h5 class="card-header">{% trans "Dimensions" %}</h5>
+  <h2 class="card-header">{% trans "Dimensions" %}</h2>
   <table class="table table-hover attr-table">
     <tr>
       <th scope="row">{% trans "Form factor" %}</th>

netbox/templates/dcim/inc/panels/racktype_numbering.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="card">
-  <h5 class="card-header">{% trans "Numbering" %}</h5>
+  <h2 class="card-header">{% trans "Numbering" %}</h2>
   <table class="table table-hover attr-table">
     <tr>
       <th scope="row">{% trans "Starting Unit" %}</th>

netbox/templates/dcim/inc/rack_elevation.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div style="margin-left: -30px">
-    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation"></object>
+    <object data="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" class="rack_elevation" aria-label="{% trans "Rack elevation" %}"></object>
 </div>
 <div class="text-center mt-3">
     <a class="btn btn-outline-primary" href="{% url 'dcim-api:rack-elevation' pk=object.pk %}?face={{face}}&render=svg{% if extra_params %}&{{ extra_params }}{% endif %}" hx-boost="false">

netbox/templates/dcim/interface.html

@@ -24,7 +24,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Interface" %}</h5>
+        <h2 class="card-header">{% trans "Interface" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Device" %}</th>
@@ -96,7 +96,7 @@
         </table>
       </div>
       <div class="card">
-        <h5 class="card-header">{% trans "Related Interfaces" %}</h5>
+        <h2 class="card-header">{% trans "Related Interfaces" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Parent" %}</th>
@@ -119,7 +119,7 @@
     <div class="col col-md-6">
       {% include 'inc/panel_table.html' with table=vdc_table heading="Virtual Device Contexts" %}
       <div class="card">
-        <h5 class="card-header">{% trans "Addressing" %}</h5>
+        <h2 class="card-header">{% trans "Addressing" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "MAC Address" %}</th>
@@ -137,7 +137,7 @@
       </div>
       {% if not object.is_virtual %}
         <div class="card">
-          <h5 class="card-header">{% trans "Connection" %}</h5>
+          <h2 class="card-header">{% trans "Connection" %}</h2>
           {% if object.mark_connected %}
             <div class="card-body">
               <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
@@ -207,7 +207,7 @@
       {% endif %}
       {% if object.is_wireless %}
         <div class="card">
-          <h5 class="card-header">{% trans "Wireless" %}</h5>
+          <h2 class="card-header">{% trans "Wireless" %}</h2>
           {% with peer=object.connected_endpoints.0 %}
             <table class="table table-hover">
               <thead>
@@ -277,7 +277,7 @@
           {% endwith %}
         </div>
         <div class="card">
-          <h5 class="card-header">{% trans "Wireless LANs" %}</h5>
+          <h2 class="card-header">{% trans "Wireless LANs" %}</h2>
           <table class="table table-hover">
             <thead>
               <tr>
@@ -302,7 +302,7 @@
       {% endif %}
       {% if object.is_lag %}
         <div class="card">
-          <h5 class="card-header">{% trans "LAG Members" %}</h5>
+          <h2 class="card-header">{% trans "LAG Members" %}</h2>
           <table class="table table-hover">
             <thead>
               <tr>
@@ -335,7 +335,7 @@
   <div class="row mb-3">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">
+        <h2 class="card-header">
           {% trans "IP Addresses" %}
           {% if perms.ipam.add_ipaddress %}
             <div class="card-actions">
@@ -344,7 +344,7 @@
               </a>
             </div>
           {% endif %}
-        </h5>
+        </h2>
         {% htmx_table 'ipam:ipaddress_list' interface_id=object.pk %}
         
       </div>

netbox/templates/dcim/inventoryitem.html

@@ -14,7 +14,7 @@
     <div class="row mb-3">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Inventory Item" %}</h5>
+                <h2 class="card-header">{% trans "Inventory Item" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>

netbox/templates/dcim/inventoryitemrole.html

@@ -12,7 +12,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Inventory Item Role" %}</h5>
+      <h2 class="card-header">{% trans "Inventory Item Role" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/dcim/location.html

@@ -23,7 +23,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Location" %}</h5>
+      <h2 class="card-header">{% trans "Location" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -73,7 +73,7 @@
 <div class="row mb-3">
 	<div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Child Locations" %}
         {% if perms.dcim.add_location %}
           <div class="card-actions">
@@ -82,11 +82,11 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:location_list' parent_id=object.pk %}
     </div>
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Non-Racked Devices" %}
         {% if perms.dcim.add_device %}
           <div class="card-actions">
@@ -95,7 +95,7 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:device_list' location_id=object.pk rack_id='null' parent_bay_id='null' %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/dcim/manufacturer.html

@@ -30,7 +30,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Manufacturer" %}</h5>
+      <h2 class="card-header">{% trans "Manufacturer" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/dcim/module.html

@@ -48,7 +48,7 @@
 <div class="row">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Module" %}</h5>
+      <h2 class="card-header">{% trans "Module" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Device" %}</th>

netbox/templates/dcim/modulebay.html

@@ -14,7 +14,7 @@
   <div class="row">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Module Bay" %}</h5>
+        <h2 class="card-header">{% trans "Module Bay" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Device" %}</th>
@@ -46,7 +46,7 @@
     <div class="col col-md-6">
       {% include 'inc/panels/custom_fields.html' %}
       <div class="card">
-        <h5 class="card-header">{% trans "Installed Module" %}</h5>
+        <h2 class="card-header">{% trans "Installed Module" %}</h2>
         {% if object.installed_module %}
           {% with module=object.installed_module %}
             <table class="table table-hover attr-table">

netbox/templates/dcim/moduletype.html

@@ -8,7 +8,7 @@
   <div class="row">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Module Type" %}</h5>
+        <h2 class="card-header">{% trans "Module Type" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Manufacturer" %}</th>

netbox/templates/dcim/moduletype/component_templates.html

@@ -35,7 +35,7 @@
     </form>
   {% else %}
     <div class="card">
-      <h5 class="card-header">{{ title }}</h5>
+      <h2 class="card-header">{{ title }}</h2>
       <div class="htmx-container table-responsive" id="object_list">
         {% include 'htmx/table.html' %}
       </div>

netbox/templates/dcim/platform.html

@@ -23,7 +23,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Platform" %}</h5>
+      <h2 class="card-header">{% trans "Platform" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/dcim/powerfeed.html

@@ -18,7 +18,7 @@
 <div class="row">
 	<div class="col col-md-6">
         <div class="card">
-            <h5 class="card-header">{% trans "Power Feed" %}</h5>
+            <h2 class="card-header">{% trans "Power Feed" %}</h2>
             <table class="table table-hover attr-table">
                 <tr>
                     <th scope="row">{% trans "Power Panel" %}</th>
@@ -77,7 +77,7 @@
             </table>
         </div>
         <div class="card">
-            <h5 class="card-header">{% trans "Electrical Characteristics" %}</h5>
+            <h2 class="card-header">{% trans "Electrical Characteristics" %}</h2>
             <table class="table table-hover attr-table">
                 <tr>
                     <th scope="row">{% trans "Supply" %}</th>
@@ -107,7 +107,7 @@
     </div>
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Connection" %}</h5>
+        <h2 class="card-header">{% trans "Connection" %}</h2>
         {% if object.mark_connected %}
           <div class="card-body">
             <span class="text-success"><i class="mdi mdi-check-bold"></i></span>

netbox/templates/dcim/poweroutlet.html

@@ -14,7 +14,7 @@
     <div class="row mb-3">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Power Outlet" %}</h5>
+                <h2 class="card-header">{% trans "Power Outlet" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -56,7 +56,7 @@
         </div>
         <div class="col col-md-6">
           <div class="card">
-            <h5 class="card-header">{% trans "Connection" %}</h5>
+            <h2 class="card-header">{% trans "Connection" %}</h2>
             {% if object.mark_connected %}
               <div class="card-body">
                 <span class="text-success"><i class="mdi mdi-check-bold"></i></span>

netbox/templates/dcim/powerpanel.html

@@ -16,7 +16,7 @@
 <div class="row">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Power Panel" %}</h5>
+      <h2 class="card-header">{% trans "Power Panel" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Site" %}</th>
@@ -48,7 +48,7 @@
     <form method="post">
       {% csrf_token %}
       <div class="card">
-        <h5 class="card-header">{% trans "Power Feeds" %}</h5>
+        <h2 class="card-header">{% trans "Power Feeds" %}</h2>
         {% htmx_table 'dcim:powerfeed_list' power_panel_id=object.pk %}
         <div class="card-footer d-print-none">
           {% if perms.dcim.change_powerfeed %}

netbox/templates/dcim/powerport.html

@@ -14,7 +14,7 @@
     <div class="row mb-3">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Power Port" %}</h5>
+                <h2 class="card-header">{% trans "Power Port" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -56,7 +56,7 @@
         </div>
         <div class="col col-md-6">
           <div class="card">
-            <h5 class="card-header">{% trans "Connection" %}</h5>
+            <h2 class="card-header">{% trans "Connection" %}</h2>
             {% if object.mark_connected %}
               <div class="card-body">
                 <span class="text-success"><i class="mdi mdi-check-bold"></i></span>

netbox/templates/dcim/rack.html

@@ -10,7 +10,7 @@
   <div class="row">
 	  <div class="col col-12 col-xl-5">
       <div class="card">
-        <h5 class="card-header">{% trans "Rack" %}</h5>
+        <h2 class="card-header">{% trans "Rack" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Region" %}</th>
@@ -78,7 +78,7 @@
       {% include 'dcim/inc/panels/racktype_dimensions.html' %}
       {% include 'dcim/inc/panels/racktype_numbering.html' %}
       <div class="card">
-        <h5 class="card-header">{% trans "Weight" %}</h5>
+        <h2 class="card-header">{% trans "Weight" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Rack Weight" %}</th>
@@ -126,13 +126,13 @@
         <div class="row" style="margin-bottom: 20px">
           <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
             <div style="margin-left: 30px">
-              <h4>{% trans "Front" %}</h4>
+              <h2 class="h4">{% trans "Front" %}</h2>
               {% include 'dcim/inc/rack_elevation.html' with face='front' extra_params=svg_extra %}
             </div>
           </div>
           <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
             <div style="margin-left: 30px">
-              <h4>{% trans "Rear" %}</h4>
+              <h2 class="h4">{% trans "Rear" %}</h2>
               {% include 'dcim/inc/rack_elevation.html' with face='rear' extra_params=svg_extra %}
             </div>
           </div>

netbox/templates/dcim/rack_elevation_list.html

@@ -11,7 +11,7 @@
       <a href="{% url 'dcim:rack_list' %}{% querystring request %}" class="btn btn-primary">
         <i class="mdi mdi-format-list-checkbox"></i> {% trans "View List" %}
       </a>
-      <select class="btn btn-outline-secondary no-ts rack-view">
+      <select class="btn btn-outline-secondary no-ts rack-view" aria-label="{% trans "Select rack view" %}">
         <option value="images-and-labels" selected="selected">{% trans "Images and Labels" %}</option>
         <option value="images-only">{% trans "Images only" %}</option>
         <option value="labels-only">{% trans "Labels only" %}</option>

netbox/templates/dcim/rackreservation.html

@@ -16,7 +16,7 @@
 <div class="row mb-3">
 	<div class="col col-12 col-xl-5">
         <div class="card">
-            <h5 class="card-header">{% trans "Rack" %}</h5>
+            <h2 class="card-header">{% trans "Rack" %}</h2>
             <table class="table table-hover attr-table">
                 <tr>
                     <th scope="row">{% trans "Region" %}</th>
@@ -39,7 +39,7 @@
             </table>
         </div>
         <div class="card">
-            <h5 class="card-header">{% trans "Reservation Details" %}</h5>
+            <h2 class="card-header">{% trans "Reservation Details" %}</h2>
             <table class="table table-hover attr-table">
                 <tr>
                     <th scope="row">{% trans "Units" %}</th>
@@ -73,13 +73,13 @@
         <div class="row" style="margin-bottom: 20px">
             <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
                 <div style="margin-left: 30px">
-                    <h4>{% trans "Front" %}</h4>
+                    <h2 class="h4">{% trans "Front" %}</h2>
                     {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='front' %}
                 </div>
             </div>
             <div class="col col-md-6 col-sm-6 col-xs-12 text-center">
                 <div style="margin-left: -30px">
-                    <h4>{% trans "Rear" %}</h4>
+                    <h2 class="h4">{% trans "Rear" %}</h2>
                     {% include 'dcim/inc/rack_elevation.html' with object=object.rack face='rear' %}
                 </div>
             </div>

netbox/templates/dcim/rackrole.html

@@ -16,7 +16,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Rack Role" %}</h5>
+      <h2 class="card-header">{% trans "Rack Role" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>

netbox/templates/dcim/racktype.html

@@ -10,7 +10,7 @@
   <div class="row">
 	  <div class="col col-6">
       <div class="card">
-        <h5 class="card-header">{% trans "Rack Type" %}</h5>
+        <h2 class="card-header">{% trans "Rack Type" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Manufacturer" %}</th>
@@ -38,7 +38,7 @@
     <div class="col col-6">
       {% include 'dcim/inc/panels/racktype_numbering.html' %}
       <div class="card">
-        <h5 class="card-header">{% trans "Weight" %}</h5>
+        <h2 class="card-header">{% trans "Weight" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Rack Weight" %}</th>

netbox/templates/dcim/rearport.html

@@ -14,7 +14,7 @@
     <div class="row">
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Rear Port" %}</h5>
+                <h2 class="card-header">{% trans "Rear Port" %}</h2>
                 <table class="table table-hover attr-table">
                     <tr>
                         <th scope="row">{% trans "Device" %}</th>
@@ -62,7 +62,7 @@
         </div>
         <div class="col col-md-6">
             <div class="card">
-                <h5 class="card-header">{% trans "Connection" %}</h5>
+                <h2 class="card-header">{% trans "Connection" %}</h2>
                 {% if object.mark_connected %}
                     <div class="card-body text-muted">
                       <span class="text-success"><i class="mdi mdi-check-bold"></i></span> {% trans "Marked as Connected" %}

netbox/templates/dcim/region.html

@@ -23,7 +23,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Region" %}</h5>
+      <h2 class="card-header">{% trans "Region" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -51,7 +51,7 @@
 <div class="row mb-3">
 	<div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Child Regions" %}
         {% if perms.dcim.add_region %}
           <div class="card-actions">
@@ -60,7 +60,7 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:region_list' parent_id=object.pk %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/dcim/site.html

@@ -25,7 +25,7 @@
 <div class="row">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Site" %}</h5>
+      <h2 class="card-header">{% trans "Site" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Region" %}</th>
@@ -123,7 +123,7 @@
 <div class="row">
   <div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Locations" %}
         {% if perms.dcim.add_location %}
           <div class="card-actions">
@@ -132,11 +132,11 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:location_list' site_id=object.pk %}
     </div>
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Non-Racked Devices" %}
         {% if perms.dcim.add_device %}
           <div class="card-actions">
@@ -145,7 +145,7 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:device_list' site_id=object.pk rack_id='null' parent_bay_id='null' %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/dcim/sitegroup.html

@@ -23,7 +23,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Site Group" %}</h5>
+      <h2 class="card-header">{% trans "Site Group" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -51,7 +51,7 @@
 <div class="row mb-3">
 	<div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">
         {% trans "Child Groups" %}
         {% if perms.dcim.add_sitegroup %}
           <div class="card-actions">
@@ -60,7 +60,7 @@
             </a>
           </div>
         {% endif %}
-      </h5>
+      </h2>
       {% htmx_table 'dcim:sitegroup_list' parent_id=object.pk %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/dcim/virtualchassis.html

@@ -17,7 +17,7 @@
 <div class="row">
 	<div class="col col-md-4">
     <div class="card">
-      <h5 class="card-header">{% trans "Virtual Chassis" %}</h5>
+      <h2 class="card-header">{% trans "Virtual Chassis" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Domain" %}</th>
@@ -49,7 +49,7 @@
     </div>
     <div class="col col-md-8">
       <div class="card">
-        <h5 class="card-header">
+        <h2 class="card-header">
           {% trans "Members" %}
           {% if perms.dcim.change_virtualchassis %}
             <div class="card-actions">
@@ -58,7 +58,7 @@
               </a>
             </div>
           {% endif %}
-        </h5>
+        </h2>
         <table class="table table-hover object-list">
           <thead>
             <tr>

netbox/templates/dcim/virtualchassis_add.html

@@ -5,7 +5,7 @@
 {% block form %}
   <div class="field-group my-5">
     <div class="row">
-      <h5 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h5>
+      <h2 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h2>
     </div>
     {% render_field form.name %}
     {% render_field form.domain %}
@@ -15,7 +15,7 @@
 
   <div class="field-group my-5">
     <div class="row">
-      <h5 class="col-9 offset-3">{% trans "Member Devices" %}</h5>
+      <h2 class="col-9 offset-3">{% trans "Member Devices" %}</h2>
     </div>
     {% render_field form.region %}
     {% render_field form.site_group %}
@@ -28,7 +28,7 @@
   {% if form.custom_fields %}
     <div class="field-group my-5">
       <div class="row">
-        <h5 class="col-9 offset-3">{% trans "Custom Fields" %}</h5>
+        <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
       </div>
       {% render_custom_fields form %}
     </div>

netbox/templates/dcim/virtualchassis_add_member.html

@@ -16,7 +16,7 @@
 
       {% csrf_token %}
       <div class="card">
-          <h5 class="card-header">{% trans "Add New Member" %}</h5>
+          <h2 class="card-header">{% trans "Add New Member" %}</h2>
           <div class="card-body">
               {% render_form member_select_form %}
               {% render_form membership_form %}

netbox/templates/dcim/virtualchassis_edit.html

@@ -21,7 +21,7 @@
       {{ formset.management_form }}
       <div class="field-group my-5">
         <div class="row">
-          <h5 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h5>
+          <h2 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h2>
         </div>
         {% render_field vc_form.name %}
         {% render_field vc_form.domain %}
@@ -37,14 +37,14 @@
       {% if vc_form.custom_fields %}
         <div class="field-group mb-5">
           <div class="row">
-            <h5 class="col-9 offset-3">{% trans "Custom Fields" %}</h5>
+            <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
           </div>
           {% render_custom_fields vc_form %}
         </div>
       {% endif %}
 
       <div class="field-group mb-5">
-        <h5 class="text-center">{% trans "Members" %}</h5>
+        <h2 class="text-center">{% trans "Members" %}</h2>
         <table class="table">
             <thead>
                 <tr>

netbox/templates/dcim/virtualdevicecontext.html

@@ -12,7 +12,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Virtual Device Context" %}</h5>
+      <h2 class="card-header">{% trans "Virtual Device Context" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -78,7 +78,7 @@
 <div class="row mb-3">
   <div class="col col-md-12">
     <div class="card">
-      <h5 class="card-header">{% trans "Interfaces" %}</h5>
+      <h2 class="card-header">{% trans "Interfaces" %}</h2>
       {% htmx_table 'dcim:interface_list' vdc_id=object.pk %}
     </div>
     {% plugin_full_width_page object %}

netbox/templates/extras/configcontext.html

@@ -7,7 +7,7 @@
   <div class="row">
     <div class="col col-md-5">
       <div class="card">
-        <h5 class="card-header">{% trans "Config Context" %}</h5>
+        <h2 class="card-header">{% trans "Config Context" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Name" %}</th>
@@ -57,7 +57,7 @@
         </table>
       </div>
       <div class="card">
-        <h5 class="card-header">{% trans "Assignment" %}</h5>
+        <h2 class="card-header">{% trans "Assignment" %}</h2>
         <table class="table table-hover attr-table">
           {% for title, objects in assigned_objects %}
             <tr>

netbox/templates/extras/configtemplate.html

@@ -7,7 +7,7 @@
   <div class="row mb-3">
     <div class="col col-md-5">
       <div class="card">
-        <h5 class="card-header">{% trans "Config Template" %}</h5>
+        <h2 class="card-header">{% trans "Config Template" %}</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">{% trans "Name" %}</th>
@@ -53,7 +53,7 @@
     </div>
     <div class="col col-md-7">
       <div class="card">
-        <h5 class="card-header">{% trans "Environment Parameters" %}</h5>
+        <h2 class="card-header">{% trans "Environment Parameters" %}</h2>
         <div class="card-body">
           <pre>{{ object.environment_params }}</pre>
         </div>
@@ -64,7 +64,7 @@
   <div class="row">
     <div class="col col-md-12">
       <div class="card">
-        <h5 class="card-header">{% trans "Template" %}</h5>
+        <h2 class="card-header">{% trans "Template" %}</h2>
         <div class="card-body">
           {% include 'inc/sync_warning.html' %}
           <pre>{{ object.template_code }}</pre>

netbox/templates/extras/customfield.html

@@ -7,7 +7,7 @@
 <div class="row mb-3">
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Custom Field" %}</h5>
+      <h2 class="card-header">{% trans "Custom Field" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -63,7 +63,7 @@
       </table>
     </div>
     <div class="card">
-      <h5 class="card-header">{% trans "Behavior" %}</h5>
+      <h2 class="card-header">{% trans "Behavior" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Search Weight" %}</th>
@@ -98,7 +98,7 @@
 	</div>
 	<div class="col col-md-6">
     <div class="card">
-      <h5 class="card-header">{% trans "Object Types" %}</h5>
+      <h2 class="card-header">{% trans "Object Types" %}</h2>
       <table class="table table-hover attr-table">
         {% for ct in object.object_types.all %}
           <tr>
@@ -108,7 +108,7 @@
       </table>
     </div>
     <div class="card">
-      <h5 class="card-header">{% trans "Validation Rules" %}</h5>
+      <h2 class="card-header">{% trans "Validation Rules" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Minimum Value" %}</th>
@@ -135,8 +135,8 @@
       </table>
     </div>
     <div class="card">
-      <h5 class="card-header">Related Objects</h5>
+      <h2 class="card-header">Related Objects</h2>
-      <ul class="list-group list-group-flush">
+      <ul class="list-group list-group-flush" role="presentation">
         {% for qs in related_models %}
           <a class="list-group-item list-group-item-action d-flex justify-content-between">
             {{ qs.model|meta:"verbose_name_plural"|bettertitle }}

netbox/templates/extras/customfieldchoiceset.html

@@ -6,7 +6,7 @@
   <div class="row mb-3">
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">Custom Field Choice Set</h5>
+        <h2 class="card-header">Custom Field Choice Set</h2>
         <table class="table table-hover attr-table">
           <tr>
             <th scope="row">Name</th>
@@ -44,7 +44,7 @@
     </div>
     <div class="col col-md-6">
       <div class="card">
-        <h5 class="card-header">Choices ({{ object.choices|length }})</h5>
+        <h2 class="card-header">Choices ({{ object.choices|length }})</h2>
         <table class="table table-hover">
           <thead>
             <tr>

netbox/templates/extras/customlink.html

@@ -7,7 +7,7 @@
 <div class="row mb-3">
 	<div class="col col-md-5">
     <div class="card">
-      <h5 class="card-header">{% trans "Custom Link" %}</h5>
+      <h2 class="card-header">{% trans "Custom Link" %}</h2>
       <table class="table table-hover attr-table">
         <tr>
           <th scope="row">{% trans "Name" %}</th>
@@ -36,7 +36,7 @@
       </table>
     </div>
     <div class="card">
-      <h5 class="card-header">{% trans "Assigned Models" %}</h5>
+      <h2 class="card-header">{% trans "Assigned Models" %}</h2>
       <table class="table table-hover attr-table">
         {% for ct in object.object_types.all %}
           <tr>
@@ -49,17 +49,13 @@
 	</div>
 	<div class="col col-md-7">
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">{% trans "Link Text" %}</h2>
-        {% trans "Link Text" %}
-      </h5>
       <div class="card-body">
         <pre>{{ object.link_text }}</pre>
       </div>
     </div>
     <div class="card">
-      <h5 class="card-header">
+      <h2 class="card-header">{% trans "Link URL" %}</h2>
-        {% trans "Link URL" %}
-      </h5>
       <div class="card-body">
         <pre>{{ object.link_url }}</pre>
       </div>

netbox/templates/extras/dashboard/widget.html

@@ -1,4 +1,5 @@
 {% load dashboard %}
+{% load i18n %}
 
 <div
     class="grid-stack-item"
@@ -9,14 +10,15 @@
     gs-id="{{ widget.id }}"
 >
   <div class="card grid-stack-item-content">
-    <div class="card-header text-{{ widget.fg_color }} bg-{{ widget.color|default:"secondary" }} px-2 py-1 d-flex flex-row">
+    <div class="card-header {% if widget.color %} text-{{ widget.fg_color }} {% endif %} bg-{{ widget.color|default:'default' }} px-2 py-1 d-flex flex-row">
       <a href="#"
         hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        aria-label="{{ widget.title }} {% trans "widget configuration" %}"
       >
-        <i class="mdi mdi-cog text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-cog {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
       <div class="card-title flex-fill text-center">
         {% if widget.title %}
@@ -28,8 +30,9 @@
         hx-target="#htmx-modal-content"
         data-bs-toggle="modal"
         data-bs-target="#htmx-modal"
+        aria-label="{% trans "Close widget" %} {{ widget.title }}"
       >
-        <i class="mdi mdi-close text-{{ widget.fg_color }}"></i>
+        <i class="mdi mdi-close {% if widget.color %} text-{{ widget.fg_color }} {% endif %}"></i>
       </a>
     </div>
     <div class="card-body p-2 pt-1 overflow-auto">