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