Footer Section
A site footer with brand and a validated newsletter form, link columns that collapse to an accordion in narrow containers, a status pill and language and theme selects.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | { title, links: { label, href, badge? }[] }[] | — | Link columns; they collapse into an accordion when the container is narrow. |
| brand | ReactNode | — | Logo or wordmark. |
| tagline | ReactNode | — | One line under the brand. |
| onSubscribe | (email) => Promise<void | { error }> | — | Newsletter submit. Validates the email first; omit to hide the form. |
| newsletterTitle | ReactNode | "Get the Monday note" | Newsletter heading. |
| newsletterDescription | ReactNode | — | Line under the newsletter heading. |
| status | { label, tone?, href? } | — | Status pill; tone "ok" green, "degraded" ember, "down" red. |
| locales | { value, label }[] | — | Shows the language select. |
| locale / defaultLocale | string | first locale | Controlled or initial language. Pair locale with onLocaleChange. |
| theme / defaultTheme | "system" | "light" | "dark" | — | Shows the theme select. Pair theme with onThemeChange. |
| legal | ReactNode | — | Copyright line. |
| legalLinks | { label, href }[] | [] | Links in the legal row. |
| social | { label, href, icon }[] | [] | Contact icon links in the legal row. Use generic glyphs (globe, mail, chat), never brand marks. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.