Updates

packages/vitec/ContentBlocks/ContentElements/intro-paragraph/config.yaml

@@ -121,6 +121,29 @@ fields:
     type: Checkbox
     default: 0
 
+  # Background colour for the whole element. No default on purpose: empty means
+  # "no background", so every existing record keeps the look it has today.
+  # The presets are the VITEC palette from Resources/Public/SCSS/_vitec.scss,
+  # in the same order as the button styles above so both dropdowns read alike.
+  # Lower-case hex, because the native colour picker emits lower case -- an
+  # upper-case preset would store the same colour under two spellings.
+  - identifier: background_color
+    type: Color
+    valuePicker:
+      items:
+        - label: 'VITEC Orange'
+          value: '#f47937'
+        - label: 'VITEC Blue'
+          value: '#26358c'
+        - label: 'VITEC Graphite'
+          value: '#313131'
+        - label: 'VITEC Midnight'
+          value: '#0d0d0d'
+        - label: 'VITEC Light Grey'
+          value: '#cccccc'
+        - label: 'White'
+          value: '#ffffff'
+
   - identifier: debug
     type: Checkbox
     default: 0

packages/vitec/ContentBlocks/ContentElements/intro-paragraph/language/labels.xlf

@@ -66,6 +66,14 @@
       <trans-unit id="fullwidth.label">
         <source>Render full-width (edge to edge)</source>
       </trans-unit>
+
+      <trans-unit id="background_color.label">
+        <source>Background Colour</source>
+      </trans-unit>
+      <trans-unit id="background_color.description">
+        <source>Background for the whole element. Leave empty for no background. The list next to the field offers the VITEC palette; any other colour can still be picked freely.</source>
+      </trans-unit>
+
       <trans-unit id="debug.label">
         <source>Allow Debug Output</source>
       </trans-unit>

packages/vitec/ContentBlocks/ContentElements/intro-paragraph/templates/backend-preview.html

@@ -60,6 +60,18 @@
             <span class="vitec-badge">↔ Full width</span>
         </f:if>
 
+        <f:comment>
+            The dot modifiers in backend-preview.css are fixed palette classes;
+            this colour is free-form, so the swatch carries the stored hex as an
+            inline style. The outline keeps white visible on the light preview.
+        </f:comment>
+        <f:if condition="{data.background_color}">
+            <span class="vitec-badge">
+                <span class="vitec-badge__dot" style="background: {data.background_color}; border: 1px solid #999;"></span>
+                BG: {data.background_color}
+            </span>
+        </f:if>
+
         <f:if condition="{data.button_text} && {data.button_link.url} == ''">
             <span class="vitec-badge vitec-badge--warning">⚠ Button text without link</span>
         </f:if>