diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
index d4792dc41..cffc10a2b 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-clock-card.vue
@@ -20,9 +20,7 @@
         </f7-col>
       </f7-row>
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -30,12 +28,14 @@
 import mixin from '../widget-mixin'
 import { actionsMixin } from '../widget-actions'
 import OhClock from '../system/oh-clock.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhClockCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin, actionsMixin],
   components: {
-    OhClock
+    OhClock,
+    OhCardFooter
   },
   widget: OhClockCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
index 179ae4a75..7a2a28b11 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-colorpicker-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center">
       <oh-colorpicker :context="context" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -18,12 +16,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhColorpicker from '../system/oh-colorpicker.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhColorpickerCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhColorpicker
+    OhColorpicker,
+    OhCardFooter
   },
   widget: OhColorpickerCardDefinition,
   data () {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
index 6f9d2a74d..8eabe12e1 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-gauge-card.vue
@@ -9,9 +9,7 @@
       </f7-link>
       <oh-gauge v-else :context="childContext(context.component)" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -27,13 +25,15 @@
 <script>
 import mixin from '../widget-mixin'
 import OhGauge from '../system/oh-gauge.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { actionsMixin } from '../widget-actions'
 import { OhGaugeCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin, actionsMixin],
   components: {
-    OhGauge
+    OhGauge,
+    OhCardFooter
   },
   widget: OhGaugeCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
index 6a9406951..341090958 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-image-card.vue
@@ -11,9 +11,7 @@
       </f7-list>
       <oh-image v-else :context="childContext(context.component)" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -37,12 +35,14 @@
 import mixin from '../widget-mixin'
 import { actionsMixin } from '../widget-actions'
 import OhImage from '../system/oh-image.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhImageCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin, actionsMixin],
   components: {
-    OhImage
+    OhImage,
+    OhCardFooter
   },
   widget: OhImageCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
index 5181a131a..fd8a6d220 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-input-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="padding">
       <oh-input class="input-card-content" :context="childContext(context.component)" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -23,12 +21,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhInput from '../system/oh-input.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhInputCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhInput
+    OhInput,
+    OhCardFooter
   },
   widget: OhInputCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
index 1cfe82dc5..8f8bb7053 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-knob-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center">
       <oh-knob :context="childContext(context.component)" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -18,12 +16,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhKnob from '../system/oh-knob.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhKnobCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhKnob
+    OhKnob,
+    OhCardFooter
   },
   widget: OhKnobCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
index 6fc518680..e59558b30 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-label-card.vue
@@ -18,9 +18,7 @@
       <!-- <f7-link class="label-link" v-if="config.action">{{context.store[config.item].displayState || context.store[config.item].state}}</f7-link> -->
       <!-- <h2>{{context.store[config.item].displayState || context.store[config.item].state}}</h2> -->
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -53,11 +51,13 @@ import { actionsMixin } from '../widget-actions'
 import { OhLabelCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 import OhTrend from '../system/oh-trend'
+import OhCardFooter from '../system/oh-card-footer.vue'
 
 export default {
   mixins: [mixin, actionsMixin],
   components: {
-    OhTrend
+    OhTrend,
+    OhCardFooter
   },
   widget: OhLabelCardDefinition,
   computed: {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
index 4f489f46a..60a8bce9b 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-list-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
       <oh-list :context="childContext(context.component)" v-on="$listeners" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhList from '../system/oh-list.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhListCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhList
+    OhList,
+    OhCardFooter
   },
   widget: OhListCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
index 2b6ad64f1..ff38574e5 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-rollershutter-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center" :style="{ height: config.vertical ? '10em' : undefined }">
       <oh-rollershutter :class="{ vertical: config.vertical }" :context="context" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -28,12 +26,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhRollershutter from '../system/oh-rollershutter.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhRollershutterCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhRollershutter
+    OhRollershutter,
+    OhCardFooter
   },
   widget: OhRollershutterCardDefinition,
   data () {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
index 1511dc65c..fc5bfe8d2 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-sipclient-card.vue
@@ -6,21 +6,21 @@
     <f7-card-content class="display-flex justify-content-center">
       <oh-sipclient v-bind="config" :context="context" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
 <script>
 import mixin from '../widget-mixin'
 import OhSipclient from '../system/oh-sipclient.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSIPClientCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhSipclient
+    OhSipclient,
+    OhCardFooter
   },
   widget: OhSIPClientCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
index 03abe1e1f..a57f9cfff 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-slider-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center" :class="{ 'slider-card-vertical': config.vertical }">
       <oh-slider :context="childContext(context.component)" :class="{ 'slider-card-vertical': config.vertical }" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhSlider from '../system/oh-slider.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSliderCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhSlider
+    OhSlider,
+    OhCardFooter
   },
   widget: OhSliderCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
index f9382dae4..1b5fa99fb 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-stepper-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center">
       <oh-stepper :context="childContext(context.component)" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhStepper from '../system/oh-stepper.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhStepperCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhStepper
+    OhStepper,
+    OhCardFooter
   },
   widget: OhStepperCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
index 92e11b6e9..b2687131b 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-swiper-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content :class="{ 'slider-card-vertical': config.vertical }">
       <oh-swiper :context="childContext(context.component)" v-on="$listeners" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -20,12 +18,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhSwiper from '../system/oh-swiper.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhSwiperCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhSwiper
+    OhSwiper,
+    OhCardFooter
   },
   widget: OhSwiperCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
index 60897ec12..2c6df4437 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-toggle-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content class="display-flex justify-content-center" style="height: calc(2 * var(--f7-toggle-width))">
       <oh-toggle class="large-vertical-toggle" :context="context" @command="onCommand" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -21,12 +19,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhToggle from '../system/oh-toggle.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhToggleCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhToggle
+    OhToggle,
+    OhCardFooter
   },
   widget: OhToggleCardDefinition,
   data () {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
index 57fc98ea4..afb89113e 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-video-card.vue
@@ -6,9 +6,7 @@
     <f7-card-content :padding="false" class="oh-video-card">
       <oh-video :context="childContext(context.component)" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
@@ -27,12 +25,14 @@
 <script>
 import mixin from '../widget-mixin'
 import OhVideo from '../system/oh-video.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhVideoCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhVideo
+    OhVideo,
+    OhCardFooter
   },
   widget: OhVideoCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
index f14b5f009..e103f4eb2 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-webframe-card.vue
@@ -6,21 +6,21 @@
     <f7-card-content :class="{ 'no-padding': !config.borders }">
       <oh-webframe :context="childContext(context.component)" />
     </f7-card-content>
-    <f7-card-footer v-if="config.footer">
-      {{ config.footer }}
-    </f7-card-footer>
+    <oh-card-footer v-if="config.footer" :texts="config.footer" />
   </f7-card>
 </template>
 
 <script>
 import mixin from '../widget-mixin'
 import OhWebframe from '../system/oh-webframe.vue'
+import OhCardFooter from '../system/oh-card-footer.vue'
 import { OhWebFrameCardDefinition } from '@/assets/definitions/widgets/standard/cards'
 
 export default {
   mixins: [mixin],
   components: {
-    OhWebframe
+    OhWebframe,
+    OhCardFooter
   },
   widget: OhWebFrameCardDefinition
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue
new file mode 100644
index 000000000..41909bf6e
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-card-footer.vue
@@ -0,0 +1,16 @@
+<template>
+  <f7-card-footer v-if="texts && !Array.isArray(texts)">
+    {{ texts }}
+  </f7-card-footer>
+  <f7-card-footer v-else-if="texts && Array.isArray(texts)">
+    <span v-for="text in texts" :key="text">
+      {{ text }}
+    </span>
+  </f7-card-footer>
+</template>
+
+<script>
+export default {
+  props: ['texts']
+}
+</script>