diff --git a/packages/cxl-ui/scss/cxl-card-grid.scss b/packages/cxl-ui/scss/cxl-card-grid.scss
new file mode 100644
index 000000000..16f59d8f5
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-card-grid.scss
@@ -0,0 +1,22 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ gap: var(--lumo-space-m);
+
+ @media #{mq.$medium} {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media #{mq.$large} {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+:host([theme~="courses"]) {
+ @media #{mq.$large} {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-card-grid.js b/packages/cxl-ui/src/components/cxl-card-grid.js
new file mode 100644
index 000000000..6acb0b689
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-card-grid.js
@@ -0,0 +1,18 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '@conversionxl/cxl-lumo-styles';
+import cxlCardGridStyles from '../styles/cxl-card-grid-css.js';
+
+@customElement('cxl-card-grid')
+export class CxlCardGridElement extends LitElement {
+ static get styles() {
+ return [cxlCardGridStyles];
+ }
+
+ render() {
+ return html``;
+ }
+
+}
diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js
index 1de4fcc21..11dc09344 100644
--- a/packages/cxl-ui/src/components/cxl-card.js
+++ b/packages/cxl-ui/src/components/cxl-card.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@conversionxl/cxl-lumo-styles';
diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js
index 110555d1c..19c13028c 100644
--- a/packages/cxl-ui/src/index-core.js
+++ b/packages/cxl-ui/src/index-core.js
@@ -29,6 +29,7 @@ export { CxlDashboardTeamHeaderElement } from './components/cxl-dashboard-team-h
export { CxlDashboardTeamStatsElement } from './components/cxl-dashboard-team-stats.js';
export { CXLFeaturedCourseCardElement } from './components/cxl-featured-course-card.js';
export { CXLLightCardElement } from './components/cxl-light-card.js';
+export { CxlCardGridElement } from './components/cxl-card-grid.js';
export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
export { CXLNotification } from './components/cxl-notification.js';
export { CXLNotificationCardElement } from './components/cxl-notification-card.js';
diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-card-grid.stories.js b/packages/storybook/cxl-ui/cxl-course-card/course-card-grid.stories.js
new file mode 100644
index 000000000..189e9f1d8
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/course-card-grid.stories.js
@@ -0,0 +1,38 @@
+import { html } from 'lit';
+import { CourseCardTemplate } from './template.js';
+
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-card-grid.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-course-card-grid',
+};
+
+const CXLCourseCard = CourseCardTemplate.bind({});
+CXLCourseCard.args = {
+ id: 'cxl-course-1',
+ name: 'Account based marketing',
+ time: '3h 00min',
+ instructor: 'Tom Wesseling',
+ description:
+ 'Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career.',
+ theme: 'course',
+ tags: 'Marketing, Analytics, Growth, Demand Capture',
+ avatar:
+ 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+ new: false,
+ showTimeIcon: true,
+};
+
+export const CXLCourseCardGrid = ({ length, args }) => html`
+
+ ${Array.from({ length }, () => html`
+ ${CXLCourseCard({ ...CXLCourseCard.args, ...args })}
+ `)}
+
+`;
+
+CXLCourseCardGrid.args = {
+ length: 12,
+};
diff --git a/packages/storybook/cxl-ui/cxl-light-card/light-card-grid.stories.js b/packages/storybook/cxl-ui/cxl-light-card/light-card-grid.stories.js
new file mode 100644
index 000000000..ff6cad7a5
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-light-card/light-card-grid.stories.js
@@ -0,0 +1,31 @@
+import { html } from 'lit';
+import { Template } from './template.js';
+
+import '@conversionxl/cxl-ui/src/components/cxl-light-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-card-grid.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-light-card-grid',
+};
+
+const CXLLightCard = Template.bind({});
+CXLLightCard.args = {
+ theme: 'light-card',
+ name: 'Account based marketing',
+ avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+ instructor: 'Lorem Ipsum',
+ completed: true,
+};
+
+export const CXLLightCardGrid = ({ length, args }) => html`
+
+ ${Array.from({ length }, () => html`
+ ${CXLLightCard({ ...CXLLightCard.args, ...args })}
+ `)}
+
+`;
+
+CXLLightCardGrid.args = {
+ length: 12,
+};