Design language

2026-05-13 00:34:34 +12:00
parent ac6179e776
commit 6c943b14bd
34 changed files with 1986 additions and 697 deletions
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let variant: 'green' | 'white' = 'green';
+  export let eyebrow: string | undefined = undefined;
+  export let title: string;
+  export let subtitle: string | undefined = undefined;
+</script>
+
+<section class="page-header page-header--{variant}" class:page-header--has-media={$$slots.media}>
+  <div class="ph-inner" class:ph-inner--grid={$$slots.media}>
+    {#if $$slots.media}
+      <div class="ph-copy">
+        {#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
+        <h1 class="ph-title">{title}</h1>
+        {#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
+        <slot />
+      </div>
+      <div class="ph-media">
+        <slot name="media" />
+      </div>
+    {:else}
+      {#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
+      <h1 class="ph-title">{title}</h1>
+      {#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
+      <slot />
+    {/if}
+  </div>
+</section>