diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
index c9f33c4c3eb..3b7b62b1670 100644
--- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
@@ -16,6 +16,7 @@ import {
} from '~/marketing/components';
import { useChannels } from './useChannels';
import './Channels.scss';
+import { InstalledChannelCardBody } from './InstalledChannelCardBody';
export const Channels = () => {
const {
@@ -90,10 +91,23 @@ export const Channels = () => {
{ /* TODO: registered channels here. */ }
+ { registeredChannels.map( ( el, idx ) => {
+ return (
+
+
+ { idx < registeredChannels.length - 1 && (
+
+ ) }
+
+ );
+ } ) }
{ /* TODO: recommended channels here. */ }
{ recommendedChannels.length > 0 && (
- recommended
+ <>
+
+ recommended
+ >
) }
);
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
new file mode 100644
index 00000000000..2f710f93e97
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss
@@ -0,0 +1,2 @@
+.woocommerce-marketing-installed-channel-card-body {
+}
diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
new file mode 100644
index 00000000000..03daeed32ff
--- /dev/null
+++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { CardBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { InstalledChannel } from '~/marketing/types';
+import './InstalledChannelCardBody.scss';
+
+type InstalledChannelCardBodyProps = {
+ installedChannel: InstalledChannel;
+};
+
+export const InstalledChannelCardBody: React.FC<
+ InstalledChannelCardBodyProps
+> = ( { installedChannel } ) => {
+ return (
+
+ InstalledChannelCardBody
+
+ );
+};