LegalDocumentLayout

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<LegalDocumentLayout
  title="Legal document"
  effectiveDate="effectiveDate"
  updatedDate="updatedDate"
/>

Legacy mount name: data-component="LegalDocumentLayout".

Props and attributes

Slots

• toc
• default

Events

This component does not declare a custom event.

Source contract

Installed source: components/LegalDocumentLayout.wrn

component LegalDocumentLayout {
  props {
    class = ""
    title = "Legal document"
    effectiveDate = ""
    updatedDate = ""
  }
  view {
        <article class="grid max-w-7xl gap-10 lg:grid-cols-[16rem_minmax(0,1fr)] {class}">
        <aside class="lg:sticky lg:top-24 lg:self-start">
        <div class="text-sm font-semibold">On this page</div>
        <nav class="mt-4 text-sm text-slate-500">
        <slot name="toc" />
        </nav>
        </aside>
        <main class="min-w-0 max-w-3xl">
        <header class="border-b border-slate-200 pb-8 dark:border-slate-800">
        <h1 class="text-4xl font-black tracking-tight">{title}</h1>
        <div class="mt-4 flex flex-wrap gap-4 text-sm text-slate-500">
        <span data-show="effectiveDate">Effective: {effectiveDate}</span>
        <span data-show="updatedDate">Updated: {updatedDate}</span>
        </div>
        </header>
        <div class="prose prose-slate mt-8 max-w-none dark:prose-invert">
        <slot />
        </div>
        </main>
        </article>
    }
}