Footer
import "@taprootio/espalier/footer";
<esp-footer>
A responsive site footer with structured spaces for branding, feature
artwork, link groups, supporting actions, and legal or utility content.
Its background remains full-bleed while its content automatically aligns
to the surface of a containing <esp-page>.
The decorative background uses the same internal visual-layer primitive as
esp-image banners; the footer's public background tokens are unchanged.
Use bare <esp-footer-link-group> children
when navigation groups should auto-flow independently through the grid.
columns is a maximum: the grid always drops columns when they no longer fit.
For creator-controlled columns, wrap each ordered stack of groups in
<esp-footer-column>. Each wrapper is one grid
item at wide sizes; below the footer's compact container breakpoint, the
columns become full-width rows in their slotted order. columns remains the
maximum number of grid items per row:
A slotted brand replaces configured branding, while the media slot accepts
a responsive picture, native image, or esp-image. Media spans the
surface-aligned content well; use the decorative background layer for
edge-to-edge artwork:
Decorative art uses an image layer independent of the base color. The same API supports a repeating landscape band or one large cover image:
Surface alignment is automatic inside esp-page; opt out only when the
footer's content should also span the entire bar:
Slots
<esp-footer> has the following slots:
media
Meaningful artwork spanning the surface-aligned content well, preferably responsive <picture> markup or an esp-image with appropriate alternative text.
brand
Custom brand identity. Overrides configured brand properties.
Default
Bare esp-footer-link-group children for automatic flow, or esp-footer-column children for creator-controlled group stacks.
aside
Supporting content such as a newsletter, call to action, contact details, social links, or locale controls.
bottom
Copyright, legal/utility links, attribution, accessibility controls, site credit, or a final wordmark.
Attributes
<esp-footer> has the following attributes:
brand-text
brand-text has a default value of "".
Configured brand text used when the brand slot is empty.
brand-logo
brand-logo has a default value of "".
Configured brand logo URL used when the brand slot is empty.
light-brand-logo
light-brand-logo has a default value of "".
Configured brand logo URL used in light scheme. A non-empty value
overrides brand-logo; an empty value falls back to it.
dark-brand-logo
dark-brand-logo has a default value of "".
Configured brand logo URL used in dark scheme. A non-empty value
overrides brand-logo; an empty value falls back to it.
brand-href
brand-href has a default value of "".
Optional configured-brand link target.
brand-alt
brand-alt has a default value of "".
Accessible text for a configured logo.
brand-color
brand-color has a default value of "".
Optional configured brand color. Scheme-specific colors override it;
when all configured colors are empty, --esp-footer-heading-color
remains the fallback.
light-brand-color
light-brand-color has a default value of "".
Configured brand color used in light scheme. A non-empty value
overrides brand-color; an empty value falls back to it and then
--esp-footer-heading-color.
dark-brand-color
dark-brand-color has a default value of "".
Configured brand color used in dark scheme. A non-empty value
overrides brand-color; an empty value falls back to it and then
--esp-footer-heading-color.
columns
columns has a default value of "auto".
Maximum number of link-group columns. Numeric values cap the wide layout; the intrinsic grid still renders fewer columns when space is limited.
full-bleed-content
full-bleed-content has a default value of false.
Opt out of the esp-page surface-alignment contract and allow footer
content to use the full bar width. The background is always full-bleed.
landmark-label
landmark-label has a default value of "".
Optional accessible label for pages containing multiple footer landmarks.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-footer> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
CSS Parts
<esp-footer> has the following CSS parts:
footer
The native footer landmark and full-bleed base surface.
background
The independent decorative image layer.
content
The surface-aligned content wrapper.
media
The media region spanning the aligned content well.
primary
The grid containing brand, link groups, and aside content.
brand
The brand region.
groups
The link-group grid.
aside
The supporting-content region.
bottom
The final legal/utility region.
CSS Properties
<esp-footer> has the following CSS properties:
--esp-footer-background
Base footer color. Defaults to var(--esp-color-layer-2).
--esp-footer-color
Body text color. Defaults to var(--esp-color-text).
--esp-footer-heading-color
Heading and configured-brand color. Defaults to var(--esp-color-headings).
--esp-footer-link-color
Link color. Defaults to var(--esp-color-link).
--esp-footer-link-hover-color
Hovered link color. Defaults to var(--esp-color-link-hover).
--esp-footer-focus-outline
Focus-visible outline. Defaults to 2px solid var(--esp-color-link).
--esp-footer-border
Block-start footer border. Defaults to 1px solid var(--esp-color-border).
--esp-footer-padding-block
Content block padding. Defaults to var(--esp-size-padding-page).
--esp-footer-padding-inline
Content inline padding. Defaults to var(--esp-size-padding-page).
--esp-footer-section-gap
Gap between media, primary, and bottom regions. Defaults to var(--esp-size-big).
--esp-footer-column-gap
Gap between link-group columns and major primary regions. Defaults to var(--esp-size-padding-page).
--esp-footer-row-gap
Vertical gap between footer grid rows and link groups stacked in esp-footer-column. Defaults to var(--esp-size-big).
--esp-footer-link-group-min-width
Intrinsic minimum link-group column width. Defaults to 10rem.
--esp-footer-link-group-gap
Space between a link-group heading and its links. Defaults to var(--esp-size-small).
--esp-footer-brand-logo-size
Configured logo block size. Defaults to 3rem.
--esp-footer-brand-logo-max-width
Configured logo maximum inline size. Defaults to 12rem.
--esp-footer-background-image
Decorative image or gradient layer. Defaults to none.
--esp-footer-background-image-opacity
Decorative layer opacity. Defaults to 1.
--esp-footer-background-repeat
Decorative layer repeat behavior. Defaults to repeat.
--esp-footer-background-position
Decorative layer position. Defaults to 0 0.
--esp-footer-background-size
Decorative layer size. Defaults to auto.
--esp-footer-background-blend-mode
Decorative layer blend mode. Defaults to normal.
--esp-footer-content-max-width
Surface-alignment cap published by esp-page. Defaults to 100%.
--esp-footer-content-lead
Fraction of surplus placed before content (0, 0.5, or 1). Defaults to 0.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).