diff --git a/packages/grafana-ui/src/components/Card/Card.test.tsx b/packages/grafana-ui/src/components/Card/Card.test.tsx
new file mode 100644
index 00000000000..16325de6c28
--- /dev/null
+++ b/packages/grafana-ui/src/components/Card/Card.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('should execute callback when clicked', () => {
+    const callback = jest.fn();
+    render(<Card heading="Test Heading" onClick={callback} />);
+    fireEvent.click(screen.getByText('Test Heading'));
+    expect(callback).toBeCalledTimes(1);
+  });
+});
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index e6d77824451..5c87d935295 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -101,7 +101,7 @@ export const Card: CardInterface = ({
   const disableEvents = disabled && !actions;
 
   const containerStyles = getContainerStyles(theme, disableEvents, disableHover);
-  const onCardClick = useCallback(() => (disableHover ? () => {} : onClick), [disableHover, onClick]);
+  const onCardClick = useCallback(() => (disableHover ? () => {} : onClick?.()), [disableHover, onClick]);
 
   return (
     <CardContainer