feat(cards): add a split layout

component-library/components/cards/cards.bookshop.yml

@@ -44,6 +44,7 @@ blueprint:
       icon:
       force:
   orientation:
+  layout:
   class:
   width:
   justify: start

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 }}

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

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