Develop

component-library/components/contact-form/contact-form.bookshop.yml

@@ -20,7 +20,15 @@ blueprint:
     backdrop:
     color:
     subtle:
-  image:
+  illustration:
+    image:
+    icon:
+    ratio:
+    class:
+    anchor:
+    mode:
+    width:
+  order: last
   hook:
   action:
   form_id:

component-library/components/contact-form/contact-form.hugo.html

@@ -49,14 +49,34 @@
 
 	{{/* Main code */}}
 	{{ $color := "" }}
+    {{ $raw := "" }}
 	{{ if .contrast }}{{ $color = "white" }}{{ end }}
-	{{- $raw := partial "assets/section-title.html" (dict
-		"heading" .heading
-		"justify" .justify
-		"class"   (printf "pb-%d" $padding.y))
-	-}}
 
-    {{ $raw = printf "%s%s" $raw (partial .hook (dict "action" .action "form-id" .form_id)) }}
+    {{ $form := (partial .hook (dict "action" .action "form-id" .form_id)) }}
+    {{ if .illustration }}
+        {{/* Embed the form in a horizontal hero with an illustration */}}
+        {{ $width := sub 12 (.illustration.width | default 6) }}
+        {{ $raw = partial "assets/hero.html"  (dict 
+            "page"         page
+            "raw"          (printf `<div class="p-0 pt-%d"></div>%s` $padding.y $form)
+            "heading"      (merge .heading (dict "width" $width))
+            "illustration" (merge .illustration (dict "width" 12))
+            "order"        .order
+            "link-type"    (or .link_type (index . "link-type"))
+            "links"        .links
+            "orientation"  "horizontal"
+            "width"        .width
+            )
+        }}
+    {{ else }}
+        {{- $raw = partial "assets/section-title.html" (dict
+            "heading" .heading
+            "justify" .justify
+            "class"   (printf "pb-%d" $padding.y))
+        -}}
+        {{ $raw = printf "%s%s" $raw $form }}
+    {{ end }}
+
     {{ if $raw }}
         {{ partial "utilities/section.html" (dict
             "component-name" "contact-form"

data/structures/hero.yml

@@ -24,6 +24,7 @@ arguments:
     default: 8
   fluid:
   theme:
+  raw:
   hook:
     default: assets/hero-image.html
   heading-style:

layouts/partials/assets/hero.html

@@ -129,28 +129,27 @@
         {{ $title | safeHTML }}
     {{ else }}
         {{/* Render horizontal component */}}
-        <div class="container p-0">
-            <div class="row row-cols-1 {{ if eq $args.orientation "stacked" }}row-cols-md-2 {{ end }} flex-grow-1">
-                {{ $order1 := "order-1 order-md-0" }}
-                {{ $order2 := "order-0 order-md-1" }}
-                {{ if eq $args.order "first" }}
-                    {{ $order1 = "order-1" }}
-                    {{ $order2 = "order-0" }}
-                {{ end }}
+        <div class="row row-cols-1 {{ if eq $args.orientation "stacked" }}row-cols-md-2 {{ end }} flex-grow-1">
+            {{ $order1 := "order-1 order-md-0" }}
+            {{ $order2 := "order-0 order-md-1" }}
+            {{ if eq $args.order "first" }}
+                {{ $order1 = "order-1" }}
+                {{ $order2 = "order-0" }}
+            {{ end }}
 
-                {{ $imgWidth := sub 12 (or $args.heading.width 12) }}
-                {{ if lt $imgWidth 1 }}{{ $imgWidth = 1 }}{{ end }}
+            {{ $imgWidth := sub 12 (or $args.heading.width 12) }}
+            {{ if lt $imgWidth 1 }}{{ $imgWidth = 1 }}{{ end }}
 
-                <div class="col col-12 {{ if $illustration }} col-md-{{sub 12 $imgWidth }}{{ end }} {{ $order1 }} my-md-auto pt-{{ $padding.y }} pt-md-0 hero-content">
-                    {{ $title | safeHTML }}
-                </div>
-                {{ if $illustration }}
-                <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto {{ if not $args.cover }}my-md-auto align-self-end{{ else }}hero-image-full-height{{ end }}">
-                    {{ $illustration | safeHTML }}
-                    {{ $caption | safeHTML }}
-                </div>
-                {{ end }}
+            <div class="col col-12 {{ if $illustration }} col-md-{{sub 12 $imgWidth }}{{ end }} {{ $order1 }} my-md-auto pt-{{ $padding.y }} pt-md-0 hero-content">
+                {{ $title | safeHTML }}
+                {{ $args.raw | safeHTML }}
+            </div>
+            {{ if $illustration }}
+            <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto {{ if not $args.cover }}my-md-auto align-self-end{{ else }}hero-image-full-height{{ end }}">
+                {{ $illustration | safeHTML }}
+                {{ $caption | safeHTML }}
             </div>
+            {{ end }}
         </div>
     {{ end }}
 {{ end }}