From 19251efc25870467c08eb32de0692433360361cd Mon Sep 17 00:00:00 2001
From: jamesread <contact@jread.com>
Date: Fri, 16 Aug 2024 20:07:02 +0100
Subject: [PATCH] Document display cssClass

---
 modules/ROOT/pages/dashboards.adoc | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/modules/ROOT/pages/dashboards.adoc b/modules/ROOT/pages/dashboards.adoc
index 3f2142891..ecb4169dc 100644
--- a/modules/ROOT/pages/dashboards.adoc
+++ b/modules/ROOT/pages/dashboards.adoc
@@ -207,6 +207,37 @@ dashboards:
           - title: 'Stop {{ container.Names }}'
 ----
 
+==== CSS Classes
+
+You can also add CSS classes to the display, which can be useful for styling.
+
+[source,yaml]
+----
+dashboards:
+  - title: My Containers
+    contents:
+      - title: 'Container {{ container.Names.0 }} ({{ container.Image }})'
+        entity: container
+        type: fieldset
+        contents:
+          - type: display
+            cssClass: '{{ container.State }}'
+            title: |
+              {{ container.Status }} <br /><br /><strong>{{ container.State }}</strong>
+          - title: 'Start {{ container.Names.0 }}'
+          - title: 'Stop {{ container.Names.0 }}'
+          - title: 'Remove {{ container.Names.0 }}'
+----
+
+You can then use the following CSS to style the display;
+
+[source,css]
+----
+div.display.running {
+  color: green;
+}
+----
+
 [#output-views]
 === Most recent action output