38 lines
950 B
Svelte
38 lines
950 B
Svelte
<script lang="ts">
|
|
import type { EngagementItem } from '$lib/types/service-page';
|
|
|
|
const {
|
|
items,
|
|
sectionId = 'how-engagements-work',
|
|
headingId = 'engagements-heading',
|
|
heading = 'How engagements work',
|
|
intro,
|
|
outro,
|
|
}: {
|
|
items: EngagementItem[];
|
|
sectionId?: string;
|
|
headingId?: string;
|
|
heading?: string;
|
|
intro?: string;
|
|
outro?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<section id={sectionId} class="section" aria-labelledby={headingId}>
|
|
<div class="container narrow">
|
|
<h2 id={headingId}>{heading}</h2>
|
|
{#if intro}
|
|
<p>{intro}</p>
|
|
{/if}
|
|
<dl class="engagements-list">
|
|
{#each items as item}
|
|
<dt>{item.term}</dt>
|
|
<dd>{item.definition}</dd>
|
|
{/each}
|
|
</dl>
|
|
{#if outro}
|
|
<p>{outro}</p>
|
|
{/if}
|
|
</div>
|
|
</section>
|