diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 8f0d21a4b5c..0fc60f1d5e0 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -420,11 +420,6 @@
       "count": 1
     }
   },
-  "packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "packages/grafana-prometheus/src/querybuilder/components/LabelFilterItem.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 4
@@ -1229,16 +1224,6 @@
       "count": 1
     }
   },
-  "public/app/core/components/AppChrome/History/HistoryWrapper.tsx": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
-  "public/app/core/components/AppNotifications/StoredNotificationItem.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/core/components/DynamicImports/SafeDynamicImport.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
@@ -1285,11 +1270,6 @@
       "count": 1
     }
   },
-  "public/app/core/components/NavLandingPage/NavLandingPageCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/core/components/OptionsUI/NumberInput.tsx": {
     "no-restricted-syntax": {
       "count": 1
@@ -1540,11 +1520,6 @@
       "count": 1
     }
   },
-  "public/app/features/admin/ServerStatsCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/admin/UserCreatePage.tsx": {
     "no-restricted-syntax": {
       "count": 4
@@ -1624,16 +1599,6 @@
       "count": 2
     }
   },
-  "public/app/features/alerting/unified/AlertsFolderView.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "public/app/features/alerting/unified/RedirectToRuleViewer.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/alerting/unified/components/AlertLabelDropdown.tsx": {
     "no-restricted-syntax": {
       "count": 1
@@ -1745,11 +1710,6 @@
       "count": 1
     }
   },
-  "public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx": {
     "no-restricted-syntax": {
       "count": 1
@@ -1836,9 +1796,6 @@
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     },
-    "no-restricted-syntax": {
-      "count": 1
-    },
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
     }
@@ -1883,11 +1840,6 @@
       "count": 1
     }
   },
-  "public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/alerting/unified/components/rules/Filter/RulesFilter.v1.tsx": {
     "no-restricted-syntax": {
       "count": 4
@@ -1913,11 +1865,6 @@
       "count": 1
     }
   },
-  "public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/alerting/unified/components/silences/MatchersField.tsx": {
     "no-restricted-syntax": {
       "count": 5
@@ -1984,11 +1931,6 @@
       "count": 6
     }
   },
-  "public/app/features/alerting/unified/rule-list/FilterViewStatus.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/alerting/unified/types/alerting.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 5
@@ -2136,11 +2078,6 @@
       "count": 1
     }
   },
-  "public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/connections/tabs/ConnectData/CardGrid/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 1
@@ -2187,11 +2124,6 @@
       "count": 2
     }
   },
-  "public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx": {
-    "no-restricted-syntax": {
-      "count": 3
-    }
-  },
   "public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2
@@ -2210,11 +2142,6 @@
       "count": 4
     }
   },
-  "public/app/features/correlations/components/EmptyCorrelationsCTA.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/correlations/types.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 2
@@ -2491,11 +2418,6 @@
       "count": 4
     }
   },
-  "public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/settings/variables/components/AdHocVariableForm.tsx": {
     "no-restricted-syntax": {
       "count": 1
@@ -2880,11 +2802,6 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2
@@ -3078,19 +2995,6 @@
   "public/app/features/datasources/components/DataSourceTypeCard.tsx": {
     "@grafana/no-aria-label-selectors": {
       "count": 1
-    },
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "public/app/features/datasources/components/DataSourcesListCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
-  "public/app/features/datasources/components/picker/DataSourceCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
     }
   },
   "public/app/features/datasources/state/actions.test.ts": {
@@ -3185,7 +3089,7 @@
   },
   "public/app/features/explore/CorrelationHelper.tsx": {
     "no-restricted-syntax": {
-      "count": 3
+      "count": 2
     }
   },
   "public/app/features/explore/CorrelationTransformationAddModal.tsx": {
@@ -3558,11 +3462,6 @@
       "count": 1
     }
   },
-  "public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/manage-dashboards/state/actions.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -3649,11 +3548,6 @@
       "count": 1
     }
   },
-  "public/app/features/playlist/PlaylistCard.tsx": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
   "public/app/features/playlist/PlaylistForm.tsx": {
     "@grafana/no-aria-label-selectors": {
       "count": 2
@@ -3793,11 +3687,6 @@
       "count": 2
     }
   },
-  "public/app/features/provisioning/File/FileHistoryPage.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/features/provisioning/File/FileStatusPage.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2
@@ -4392,7 +4281,7 @@
   },
   "public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx": {
     "no-restricted-syntax": {
-      "count": 2
+      "count": 1
     }
   },
   "public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/index.tsx": {
@@ -4970,11 +4859,6 @@
       "count": 1
     }
   },
-  "public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/plugins/datasource/loki/querybuilder/state.ts": {
     "no-restricted-syntax": {
       "count": 2
@@ -5148,11 +5032,6 @@
       "count": 1
     }
   },
-  "public/app/plugins/panel/annolist/AnnotationListItem.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
   "public/app/plugins/panel/barchart/bars.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
diff --git a/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx b/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
index b61f64ec58d..5d8a74f787a 100644
--- a/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
@@ -28,7 +28,7 @@ export const QueryPattern = (props: Props) => {
   const lang = { grammar: promqlGrammar, name: 'promql' };
 
   return (
-    <Card className={styles.card}>
+    <Card noMargin className={styles.card}>
       <Card.Heading>{pattern.name}</Card.Heading>
       <div className={styles.rawQueryContainer}>
         <RawQuery
diff --git a/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx b/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
index 565eef17121..a4f17087b21 100644
--- a/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
@@ -6,7 +6,7 @@ import { useMemo, useState } from 'react';
 import { CoreApp, DataQuery, getNextRefId, GrafanaTheme2 } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, Collapse, Modal, useStyles2 } from '@grafana/ui';
+import { Button, Collapse, Modal, Stack, useStyles2 } from '@grafana/ui';
 
 import { PromQuery } from '../types';
 
@@ -125,7 +125,7 @@ export const QueryPatternsModal = (props: Props) => {
               );
             }}
           >
-            <div className={styles.cardsContainer}>
+            <Stack wrap justifyContent="space-between">
               {promQueryModeller
                 .getQueryPatterns()
                 .filter((pattern) => pattern.type === patternType)
@@ -140,7 +140,7 @@ export const QueryPatternsModal = (props: Props) => {
                     setSelectedPatternName={setSelectedPatternName}
                   />
                 ))}
-            </div>
+            </Stack>
           </Collapse>
         );
       })}
@@ -160,12 +160,6 @@ export const QueryPatternsModal = (props: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    cardsContainer: css({
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    }),
     spacing: css({
       marginBottom: theme.spacing(1),
     }),
diff --git a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx
index f6120e81c8c..d25c86d6f3d 100644
--- a/public/app/core/components/AppChrome/History/HistoryWrapper.tsx
+++ b/public/app/core/components/AppChrome/History/HistoryWrapper.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { FieldType, GrafanaTheme2, store } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Button, Card, IconButton, Space, Stack, Text, useStyles2, Box, Sparkline, useTheme2, Icon } from '@grafana/ui';
+import { Box, Button, Card, Icon, IconButton, Space, Sparkline, Stack, Text, useStyles2, useTheme2 } from '@grafana/ui';
 import { formatDate } from 'app/core/internationalization/dates';
 
 import { HISTORY_LOCAL_STORAGE_KEY } from '../AppChromeService';
@@ -123,6 +123,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
             className={isExpanded ? styles.iconButtonDot : styles.iconButtonCircle}
           />
           <Card
+            noMargin
             onClick={() => {
               store.setObject('CLICKING_HISTORY', true);
               onClick();
@@ -182,6 +183,7 @@ function HistoryEntryAppView({ entry, isSelected, onClick }: ItemProps) {
               return (
                 <Card
                   key={index}
+                  noMargin
                   href={view.url}
                   onClick={() => {
                     store.setObject('CLICKING_HISTORY', true);
diff --git a/public/app/core/components/AppNotifications/StoredNotificationItem.tsx b/public/app/core/components/AppNotifications/StoredNotificationItem.tsx
index 2592d978175..c3df7d40596 100644
--- a/public/app/core/components/AppNotifications/StoredNotificationItem.tsx
+++ b/public/app/core/components/AppNotifications/StoredNotificationItem.tsx
@@ -32,7 +32,7 @@ export const StoredNotificationItem = ({
   const styles = getStyles(theme);
 
   return (
-    <Card className={className} onClick={onClick}>
+    <Card noMargin className={className} onClick={onClick}>
       <Card.Heading>{title}</Card.Heading>
       <Card.Description>{children}</Card.Description>
       <Card.Figure>
diff --git a/public/app/core/components/NavLandingPage/NavLandingPageCard.tsx b/public/app/core/components/NavLandingPage/NavLandingPageCard.tsx
index 0b24a12b524..4eb223b4f59 100644
--- a/public/app/core/components/NavLandingPage/NavLandingPageCard.tsx
+++ b/public/app/core/components/NavLandingPage/NavLandingPageCard.tsx
@@ -12,7 +12,7 @@ interface Props {
 export function NavLandingPageCard({ description, text, url }: Props) {
   const styles = useStyles2(getStyles);
   return (
-    <Card className={styles.card} href={url}>
+    <Card noMargin className={styles.card} href={url}>
       <Card.Heading>{text}</Card.Heading>
       <Card.Description className={styles.description}>{description}</Card.Description>
     </Card>
@@ -21,7 +21,6 @@ export function NavLandingPageCard({ description, text, url }: Props) {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   card: css({
-    marginBottom: 0,
     gridTemplateRows: '1fr 0 2fr',
   }),
   // Limit descriptions to 3 lines max before ellipsing
diff --git a/public/app/features/admin/ServerStatsCard.tsx b/public/app/features/admin/ServerStatsCard.tsx
index c9ae7e3b2f4..070005e7e3a 100644
--- a/public/app/features/admin/ServerStatsCard.tsx
+++ b/public/app/features/admin/ServerStatsCard.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Card, Stack, useStyles2, Tooltip, Icon } from '@grafana/ui';
+import { Card, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 
 interface StatItem {
   name: string;
@@ -21,7 +21,7 @@ export interface Props {
 export const ServerStatsCard = ({ content, footer, isLoading }: Props) => {
   const styles = useStyles2(getStyles);
   return (
-    <Card className={styles.container}>
+    <Card noMargin className={styles.container}>
       {content.map((item, index) => (
         <Stack key={index} justifyContent="space-between" alignItems="center">
           <Stack alignItems={'center'}>
@@ -50,7 +50,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       flexDirection: 'column',
       gap: theme.spacing(2),
-      margin: 0,
       padding: theme.spacing(2),
     }),
     indent: css({
diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx
index 01841e51364..9174af5a022 100644
--- a/public/app/features/alerting/unified/AlertsFolderView.tsx
+++ b/public/app/features/alerting/unified/AlertsFolderView.tsx
@@ -83,10 +83,11 @@ export const AlertsFolderView = ({ folder, rules }: Props) => {
           />
         </Stack>
 
-        <Stack direction="column" gap={1}>
+        <Stack direction="column">
           {pageItems.map(({ grafana_alert, labels = {} }) => (
             <Card
               key={grafana_alert.uid}
+              noMargin
               href={createGrafanaRuleViewLink(grafana_alert)}
               className={styles.card}
               data-testid="alert-card-row"
@@ -200,7 +201,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   }),
   card: css({
     gridTemplateColumns: 'auto 1fr 2fr',
-    margin: 0,
   }),
   pagination: css({
     alignSelf: 'center',
diff --git a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx
index 33c8f7918a4..96410c28320 100644
--- a/public/app/features/alerting/unified/RedirectToRuleViewer.tsx
+++ b/public/app/features/alerting/unified/RedirectToRuleViewer.tsx
@@ -130,7 +130,7 @@ export function RedirectToRuleViewer(): JSX.Element | null {
       <div className={styles.rules}>
         {rules.map((rule, index) => {
           return (
-            <Card key={`${rule.name}-${index}`} href={createViewLink(rulesSource, rule, '/alerting/list')}>
+            <Card noMargin key={`${rule.name}-${index}`} href={createViewLink(rulesSource, rule, '/alerting/list')}>
               <Card.Heading>{rule.name}</Card.Heading>
               <Card.Meta separator={''}>
                 <Icon name="folder" />
diff --git a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
index 127b59256f0..9d629cee17c 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
@@ -102,7 +102,7 @@ export const GenerateAlertDataModal = ({ isOpen, onDismiss, onAccept }: Props) =
             setStatus('firing');
           }}
         >
-          <Card>
+          <Card noMargin>
             <Stack direction="column" gap={1}>
               <div className={styles.section}>
                 <AnnotationsStep />
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
index bf35a7ae018..0bdd3089eb8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
@@ -283,7 +283,7 @@ const DatasourceNotFound = ({ index, onUpdateDatasource, onRemoveQuery, model }:
   return (
     <EmptyQueryWrapper>
       <QueryOperationRow title={refId} draggable index={index} id={refId} isOpen collapsable={false}>
-        <Card>
+        <Card noMargin>
           <Card.Heading>
             <Trans i18nKey="alerting.datasource-not-found.this-datasource-has-been-removed">
               This datasource has been removed
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
index 3568fa5985c..05d3657d549 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleType.tsx
@@ -30,7 +30,7 @@ const RuleType = (props: Props) => {
   });
 
   return (
-    <Card className={cardStyles} isSelected={selected} onClick={() => onClick(value)} disabled={disabled}>
+    <Card noMargin className={cardStyles} isSelected={selected} onClick={() => onClick(value)} disabled={disabled}>
       <Card.Figure>
         <img src={image} alt="" />
       </Card.Figure>
diff --git a/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx b/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx
index b38cd2188b8..36013c290c5 100644
--- a/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx
+++ b/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx
@@ -43,7 +43,7 @@ export function AlertmanagerCard({
   const showActions = !provisioned && Boolean(onEnable) && Boolean(onDisable);
 
   return (
-    <Card data-testid={`alertmanager-card-${name}`}>
+    <Card noMargin data-testid={`alertmanager-card-${name}`}>
       <Card.Heading>
         <Stack alignItems="center" gap={1}>
           {href ? (
diff --git a/public/app/features/alerting/unified/rule-list/FilterViewStatus.tsx b/public/app/features/alerting/unified/rule-list/FilterViewStatus.tsx
index d01abb822b8..aef6553e0f2 100644
--- a/public/app/features/alerting/unified/rule-list/FilterViewStatus.tsx
+++ b/public/app/features/alerting/unified/rule-list/FilterViewStatus.tsx
@@ -10,7 +10,7 @@ interface FilterStatusProps {
 
 export function FilterStatus({ state, numberOfRules, onCancel }: FilterStatusProps) {
   return (
-    <Card>
+    <Card noMargin>
       <Text color="secondary">
         {/* done searching everything and found some results */}
         {state === 'done' && (
diff --git a/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx b/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
index 80b08bb663e..ce1e9b51681 100644
--- a/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
+++ b/public/app/features/connections/tabs/ConnectData/CardGrid/CardGrid.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { featureEnabled } from '@grafana/runtime';
-import { Card, Grid, useStyles2, Stack, Badge } from '@grafana/ui';
+import { Badge, Card, Grid, Stack, useStyles2 } from '@grafana/ui';
 import { PluginDeprecatedBadge } from 'app/features/plugins/admin/components/Badges/PluginDeprecatedBadge';
 import { PluginDisabledBadge } from 'app/features/plugins/admin/components/Badges/PluginDisabledBadge';
 import { PluginInstalledBadge } from 'app/features/plugins/admin/components/Badges/PluginInstallBadge';
@@ -85,6 +85,7 @@ export const CardGrid = ({ items, onClickItem }: CardGridProps) => {
       {items.map((item) => (
         <Card
           key={item.id}
+          noMargin
           className={styles.card}
           href={item.url}
           onClick={(e) => {
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
index 830684e8704..75c0ee9e353 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
-import { Card, Field, FieldSet, Input, useStyles2 } from '@grafana/ui';
+import { Card, Field, FieldSet, Input, Stack, useStyles2 } from '@grafana/ui';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
@@ -94,74 +94,78 @@ export const ConfigureCorrelationSourceForm = () => {
             variables.
           </p>
         </Trans>
-        <Controller
-          control={control}
-          name="sourceUID"
-          rules={{
-            required: {
-              value: true,
-              message: t('correlations.source-form.control-required', 'This field is required.'),
-            },
-          }}
-          render={({ field: { onChange, value } }) => (
-            <Field
-              label={t('correlations.source-form.source-label', 'Source')}
-              description={t(
-                'correlations.source-form.source-description',
-                'Results from selected source data source have links displayed in the panel'
-              )}
-              htmlFor="source"
-              invalid={!!formState.errors.sourceUID}
-              error={formState.errors.sourceUID?.message}
-            >
-              <DataSourcePicker
-                onChange={withDsUID(onChange)}
-                noDefault
-                current={value}
-                inputId="source"
-                width={32}
-                disabled={correlation !== undefined}
-              />
-            </Field>
-          )}
-        />
-
-        <Field
-          label={t('correlations.source-form.results-label', 'Results field')}
-          description={t(
-            'correlations.source-form.results-description',
-            'The link will be shown next to the value of this field'
-          )}
-          className={styles.label}
-          invalid={!!formState.errors?.config?.field}
-          error={formState.errors?.config?.field?.message}
-        >
-          <Input
-            id={getInputId('field', correlation)}
-            {...register('config.field', {
-              required: t('correlations.source-form.results-required', 'This field is required.'),
-            })}
-            readOnly={readOnly}
+        <Stack direction="column" gap={2}>
+          <Controller
+            control={control}
+            name="sourceUID"
+            rules={{
+              required: {
+                value: true,
+                message: t('correlations.source-form.control-required', 'This field is required.'),
+              },
+            }}
+            render={({ field: { onChange, value } }) => (
+              <Field
+                noMargin
+                label={t('correlations.source-form.source-label', 'Source')}
+                description={t(
+                  'correlations.source-form.source-description',
+                  'Results from selected source data source have links displayed in the panel'
+                )}
+                htmlFor="source"
+                invalid={!!formState.errors.sourceUID}
+                error={formState.errors.sourceUID?.message}
+              >
+                <DataSourcePicker
+                  onChange={withDsUID(onChange)}
+                  noDefault
+                  current={value}
+                  inputId="source"
+                  width={32}
+                  disabled={correlation !== undefined}
+                />
+              </Field>
+            )}
           />
-        </Field>
-        {variables.length > 0 && (
-          <Card>
-            <Card.Heading>{formText.heading}</Card.Heading>
-            <Card.Description>
-              {formText.descriptionPre}
-              <VariableList />
-              <br />
-              <Trans i18nKey="correlations.source-form.description">
-                A data point needs to provide values to all variables as fields or as transformations output to make the
-                correlation button appear in the visualization.
+
+          <Field
+            noMargin
+            label={t('correlations.source-form.results-label', 'Results field')}
+            description={t(
+              'correlations.source-form.results-description',
+              'The link will be shown next to the value of this field'
+            )}
+            className={styles.label}
+            invalid={!!formState.errors?.config?.field}
+            error={formState.errors?.config?.field?.message}
+          >
+            <Input
+              id={getInputId('field', correlation)}
+              {...register('config.field', {
+                required: t('correlations.source-form.results-required', 'This field is required.'),
+              })}
+              readOnly={readOnly}
+            />
+          </Field>
+          {variables.length > 0 && (
+            <Card noMargin>
+              <Card.Heading>{formText.heading}</Card.Heading>
+              <Card.Description>
+                {formText.descriptionPre}
+                <VariableList />
                 <br />
-                Note: Not every variable needs to be explicitly defined below. A transformation such as{' '}
-                <span className={styles.variable}>logfmt</span> will create variables for every key/value pair.
-              </Trans>
-            </Card.Description>
-          </Card>
-        )}
-        <TransformationsEditor readOnly={readOnly} />
+                <Trans i18nKey="correlations.source-form.description">
+                  A data point needs to provide values to all variables as fields or as transformations output to make
+                  the correlation button appear in the visualization.
+                  <br />
+                  Note: Not every variable needs to be explicitly defined below. A transformation such as{' '}
+                  <span className={styles.variable}>logfmt</span> will create variables for every key/value pair.
+                </Trans>
+              </Card.Description>
+            </Card>
+          )}
+          <TransformationsEditor readOnly={readOnly} />
+        </Stack>
       </FieldSet>
     </>
   );
diff --git a/public/app/features/correlations/components/EmptyCorrelationsCTA.tsx b/public/app/features/correlations/components/EmptyCorrelationsCTA.tsx
index cf677f2b992..8e9c7a65b63 100644
--- a/public/app/features/correlations/components/EmptyCorrelationsCTA.tsx
+++ b/public/app/features/correlations/components/EmptyCorrelationsCTA.tsx
@@ -23,7 +23,7 @@ export const EmptyCorrelationsCTA = ({ onClick, canWriteCorrelations }: Props) =
       </Trans>
     </EmptyState>
   ) : (
-    <Card>
+    <Card noMargin>
       <Card.Heading>
         <Trans i18nKey="correlations.empty-correlations-cta.there-are-no-correlations-configured-yet">
           There are no correlations configured yet.
diff --git a/public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx b/public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx
index 9003f9fff45..0cefe5cec8a 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx
@@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { SceneVariable, SceneVariableSet } from '@grafana/scenes';
-import { Stack, Button, useStyles2, Text, Box, Card } from '@grafana/ui';
+import { Box, Button, Card, Stack, Text, useStyles2 } from '@grafana/ui';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
@@ -130,18 +130,21 @@ function VariableTypeSelection({ onAddVariable }: VariableTypeSelectionProps) {
       <Box paddingBottom={1} display={'flex'}>
         <Trans i18nKey="dashboard.edit-pane.variables.select-type">Choose variable type</Trans>
       </Box>
-      {options.map((option) => (
-        <Card
-          isCompact
-          onClick={() => onAddVariable(option.value!)}
-          key={option.value}
-          title={t('dashboard.edit-pane.variables.select-type-card-tooltip', 'Click to select type')}
-          data-testid={selectors.components.PanelEditor.ElementEditPane.variableType(option.value!)}
-        >
-          <Card.Heading>{option.label}</Card.Heading>
-          <Card.Description className={styles.cardDescription}>{option.description}</Card.Description>
-        </Card>
-      ))}
+      <Stack direction="column">
+        {options.map((option) => (
+          <Card
+            isCompact
+            noMargin
+            onClick={() => onAddVariable(option.value!)}
+            key={option.value}
+            title={t('dashboard.edit-pane.variables.select-type-card-tooltip', 'Click to select type')}
+            data-testid={selectors.components.PanelEditor.ElementEditPane.variableType(option.value!)}
+          >
+            <Card.Heading>{option.label}</Card.Heading>
+            <Card.Description className={styles.cardDescription}>{option.description}</Card.Description>
+          </Card>
+        ))}
+      </Stack>
     </Stack>
   );
 }
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx
index 2939ff59ad7..d1c4ca79d95 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx
@@ -4,7 +4,7 @@ import { FormEventHandler, KeyboardEventHandler, ReactNode } from 'react';
 import { DocsId, GrafanaTheme2, LocalStorageValueProvider, TransformerRegistryItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { Card, Container, Alert, Input, useStyles2, Stack } from '@grafana/ui';
+import { Alert, Card, Container, Input, Stack, useStyles2 } from '@grafana/ui';
 import { getDocsLink } from 'app/core/utils/docsLinks';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 
@@ -107,6 +107,7 @@ function TransformationCard({ transform, onClick }: TransformationCardProps) {
   const styles = useStyles2(getStyles);
   return (
     <Card
+      noMargin
       className={styles.card}
       data-testid={selectors.components.TransformTab.newTransform(transform.name)}
       onClick={onClick}
diff --git a/public/app/features/datasources/components/DataSourceTypeCard.tsx b/public/app/features/datasources/components/DataSourceTypeCard.tsx
index 2bda4985cea..c7ce0260d88 100644
--- a/public/app/features/datasources/components/DataSourceTypeCard.tsx
+++ b/public/app/features/datasources/components/DataSourceTypeCard.tsx
@@ -19,7 +19,7 @@ export function DataSourceTypeCard({ onClick, dataSourcePlugin }: Props) {
   const styles = useStyles2(getStyles);
 
   return (
-    <Card className={cx(styles.card, 'card-parent')} onClick={isClickable ? onClick : () => {}}>
+    <Card noMargin className={cx(styles.card, 'card-parent')} onClick={isClickable ? onClick : () => {}}>
       {/* Name */}
       <Card.Heading
         className={styles.heading}
diff --git a/public/app/features/datasources/components/DataSourcesList.tsx b/public/app/features/datasources/components/DataSourcesList.tsx
index 94e8135a872..8113bba85e0 100644
--- a/public/app/features/datasources/components/DataSourcesList.tsx
+++ b/public/app/features/datasources/components/DataSourcesList.tsx
@@ -160,7 +160,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     list: css({
       listStyle: 'none',
       display: 'grid',
-      // gap: '8px', Add back when legacy support for old Card interface is dropped
+      gap: theme.spacing(1),
     }),
   };
 };
diff --git a/public/app/features/datasources/components/DataSourcesListCard.tsx b/public/app/features/datasources/components/DataSourcesListCard.tsx
index 3c9d0424d9a..39a50961412 100644
--- a/public/app/features/datasources/components/DataSourcesListCard.tsx
+++ b/public/app/features/datasources/components/DataSourcesListCard.tsx
@@ -21,7 +21,7 @@ export function DataSourcesListCard({ dataSource, hasWriteRights, hasExploreRigh
   const styles = useStyles2(getStyles);
 
   return (
-    <Card href={hasWriteRights ? dsLink : undefined}>
+    <Card noMargin href={hasWriteRights ? dsLink : undefined}>
       <Card.Heading>{dataSource.name}</Card.Heading>
       <Card.Figure>
         <img src={dataSource.typeLogoUrl} alt="" height="40px" width="40px" className={styles.logo} />
@@ -80,7 +80,7 @@ export function DataSourcesListCard({ dataSource, hasWriteRights, hasExploreRigh
 function DataSourcesListCardSkeleton({ hasExploreRights }: Pick<Props, 'hasExploreRights'>) {
   const skeletonStyles = useStyles2(getSkeletonStyles);
   return (
-    <Card>
+    <Card noMargin>
       <Card.Heading>
         <Skeleton width={140} />
       </Card.Heading>
diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
index c1a5f4d3345..3f2a429a786 100644
--- a/public/app/features/datasources/components/picker/DataSourceCard.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
-import { Card, TagList, useTheme2, Icon } from '@grafana/ui';
+import { Card, Icon, TagList, useTheme2 } from '@grafana/ui';
 
 interface DataSourceCardProps {
   ds: DataSourceInstanceSettings;
@@ -27,6 +27,7 @@ export function DataSourceCard({
   return (
     <Card
       key={ds.uid}
+      noMargin
       onClick={onClick}
       className={cx(styles.card, selected ? styles.selected : undefined)}
       {...htmlProps}
@@ -64,8 +65,6 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
     card: css({
       cursor: 'pointer',
       backgroundColor: 'transparent',
-      // Move to list component
-      marginBottom: 0,
       padding: theme.spacing(1),
 
       '&:hover': {
@@ -75,7 +74,7 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
     heading: css({
       width: '100%',
       overflow: 'hidden',
-      // This is needed to enable ellipsis when text overlfows
+      // This is needed to enable ellipsis when text overflows
       '> button': {
         width: '100%',
       },
diff --git a/public/app/features/explore/CorrelationHelper.tsx b/public/app/features/explore/CorrelationHelper.tsx
index bf57509bf63..9a323e6a47c 100644
--- a/public/app/features/explore/CorrelationHelper.tsx
+++ b/public/app/features/explore/CorrelationHelper.tsx
@@ -1,23 +1,23 @@
 import { css } from '@emotion/css';
-import { useState, useEffect, useId } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useAsync } from 'react-use';
 
 import { DataLinkTransformationConfig, ExploreCorrelationHelperData, GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
 import {
-  Collapse,
   Alert,
-  Field,
-  Input,
   Button,
   Card,
-  IconButton,
-  useStyles2,
+  Collapse,
   DeleteButton,
-  Tooltip,
+  Field,
   Icon,
+  IconButton,
+  Input,
   Stack,
+  Tooltip,
+  useStyles2,
 } from '@grafana/ui';
 import { useDispatch, useSelector } from 'app/types/store';
 
@@ -241,7 +241,7 @@ export const CorrelationHelper = ({ exploreId, correlations }: Props) => {
               ) : undefined,
             ].filter((val) => val);
             return (
-              <Card key={`trans-${i}`}>
+              <Card noMargin key={`trans-${i}`}>
                 <Card.Heading>
                   {field}: {type}
                 </Card.Heading>
diff --git a/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx b/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx
index 642d2c64ac7..d14fd970d1d 100644
--- a/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx
+++ b/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx
@@ -59,7 +59,7 @@ const PublicDashboardCard = ({ pd }: { pd: PublicDashboardListResponse }) => {
 
   const translatedPauseSharingText = t('shared-dashboard-list.toggle.pause-sharing-toggle-text', 'Pause access');
   return (
-    <Card className={styles.card} href={`/d/${pd.dashboardUid}`}>
+    <Card noMargin className={styles.card} href={`/d/${pd.dashboardUid}`}>
       <Card.Heading className={styles.heading}>
         <span>{pd.title}</span>
       </Card.Heading>
@@ -173,6 +173,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
   list: css({
     listStyleType: 'none',
     marginBottom: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
   }),
   card: css({
     [theme.breakpoints.up('sm')]: {
diff --git a/public/app/features/playlist/PlaylistCard.tsx b/public/app/features/playlist/PlaylistCard.tsx
index b0bfb548c81..6eb5202563b 100644
--- a/public/app/features/playlist/PlaylistCard.tsx
+++ b/public/app/features/playlist/PlaylistCard.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Trans, t } from '@grafana/i18n';
+import { t, Trans } from '@grafana/i18n';
 import { Button, Card, LinkButton, ModalsController, Stack, useStyles2 } from '@grafana/ui';
 import { attachSkeleton, SkeletonComponent } from '@grafana/ui/unstable';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -20,7 +20,7 @@ interface Props {
 
 const PlaylistCardComponent = ({ playlist, setStartPlaylist, setPlaylistToDelete }: Props) => {
   return (
-    <Card>
+    <Card noMargin>
       <Card.Heading>
         {playlist.spec?.title}
         <ModalsController key="button-share">
@@ -66,7 +66,7 @@ const PlaylistCardComponent = ({ playlist, setStartPlaylist, setPlaylistToDelete
 const PlaylistCardSkeleton: SkeletonComponent = ({ rootProps }) => {
   const skeletonStyles = useStyles2(getSkeletonStyles);
   return (
-    <Card {...rootProps}>
+    <Card noMargin {...rootProps}>
       <Card.Heading>
         <Skeleton width={140} />
       </Card.Heading>
diff --git a/public/app/features/playlist/PlaylistPageList.tsx b/public/app/features/playlist/PlaylistPageList.tsx
index 49b4cc6c51a..868b21e1453 100644
--- a/public/app/features/playlist/PlaylistPageList.tsx
+++ b/public/app/features/playlist/PlaylistPageList.tsx
@@ -48,6 +48,7 @@ function getStyles(theme: GrafanaTheme2) {
   return {
     list: css({
       display: 'grid',
+      gap: theme.spacing(1),
     }),
     listItem: css({
       listStyle: 'none',
diff --git a/public/app/features/plugins/admin/components/ConnectionsTab.tsx b/public/app/features/plugins/admin/components/ConnectionsTab.tsx
index 70a2a26f900..309cfdef7da 100644
--- a/public/app/features/plugins/admin/components/ConnectionsTab.tsx
+++ b/public/app/features/plugins/admin/components/ConnectionsTab.tsx
@@ -103,7 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     list: css({
       listStyle: 'none',
       display: 'grid',
-      // gap: '8px', Add back when legacy support for old Card interface is dropped
+      gap: theme.spacing(1),
     }),
   };
 };
diff --git a/public/app/features/provisioning/File/FileHistoryPage.tsx b/public/app/features/provisioning/File/FileHistoryPage.tsx
index f1a4274ada7..6c187d99126 100644
--- a/public/app/features/provisioning/File/FileHistoryPage.tsx
+++ b/public/app/features/provisioning/File/FileHistoryPage.tsx
@@ -78,7 +78,7 @@ function HistoryView({ history, path, repo }: Props) {
   return (
     <Stack direction={'column'}>
       {history.items.map((item) => (
-        <Card href={`${PROVISIONING_URL}/${repo}/file/${path}?ref=${item.ref}`} key={item.ref}>
+        <Card noMargin href={`${PROVISIONING_URL}/${repo}/file/${path}?ref=${item.ref}`} key={item.ref}>
           <Card.Heading>{item.message}</Card.Heading>
           <Card.Meta>
             <span>{formatTimestamp(item.createdAt)}</span>
diff --git a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx
index 204bc43d984..5116a7b86fb 100644
--- a/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/AzureCheatSheet.tsx
@@ -13,6 +13,7 @@ import {
   LoadingPlaceholder,
   ScrollContainer,
   Select,
+  Stack,
   useStyles2,
 } from '@grafana/ui';
 
@@ -190,50 +191,52 @@ const AzureCheatSheet = (props: AzureCheatSheetProps) => {
                     onToggle={(isOpen) => setAreDropdownsOpen({ ...areDropdownsOpen, [category]: isOpen })}
                     key={category}
                   >
-                    {visibleQueries[category]!.map((query) => {
-                      return (
-                        <Card className={styles.card} key={query.id}>
-                          <Card.Heading>{query.displayName}</Card.Heading>
-                          <ScrollContainer showScrollIndicators maxHeight="100px">
-                            <RawQuery
-                              aria-label={t(
-                                'components.azure-cheat-sheet.aria-label-raw-query',
-                                '{{queryDisplayName}} raw query',
-                                { queryDisplayName: query.displayName }
-                              )}
-                              query={query.body}
-                              lang={lang}
-                              className={styles.rawQuery}
-                            />
-                          </ScrollContainer>
-                          <Card.Actions>
-                            <Button
-                              size="sm"
-                              aria-label={t(
-                                'components.azure-cheat-sheet.aria-label-use-query',
-                                'Use this query button'
-                              )}
-                              onClick={() => {
-                                props.onChange({
-                                  refId: 'A',
-                                  queryType: AzureQueryType.LogAnalytics,
-                                  azureLogAnalytics: { query: query.body },
-                                  datasource: props.datasource,
-                                });
-                                reportInteraction('grafana_azure_cheatsheet_logs_query_selected', {
-                                  id: query.id,
-                                  queryName: query.displayName,
-                                  query: query.body,
-                                  queryCategories: query.related.categories,
-                                });
-                              }}
-                            >
-                              <Trans i18nKey="components.azure-cheat-sheet.button-use-query">Use this query</Trans>
-                            </Button>
-                          </Card.Actions>
-                        </Card>
-                      );
-                    })}
+                    <Stack direction="column">
+                      {visibleQueries[category]!.map((query) => {
+                        return (
+                          <Card noMargin className={styles.card} key={query.id}>
+                            <Card.Heading>{query.displayName}</Card.Heading>
+                            <ScrollContainer showScrollIndicators maxHeight="100px">
+                              <RawQuery
+                                aria-label={t(
+                                  'components.azure-cheat-sheet.aria-label-raw-query',
+                                  '{{queryDisplayName}} raw query',
+                                  { queryDisplayName: query.displayName }
+                                )}
+                                query={query.body}
+                                lang={lang}
+                                className={styles.rawQuery}
+                              />
+                            </ScrollContainer>
+                            <Card.Actions>
+                              <Button
+                                size="sm"
+                                aria-label={t(
+                                  'components.azure-cheat-sheet.aria-label-use-query',
+                                  'Use this query button'
+                                )}
+                                onClick={() => {
+                                  props.onChange({
+                                    refId: 'A',
+                                    queryType: AzureQueryType.LogAnalytics,
+                                    azureLogAnalytics: { query: query.body },
+                                    datasource: props.datasource,
+                                  });
+                                  reportInteraction('grafana_azure_cheatsheet_logs_query_selected', {
+                                    id: query.id,
+                                    queryName: query.displayName,
+                                    query: query.body,
+                                    queryCategories: query.related.categories,
+                                  });
+                                }}
+                              >
+                                <Trans i18nKey="components.azure-cheat-sheet.button-use-query">Use this query</Trans>
+                              </Button>
+                            </Card.Actions>
+                          </Card>
+                        );
+                      })}
+                    </Stack>
                   </Collapse>
                 );
               }
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
index 7edaf3ead6d..28e3b888c99 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
@@ -25,7 +25,7 @@ export const QueryPattern = (props: Props) => {
   const lang = { grammar: logqlGrammar, name: 'logql' };
 
   return (
-    <Card className={styles.card}>
+    <Card noMargin className={styles.card}>
       <Card.Heading>{pattern.name}</Card.Heading>
       <div className={styles.rawQueryContainer}>
         <RawQuery
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
index 42d67a19c89..9be0cc98ec7 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { CoreApp, GrafanaTheme2, getNextRefId } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import { Button, Collapse, Modal, useStyles2 } from '@grafana/ui';
+import { Button, Collapse, Modal, Stack, useStyles2 } from '@grafana/ui';
 
 import { LokiQuery } from '../../types';
 import { lokiQueryModeller } from '../LokiQueryModeller';
@@ -107,7 +107,7 @@ export const QueryPatternsModal = (props: Props) => {
               )
             }
           >
-            <div className={styles.cardsContainer}>
+            <Stack wrap justifyContent="space-between">
               {lokiQueryModeller
                 .getQueryPatterns()
                 .filter((pattern) => pattern.type === patternType)
@@ -122,7 +122,7 @@ export const QueryPatternsModal = (props: Props) => {
                     setSelectedPatternName={setSelectedPatternName}
                   />
                 ))}
-            </div>
+            </Stack>
           </Collapse>
         );
       })}
@@ -135,12 +135,6 @@ export const QueryPatternsModal = (props: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    cardsContainer: css({
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-    }),
     spacing: css({
       marginBottom: theme.spacing(1),
     }),
diff --git a/public/app/plugins/panel/annolist/AnnotationListItem.tsx b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
index ecf22f9f597..0a321cbfbed 100644
--- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx
+++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx
@@ -3,7 +3,7 @@ import { MouseEvent } from 'react';
 
 import { AnnotationEvent, DateTimeInput, GrafanaTheme2, PanelProps } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
-import { Card, TagList, Tooltip, RenderUserContentAsHTML, useStyles2 } from '@grafana/ui';
+import { Card, RenderUserContentAsHTML, TagList, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { Options } from './panelcfg.gen';
 
@@ -30,7 +30,7 @@ export const AnnotationListItem = ({ options, annotation, formatDate, onClick, o
   const showTimeStampEnd = timeEnd && timeEnd !== time && showTime;
 
   return (
-    <Card className={styles.card} onClick={onItemClick}>
+    <Card noMargin className={styles.card} onClick={onItemClick}>
       <Card.Heading>
         <RenderUserContentAsHTML
           className={styles.heading}