From 8858ef40aa56cb005b3a24bee36a0d8663256b70 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Thu, 27 Jun 2024 16:04:50 +1200
Subject: [PATCH] 2024 Theme: Fix card layouts

- Align meta data at bottom of cards
- Stop overflowing titles and excerpts
- Link the image
- Put card markup into template parts to reduce duplication
- Consolidate styles

Fixes https://github.com/WordPress/Learn/issues/2573
---
 .../wporg-learn/js/course-grid/index.js       |  93 +---------------
 .../parts/card-course-h3.html                 |  29 +++++
 .../wporg-learn-2024/parts/card-course.html   |  29 +++++
 .../parts/card-lesson-h3.html                 |  27 +++++
 .../wporg-learn-2024/parts/card-lesson.html   |  27 +++++
 .../pub/wporg-learn-2024/parts/card.html      |  31 ++++++
 .../patterns/archive-content.php              |  28 +----
 .../patterns/archive-courses-content.php      |  34 +-----
 .../patterns/archive-lesson-plan-content.php  |  28 +----
 .../patterns/archive-lessons-content.php      |  30 +-----
 .../patterns/front-page-content.php           |  63 ++---------
 .../patterns/page-my-courses-content.php      |   4 +-
 .../patterns/taxonomy-content.php             |  36 +------
 ...y-learning-pathway-content-search-grid.php |  34 +-----
 ...nomy-learning-pathway-content-sections.php | 102 ++----------------
 .../src/style/_card-grid.scss                 |  87 +++++++++++++++
 .../pub/wporg-learn-2024/src/style/_card.scss |  36 -------
 .../src/style/_course-grid.scss               |  52 ---------
 .../pub/wporg-learn-2024/src/style/style.scss |  10 +-
 19 files changed, 268 insertions(+), 512 deletions(-)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/parts/card.html
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
 delete mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_card.scss
 delete mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_course-grid.scss

diff --git a/wp-content/plugins/wporg-learn/js/course-grid/index.js b/wp-content/plugins/wporg-learn/js/course-grid/index.js
index 76eb659a5..af3ddec48 100644
--- a/wp-content/plugins/wporg-learn/js/course-grid/index.js
+++ b/wp-content/plugins/wporg-learn/js/course-grid/index.js
@@ -40,98 +40,7 @@ registerBlockVariation( 'core/query', {
 				style: { spacing: { blockGap: 'var:preset|spacing|50' } },
 				layout: { type: 'grid', columnCount: null, minimumColumnWidth: '330px' },
 			},
-			[
-				[
-					'core/group',
-					{
-						style: {
-							border: { width: '1px', color: 'var:preset|color|light-grey-1', radius: '2px' },
-							spacing: { blockGap: '0' },
-							dimensions: { minHeight: '100%' },
-						},
-						backgroundColor: 'white',
-						layout: { type: 'flex', orientation: 'vertical' },
-					},
-					[
-						[ 'core/post-featured-image', { style: { spacing: { margin: { bottom: '0' } } } } ],
-						[
-							'core/group',
-							{
-								style: {
-									spacing: {
-										padding: {
-											top: 'var:preset|spacing|20',
-											bottom: 'var:preset|spacing|20',
-											left: '20px',
-											right: '20px',
-										},
-									},
-								},
-								layout: { type: 'constrained' },
-							},
-							[
-								[
-									'core/post-title',
-									{
-										level: 3,
-										isLink: true,
-										style: {
-											typography: {
-												fontStyle: 'normal',
-												fontWeight: '600',
-												lineHeight: 1.6,
-											},
-											spacing: { margin: { bottom: '0' } },
-											elements: {
-												link: { color: { text: 'var:preset|color|blueberry-1' } },
-											},
-										},
-										fontSize: 'normal',
-										fontFamily: 'inter',
-									},
-								],
-								[
-									'core/post-excerpt',
-									{
-										showMoreOnNewLine: false,
-										excerptLength: 16,
-										style: {
-											spacing: { margin: { top: 'var:preset|spacing|10' } },
-											typography: { lineHeight: 1.6 },
-										},
-									},
-								],
-								[
-									'core/group',
-									{ layout: { type: 'flex', flexWrap: 'wrap', justifyContent: 'left' } },
-									[
-										[
-											'wporg-learn/learning-duration',
-											{
-												style: {
-													elements: {
-														link: { color: { text: 'var:preset|color|charcoal-4' } },
-													},
-												},
-												textColor: 'charcoal-4',
-												fontSize: 'small',
-											},
-										],
-										[
-											'wporg-learn/lesson-count',
-											{
-												style: { layout: { selfStretch: 'fill', flexSize: null } },
-												fontSize: 'extra-small',
-											},
-										],
-										[ 'wporg-learn/course-status', { fontSize: 'extra-small' } ],
-									],
-								],
-							],
-						],
-					],
-				],
-			],
+			[ [ 'core/template-part', { slug: 'card-course', className: 'has-display-contents' }, [] ] ],
 		],
 		[ 'core/query-no-results' ],
 	],
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
new file mode 100644
index 000000000..7eb7e2b1f
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course-h3.html
@@ -0,0 +1,29 @@
+<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
+		
+	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
+
+		<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
+
+		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
+
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
+
+			<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
new file mode 100644
index 000000000..75d7f6a12
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-course.html
@@ -0,0 +1,29 @@
+<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
+		
+	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
+
+		<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
+
+		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
+
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
+
+			<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
new file mode 100644
index 000000000..10b631322
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
@@ -0,0 +1,27 @@
+<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
+		
+	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
+
+		<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
+
+		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
+
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
new file mode 100644
index 000000000..4d54dac0d
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
@@ -0,0 +1,27 @@
+<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
+		
+	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
+
+		<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
+
+		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
+
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
new file mode 100644
index 000000000..35c8ebb32
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
@@ -0,0 +1,31 @@
+<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
+		
+	<!-- wp:post-featured-image {"isLink":true,"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"0"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
+
+		<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
+
+		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
+
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
+
+			<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
+
+			<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
+
+			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-content.php
index 97158e32a..02da7de60 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-content.php
@@ -31,34 +31,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
+<div class="wp-block-query wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-			<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-			<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-			<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-			<div class="wp-block-group">
-
-				<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /--></div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-courses-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-courses-content.php
index e28fe39ea..d3d5dc829 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-courses-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-courses-content.php
@@ -39,40 +39,12 @@
 
 <!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lesson-plan-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lesson-plan-content.php
index ac8bdcdae..d5843170e 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lesson-plan-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lesson-plan-content.php
@@ -37,34 +37,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"lesson-plan","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"lesson-plan","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
+<div class="wp-block-query wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-			<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-			<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-			<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-			<div class="wp-block-group">
-
-				<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /--></div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lessons-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lessons-content.php
index 513cf8f8e..68a6069a5 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lessons-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/archive-lessons-content.php
@@ -39,36 +39,12 @@
 
 <!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"lesson","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":12,"pages":0,"offset":0,"postType":"lesson","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[]}} -->
+<div class="wp-block-query wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-			<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-			<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-			<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-			<div class="wp-block-group">
-
-				<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-				<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /--></div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-lesson","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php
index 25a4a2edd..aa691ba33 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/front-page-content.php
@@ -35,37 +35,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":0,"query":{"perPage":6,"postType":"course","courseFeatured":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":0,"query":{"perPage":6,"postType":"course","courseFeatured":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course-h3","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
@@ -98,38 +73,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":"6","pages":0,"offset":0,"postType":"lesson","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]}} -->
-<div class="wp-block-query">
+<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":"6","pages":0,"offset":0,"postType":"lesson","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]}} -->
+<div class="wp-block-query wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-lesson-h3","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
index df8414fec..ffe258336 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
@@ -29,8 +29,8 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":0,"query":{"postType":"course","perPage":12,"offset":0,"inherit":false,"sticky":"","pages":0,"order":"desc","orderBy":"date","author":"","search":"","exclude":[]},"className":"wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list\u002d\u002dis-list-view wporg-learn-course-grid"} -->
-<div class="wp-block-query wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list--is-list-view wporg-learn-course-grid">
+<!-- wp:query {"queryId":0,"query":{"postType":"course","perPage":12,"offset":0,"inherit":false,"sticky":"","pages":0,"order":"desc","orderBy":"date","author":"","search":"","exclude":[]},"className":"wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list\u002d\u002dis-list-view wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list--is-list-view wporg-learn-course-grid wporg-learn-card-grid">
 	
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-content.php
index 42a776d57..d5a8caf94 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-content.php
@@ -27,7 +27,7 @@
 		<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"730px"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--40)">
 
-			<!-- wp:query-title {"type":"archive","showPrefix":false} /-->
+			<!-- wp:query-title {"type":"archive","showPrefix":true} /-->
 
 		</div>
 		<!-- /wp:group -->
@@ -52,40 +52,12 @@
 
 	<!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
 
-	<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-	<div class="wp-block-query alignwide wporg-learn-course-grid">
+	<!-- wp:query {"className":"wporg-learn-card-grid","queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide"} -->
+	<div class="wp-block-query alignwide wporg-learn-card-grid">
 
 		<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-			<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-			<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-				<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-				<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-				<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-					<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-					<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-					<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-					<div class="wp-block-group">
-
-						<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-						<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-						<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-					</div>
-					<!-- /wp:group -->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
+			<!-- wp:template-part {"slug":"card","className":"has-display-contents"} /-->
 
 		<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-search-grid.php b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-search-grid.php
index 9ae51c051..8ac27197a 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-search-grid.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-search-grid.php
@@ -9,40 +9,12 @@
 
 <!-- wp:wporg-learn/search-results-context {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":1,"query":{"perPage":12,"postType":"course","courseFeatured":false,"inherit":true},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-sections.php b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-sections.php
index a553d7554..4cf0d6c72 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-sections.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content-sections.php
@@ -46,40 +46,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":0,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_attr( $beginner_level_id ); ?>],"learning-pathway":[<?php echo esc_attr( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":0,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_attr( $beginner_level_id ); ?>],"learning-pathway":[<?php echo esc_attr( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course-h3","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
@@ -112,40 +84,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":1,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_html( $intermediate_level_id ); ?>],"learning-pathway":[<?php echo esc_html( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":1,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_html( $intermediate_level_id ); ?>],"learning-pathway":[<?php echo esc_html( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course-h3","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
@@ -178,40 +122,12 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"queryId":2,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_html( $advanced_level_id ); ?>],"learning-pathway":[<?php echo esc_html( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid"} -->
-<div class="wp-block-query alignwide wporg-learn-course-grid">
+<!-- wp:query {"queryId":2,"query":{"perPage":3,"postType":"course","courseFeatured":false,"taxQuery":{"level":[<?php echo esc_html( $advanced_level_id ); ?>],"learning-pathway":[<?php echo esc_html( $learning_pathway_id ); ?>]},"inherit":false},"namespace":"wporg-learn/course-grid","align":"wide","className":"wporg-learn-course-grid wporg-learn-card-grid"} -->
+<div class="wp-block-query alignwide wporg-learn-course-grid wporg-learn-card-grid">
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->
 
-		<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
-		<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">
-
-			<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
-
-			<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"}}},"layout":{"type":"constrained"}} -->
-			<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">
-
-				<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
-
-				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"typography":{"lineHeight":1.6}}} /-->
-
-				<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
-				<div class="wp-block-group">
-
-					<!-- wp:wporg-learn/learning-duration {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-					<!-- wp:wporg-learn/lesson-count {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"fontSize":"extra-small"} /-->
-
-					<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
-
-				</div>
-				<!-- /wp:group -->
-
-			</div>
-			<!-- /wp:group -->
-
-		</div>
-		<!-- /wp:group -->
+		<!-- wp:template-part {"slug":"card-course-h3","className":"has-display-contents"} /-->
 
 	<!-- /wp:post-template -->
 
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
new file mode 100644
index 000000000..2084f7c1f
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
@@ -0,0 +1,87 @@
+.wporg-learn-card-grid {
+	> .is-layout-grid {
+		grid-auto-rows: 1fr;
+		container-type: normal;
+	}
+
+	.wp-block-group,
+	.wp-block-post-title,
+	.wp-block-post-excerpt {
+		max-width: 100%;
+	}
+
+	.course,
+	.lesson {
+		.wp-block-wporg-learn-learning-duration {
+			display: flex;
+			align-items: center;
+
+			&::before {
+				// 'clock' icon
+				content: "\f469";
+				/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+				font-family: dashicons;
+				display: block;
+				width: 24px;
+				height: 24px;
+				font-size: 24px;
+				line-height: 1;
+				margin-right: 6px;
+			}
+		}
+
+		.wp-block-wporg-learn-lesson-count {
+			display: flex;
+			align-items: center;
+
+			&::before {
+				content: "";
+				display: block;
+				width: 24px;
+				height: 24px;
+				margin-right: 6px;
+				background: url(../../assets/icon-lessons.svg) no-repeat;
+			}
+		}
+	}
+
+	.course {
+		position: relative;
+		margin-bottom: unset;
+		padding-bottom: unset;
+
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+			display: block;
+			border: 1px solid var(--wp--custom--color--border);
+			border-radius: 2px;
+			background: var(--wp--preset--color--white);
+			height: 10px;
+		}
+
+		&::before {
+			top: -6px;
+			z-index: -1;
+			width: calc(100% - 24px);
+			left: 12px;
+		}
+
+		&::after {
+			top: -12px;
+			z-index: -2;
+			width: calc(100% - 48px);
+			left: 24px;
+		}
+
+		.sensei-lms-course-list-featured-label__text,
+		.taxonomy-level {
+			display: none;
+		}
+	}
+
+	.wp-block-post-title a {
+		color: var(--wp--custom--link--color--text);
+	}
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card.scss
deleted file mode 100644
index 39cc2eb7d..000000000
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.is-layout-grid {
-	.course,
-	.lesson {
-		.wp-block-wporg-learn-learning-duration {
-			display: flex;
-			align-items: center;
-
-			&::before {
-				// 'clock' icon
-				content: "\f469";
-				/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-				font-family: dashicons;
-				display: block;
-				width: 24px;
-				height: 24px;
-				font-size: 24px;
-				line-height: 1;
-				margin-right: 6px;
-			}
-		}
-
-		.wp-block-wporg-learn-lesson-count {
-			display: flex;
-			align-items: center;
-
-			&::before {
-				content: "";
-				display: block;
-				width: 24px;
-				height: 24px;
-				margin-right: 6px;
-				background: url(../../assets/icon-lessons.svg) no-repeat;
-			}
-		}
-	}
-}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_course-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_course-grid.scss
deleted file mode 100644
index 430765082..000000000
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_course-grid.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.wporg-learn-course-grid {
-	&.wp-block-query > .is-layout-grid {
-		row-gap: var(--wp--preset--spacing--50);
-
-		.wp-block-post-featured-image {
-			margin-bottom: unset;
-		}
-
-		.sensei-lms-course-list-featured-label__text {
-			display: none;
-		}
-
-		.sensei-cta .wp-block-button__link {
-			float: unset;
-		}
-	}
-
-	.course {
-		position: relative;
-		margin-bottom: unset;
-		padding-bottom: unset;
-
-		&::before,
-		&::after {
-			content: "";
-			position: absolute;
-			display: block;
-			border: 1px solid var(--wp--custom--color--border);
-			border-radius: 2px;
-			background: var(--wp--preset--color--white);
-			height: 10px;
-		}
-
-		&::before {
-			top: -6px;
-			z-index: -1;
-			width: calc(100% - 24px);
-			left: 12px;
-		}
-
-		&::after {
-			top: -12px;
-			z-index: -2;
-			width: calc(100% - 48px);
-			left: 24px;
-		}
-	}
-
-	.wp-block-post-title a {
-		color: var(--wp--custom--link--color--text);
-	}
-}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
index 833d9879d..bf400f8a2 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
@@ -3,8 +3,7 @@
  * templates or theme.json settings.
  */
 
-@import "card";
-@import "course-grid";
+@import "card-grid";
 @import "jetpack";
 @import "local-nav";
 @import "sensei";
@@ -20,13 +19,6 @@ body {
 	--wp-components-color-accent-darker-10: var(--wp--preset--color--deep-blueberry);
 }
 
-// For all post grids, make the grid items the same height
-.wp-block-query > .is-layout-grid {
-	grid-auto-rows: 1fr;
-	container-type: normal;
-	row-gap: var(--wp--preset--spacing--40);
-}
-
 // Ensure nested elements in containers with rounded corners are cropped to match
 // eg. card featured images
 [style*="border-radius:2px"] {