Footer places an identity and notice at the end of the page, wrapping and stacking on small screens, with the privacy control when statistics are configured.
01Preview
02Usage
Load @dg/ui/styles.css once in the root layout.
<script>
import { Footer } from "@dg/ui";
</script>
<Footer identity="Collection" notice="Copy, remix, reuse." />
{#snippet legalNotice()}<a href="/legal">Legal information</a>{/snippet}
<Footer identity="Collection" notice={legalNotice} />
03Notes
- Native HTML attributes, DOM callbacks, class and style are forwarded to the footer element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
Footerdoes not render a children snippet. - The footer draws its top rule, side rails and top corner crosses, without a bottom rule or bottom crosses. Its top crosses coincide with the preceding section's bottom crosses when both are present.
- When a mounted
Analyticshas loaded its configuration, a privacy and statistics control follows the notice, in its typography, and opens the privacy dialog. It wraps after the notice as a whole.
04Parameters
| Name | Type | Default | Description |
|---|---|---|---|
identity | string | "distributed·gallery" | Identity text on the left. |
notice | string | Snippet | "Copy, remix, whatever." | Secondary notice, right-aligned on desktop and stacked on mobile. Accepts a snippet for inline links and actions. |
05Accessibility
Compose Footer after Main. Identity uses UI typography and notice uses metadata typography; source strings retain their case. The privacy control is a native button named in the Page language, with the shared control target height.