From e9af01acaecdb8d74d6bba97eacb4d2cf6aa53d5 Mon Sep 17 00:00:00 2001
From: Mark Dumay <61946753+markdumay@users.noreply.github.com>
Date: Mon, 2 Nov 2026 09:23:38 +0100
Subject: [PATCH] feat(cards): add a split layout

Add a layout argument to the cards block. With layout set to split,
the heading and links sit beside the cards in two equal columns from
the lg breakpoint up, and stack below it. The block otherwise renders
as before.

The split layout uses a smaller gutter, so a single column of cards
reads as a compact stack.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/cards/cards.bookshop.yml       |  1 +
 .../components/cards/cards.hugo.html          | 22 +++++++++++----
 component-library/components/cards/cards.yml  |  4 ++-
 exampleSite/content/components/cards.md       | 28 +++++++++++++++++++
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/component-library/components/cards/cards.bookshop.yml b/component-library/components/cards/cards.bookshop.yml
index 69fc20d..4534265 100644
--- a/component-library/components/cards/cards.bookshop.yml
+++ b/component-library/components/cards/cards.bookshop.yml
@@ -44,6 +44,7 @@ blueprint:
       icon:
       force:
   orientation:
+  layout:
   class:
   width:
   justify: start
diff --git a/component-library/components/cards/cards.hugo.html b/component-library/components/cards/cards.hugo.html
index b424d22..9e8b0ed 100644
--- a/component-library/components/cards/cards.hugo.html
+++ b/component-library/components/cards/cards.hugo.html
@@ -37,6 +37,8 @@
 
 	{{/* Initialize local variables */}}
 	{{ $raw := "" }}
+	{{ $cards := "" }}
+	{{ $split := eq .layout "split" }}
 	{{ $list := slice }}
 	{{ range .elements }}
 		<!-- TODO: check mode -->
@@ -60,8 +62,8 @@
 		"page"          $page
 		"heading-level" (cond (isset . "heading_level") .heading_level (index . "heading-level"))
 		"heading"       .heading
-		"justify"       .justify
-		"class"         (printf "pb-%d" $padding.y)))
+		"justify"       (cond $split "start" .justify)
+		"class"         (cond $split "" (printf "pb-%d" $padding.y))))
 	-}}
 
 	{{/* Init base arguments for card group */}}
@@ -70,7 +72,7 @@
 		"list"         $list
 		"class"        (or .class "border-0 card-icon-primary")
 		"cols"         .cols
-		"gutter"       "4"
+		"gutter"       (cond $split "3" "4")
 		"padding"      .padding
 		"header-style" "none"
 		"footer-style" "none"
@@ -83,13 +85,13 @@
 	{{- with or .align_rows (index . "align-rows") }}{{ $params = merge $params (dict "align-rows" .) }}{{ end }}
 
 	{{/* Layout for small screens */}}
-	{{- $raw = printf "%s%s" $raw (partial "assets/card-group.html" (merge $params (dict 
+	{{- $cards = printf "%s%s" $cards (partial "assets/card-group.html" (merge $params (dict 
 		"orientation"  (.orientation | default "horizontal-sm")
 		"wrapper"      (printf "d-%s-none" $breakpoint.prev)
 	))) -}}
 
 	{{/* Layout for regular screens */}}
-	{{- $raw = printf "%s%s" $raw (partial "assets/card-group.html" (merge $params (dict 
+	{{- $cards = printf "%s%s" $cards (partial "assets/card-group.html" (merge $params (dict 
 		"orientation"  (.orientation | default "stacked")
 		"wrapper"      (printf "d-none d-%s-block" $breakpoint.prev)
 	))) -}}
@@ -103,7 +105,15 @@
 			"justify"   "start"
 			"link-type" (or .link_type (index . "link-type"))
 		) }}
-		{{ $raw = printf "%s%s" $raw $links }}
+	{{ end }}
+
+	{{/* The split layout sets the heading and links beside the cards, one breakpoint after the
+	     section width applies so tablets keep the full width for both. */}}
+	{{ if $split }}
+		{{ with $links }}{{ $links = printf `<div class="mt-4">%s</div>` . }}{{ end }}
+		{{ $raw = printf `<div class="row g-4 g-%s-5"><div class="col-12 col-%s-6">%s%s</div><div class="col-12 col-%s-6">%s</div></div>` $breakpoint.next $breakpoint.next $raw $links $breakpoint.next $cards }}
+	{{ else }}
+		{{ $raw = printf "%s%s%s" $raw $cards $links }}
 	{{ end }}
 
 	{{ if $raw }}
diff --git a/component-library/components/cards/cards.yml b/component-library/components/cards/cards.yml
index dff0eb9..72f6f42 100644
--- a/component-library/components/cards/cards.yml
+++ b/component-library/components/cards/cards.yml
@@ -3,7 +3,9 @@ comment: >-
   accepts an optional subtitle and highlight, rendered as inline markdown
   between the title and the description. Set align_rows with a stacked
   orientation to line up the titles, subtitles, highlights, descriptions and
-  buttons of the cards in each row.
+  buttons of the cards in each row. Set layout to split to place the
+  heading and links beside the cards, in two equal columns from the lg
+  breakpoint up. Combine it with cols: 1 and padding: 0 for a compact stack.
 example: |
   heading:
     title: Our Services
diff --git a/exampleSite/content/components/cards.md b/exampleSite/content/components/cards.md
index 888df5b..dc77081 100644
--- a/exampleSite/content/components/cards.md
+++ b/exampleSite/content/components/cards.md
@@ -24,6 +24,34 @@ content_blocks:
       - title: All components
         url: /components/
         icon: fas chevron-right
+  - _bookshop_name: cards
+    heading:
+      preheading: Our approach
+      title: Split layout
+      content: >-
+        With `layout` set to `split`, the heading and links sit beside the
+        cards. Below the `lg` breakpoint, the columns stack.
+      align: start
+    layout: split
+    orientation: horizontal
+    cols: 1
+    padding: 0
+    width: 10
+    justify: center
+    elements:
+      - title: People oriented
+        icon: fas user-group
+        content: People are at the heart of any organization.
+      - title: Value obsessed
+        icon: fas heart
+        content: We ensure your investments bring tangible value.
+      - title: Tech savvy
+        icon: fas microchip
+        content: We help you identify and utilize the right technology.
+    links:
+      - title: All components
+        url: /components/
+        icon: fas chevron-right
   - _bookshop_name: cards
     heading:
       preheading: Pricing