diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 996339811c8..427a82ddac0 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -232,12 +232,17 @@ const Meta = memo(({ children, className, separator = '|' }: ChildProps & { sepa
   const styles = useStyles2(getMetaStyles);
   let meta = children;
 
+  const filtered = React.Children.toArray(children).filter(Boolean);
+  if (!filtered.length) {
+    return null;
+  }
+  meta = filtered.map((element, i) => (
+    <div key={`element_${i}`} className={styles.metadataItem}>
+      {element}
+    </div>
+  ));
   // Join meta data elements by separator
-  if (Array.isArray(children) && separator) {
-    const filtered = React.Children.toArray(children).filter(Boolean);
-    if (!filtered.length) {
-      return null;
-    }
+  if (filtered.length > 1 && separator) {
     meta = filtered.reduce((prev, curr, i) => [
       prev,
       <span key={`separator_${i}`} className={styles.separator}>
@@ -261,6 +266,9 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
     margin: theme.spacing(0.5, 0, 0),
     lineHeight: theme.typography.bodySmall.lineHeight,
     overflowWrap: 'anywhere',
+  }),
+  metadataItem: css({
+    // Needed to allow for clickable children in metadata
     zIndex: 0,
   }),
   separator: css({