diff --git a/changelogs/fragments/7624.yml b/changelogs/fragments/7624.yml
new file mode 100644
index 00000000000..cc72302bd5c
--- /dev/null
+++ b/changelogs/fragments/7624.yml
@@ -0,0 +1,2 @@
+fix:
+- [contentManagement] display cards by specifying a column size or display all cards in one row ([#7624](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7624))
\ No newline at end of file
diff --git a/src/plugins/content_management/public/components/card_container/card_container.tsx b/src/plugins/content_management/public/components/card_container/card_container.tsx
index f3784f1f5fc..34aeb14c9b9 100644
--- a/src/plugins/content_management/public/components/card_container/card_container.tsx
+++ b/src/plugins/content_management/public/components/card_container/card_container.tsx
@@ -5,18 +5,12 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Container, ContainerInput, EmbeddableStart } from '../../../../embeddable/public';
+import { Container, EmbeddableStart } from '../../../../embeddable/public';
 import { CardList } from './card_list';
+import { CardContainerInput } from './types';
 
 export const CARD_CONTAINER = 'CARD_CONTAINER';
 
-export type CardContainerInput = ContainerInput<{
-  description: string;
-  onClick?: () => void;
-  getIcon?: () => React.ReactElement;
-  getFooter?: () => React.ReactElement;
-}>;
-
 export class CardContainer extends Container<{}, CardContainerInput> {
   public readonly type = CARD_CONTAINER;
   private node?: HTMLElement;
diff --git a/src/plugins/content_management/public/components/card_container/card_embeddable.tsx b/src/plugins/content_management/public/components/card_container/card_embeddable.tsx
index 0e7b6b2c82e..588ce168195 100644
--- a/src/plugins/content_management/public/components/card_container/card_embeddable.tsx
+++ b/src/plugins/content_management/public/components/card_container/card_embeddable.tsx
@@ -13,8 +13,8 @@ export const CARD_EMBEDDABLE = 'card_embeddable';
 export type CardEmbeddableInput = EmbeddableInput & {
   description: string;
   onClick?: () => void;
-  getIcon: () => React.ReactElement;
-  getFooter: () => React.ReactElement;
+  getIcon?: () => React.ReactElement;
+  getFooter?: () => React.ReactElement;
 };
 
 export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
@@ -37,8 +37,8 @@ export class CardEmbeddable extends Embeddable<CardEmbeddableInput> {
         description={this.input.description}
         display="plain"
         onClick={this.input.onClick}
-        icon={this.input?.getIcon()}
-        footer={this.input?.getFooter()}
+        icon={this.input?.getIcon?.()}
+        footer={this.input?.getFooter?.()}
       />,
       node
     );
diff --git a/src/plugins/content_management/public/components/card_container/card_list.tsx b/src/plugins/content_management/public/components/card_container/card_list.tsx
index b9619d39e0d..871c6451a8c 100644
--- a/src/plugins/content_management/public/components/card_container/card_list.tsx
+++ b/src/plugins/content_management/public/components/card_container/card_list.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import {
   IContainer,
@@ -13,10 +13,11 @@ import {
   ContainerOutput,
   EmbeddableStart,
 } from '../../../../embeddable/public';
+import { CardContainerInput } from './types';
 
 interface Props {
   embeddable: IContainer;
-  input: ContainerInput;
+  input: CardContainerInput;
   embeddableServices: EmbeddableStart;
 }
 
@@ -29,10 +30,12 @@ const CardListInner = ({ embeddable, input, embeddableServices }: Props) => {
       </EuiFlexItem>
     );
   });
+
+  // TODO: we should perhaps display the cards in multiple rows when the actual number of cards exceed the column size
   return (
-    <EuiFlexGrid gutterSize="s" columns={4}>
-      {cards}
-    </EuiFlexGrid>
+    <EuiFlexGroup gutterSize="s">
+      {input.columns ? cards.slice(0, input.columns) : cards}
+    </EuiFlexGroup>
   );
 };
 
diff --git a/src/plugins/content_management/public/components/card_container/types.ts b/src/plugins/content_management/public/components/card_container/types.ts
new file mode 100644
index 00000000000..0358dfecfc1
--- /dev/null
+++ b/src/plugins/content_management/public/components/card_container/types.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ContainerInput } from '../../../../embeddable/public';
+
+export interface CardExplicitInput {
+  title: string;
+  description: string;
+  onClick?: () => void;
+  getIcon?: () => React.ReactElement;
+  getFooter?: () => React.ReactElement;
+}
+
+export type CardContainerInput = ContainerInput<CardExplicitInput> & { columns?: number };
diff --git a/src/plugins/content_management/public/components/section_input.ts b/src/plugins/content_management/public/components/section_input.ts
index 00bb5b0683c..c6a68724716 100644
--- a/src/plugins/content_management/public/components/section_input.ts
+++ b/src/plugins/content_management/public/components/section_input.ts
@@ -10,8 +10,8 @@ import { Content, Section } from '../services';
 import { ViewMode } from '../../../embeddable/public';
 import { DashboardContainerInput, SavedObjectDashboard } from '../../../dashboard/public';
 import { CUSTOM_CONTENT_EMBEDDABLE } from './custom_content_embeddable';
-import { CardContainerInput } from './card_container/card_container';
 import { CARD_EMBEDDABLE } from './card_container/card_embeddable';
+import { CardContainerInput } from './card_container/types';
 
 const DASHBOARD_GRID_COLUMN_COUNT = 48;
 
@@ -30,6 +30,7 @@ export const createCardInput = (
     title: section.title ?? '',
     hidePanelTitles: true,
     viewMode: ViewMode.VIEW,
+    columns: section.columns,
     panels,
   };
 
diff --git a/src/plugins/content_management/public/services/content_management/types.ts b/src/plugins/content_management/public/services/content_management/types.ts
index 55da19f26b8..7f49732fc2c 100644
--- a/src/plugins/content_management/public/services/content_management/types.ts
+++ b/src/plugins/content_management/public/services/content_management/types.ts
@@ -31,6 +31,7 @@ export type Section =
       id: string;
       order: number;
       title?: string;
+      columns?: number;
     };
 
 export type Content =