Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
site-legal
Legal and compliance content container for copyright, license, privacy, and terms links.
Overview
The <site-legal> element displays legal and compliance content with automatic dot separators between items. It renders in muted, small text appropriate for footer placement.
Use it exclusively for legal content: copyright notices, license types, privacy policy links, and terms of service links. General site links belong in a <nav> element instead.
Basic Usage
Copyright and license
<site-legal> <span>© 2026 Acme Inc</span> <span>MIT License</span></site-legal>With Links
Legal links
<site-legal> <span>© 2026 Acme Inc</span> <a href="/privacy">Privacy Policy</a> <a href="/terms">Terms of Service</a> <a href="/cookies">Cookie Policy</a></site-legal>In a Footer
Typical footer pattern combining <brand-mark>, <site-legal>, and <site-tools>.
Complete footer
<footer> <a href="/"><brand-mark>Acme Inc</brand-mark></a> <em>Making things better</em> <site-legal> <span>© 2026 Acme Inc</span> <span>MIT License</span> <a href="/privacy">Privacy</a> </site-legal> <nav aria-label="Footer links"> <a href="https://github.com/acme">GitHub</a> <a href="/blog">Blog</a> </nav> <site-tools> <settings-panel></settings-panel> </site-tools></footer>Separator Customization
The dot separator uses the --sep-list token. Override it to change the separator character.
Pipe separator
<site-legal style="--sep-list: '|'"> <span>© 2026 Acme Inc</span> <span>MIT License</span> <a href="/privacy">Privacy</a></site-legal>Accessibility
No special ARIA requirements. The element is a generic container. Links within it follow standard anchor accessibility patterns.
Related
- site-tools — Site-wide utility container
- brand-mark — Brand logo display