Display recommended channels in create campaign modal.

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss

@@ -52,10 +52,27 @@
 }
 
 .woocommerce-marketing-create-campaign-modal {
+	max-width: 600px;
+
 	&__question-label {
 		font-size: 14px;
 		font-weight: 600;
 		line-height: 17px;
 		margin-bottom: 16px;
 	}
+
+	.components-button.is-link {
+		text-decoration: none;
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 17px;
+	}
+
+	.woocommerce_marketing_plugin_card_body {
+		padding: $gap 0;
+	}
+
+	.components-card-divider {
+		display: none;
+	}
 }

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CampaignsCardHeader.tsx

@@ -9,11 +9,17 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { CardHeaderTitle } from '~/marketing/components';
+import {
+	CardHeaderTitle,
+	RecommendedChannelsList,
+} from '~/marketing/components';
+import { useRecommendedChannels } from '~/marketing/hooks';
 
 export const CampaignsCardHeader = () => {
 	const [ open, setOpen ] = useState( false );
 	const [ collapsed, setCollapsed ] = useState( true );
+	const { data } = useRecommendedChannels();
+
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
 
@@ -51,7 +57,9 @@ export const CampaignsCardHeader = () => {
 							size={ 24 }
 						/>
 					</Button>
-					{ /* TODO: list of recommended channels here. */ }
+					{ ! collapsed && (
+						<RecommendedChannelsList recommendedChannels={ data } />
+					) }
 				</Modal>
 			) }
 		</CardHeader>