Add InstalledChannelCardBody to Channels.

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 = () => {
 			</CardHeader>
 
 			{ /* TODO: registered channels here. */ }
+			{ registeredChannels.map( ( el, idx ) => {
+				return (
+					<Fragment key={ el.slug }>
+						<InstalledChannelCardBody installedChannel={ el } />
+						{ idx < registeredChannels.length - 1 && (
+							<CardDivider />
+						) }
+					</Fragment>
+				);
+			} ) }
 
 			{ /* TODO: recommended channels here. */ }
 			{ recommendedChannels.length > 0 && (
-				<CardBody>recommended</CardBody>
+				<>
+					<CardDivider />
+					<CardBody>recommended</CardBody>
+				</>
 			) }
 		</Card>
 	);

plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss

@@ -0,0 +1,2 @@
+.woocommerce-marketing-installed-channel-card-body {
+}

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 (
+		<CardBody className="woocommerce-marketing-installed-channel-card-body">
+			InstalledChannelCardBody
+		</CardBody>
+	);
+};