File size: 937 Bytes
a8898de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
coord?: string;
eyebrow: string;
title: string;
titleHtml?: Snippet;
lede?: string;
align?: 'left' | 'center';
}
let { coord, eyebrow, title, titleHtml, lede, align = 'left' }: Props = $props();
</script>
<div
style="text-align:{align};max-width:{align === 'center' ? 720 : 760}px;margin-inline:{align ===
'center'
? 'auto'
: 0}"
>
<div
style="display:flex;align-items:center;gap:14px;justify-content:{align === 'center'
? 'center'
: 'flex-start'};margin-bottom:18px"
>
{#if coord}<span class="coord">{coord}</span>{/if}
<span class="eyebrow">{eyebrow}</span>
</div>
<h2 class="display" style="font-size:clamp(34px, 5vw, 58px)">
{#if titleHtml}{@render titleHtml()}{:else}{title}{/if}
</h2>
{#if lede}
<p class="lede" style="margin-top:18px;margin-inline:{align === 'center' ? 'auto' : 0}">{lede}</p>
{/if}
</div>
|