28 lines
915 B
Svelte
28 lines
915 B
Svelte
|
<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>
|