@gridui/site-footer
Landing family. Public API: SiteFooter, SiteFooterProps, SiteFooterSection,
SiteFooterLink, SiteFooterLinkProps, and SiteFooterLinkItem.
Import components from @gridui/site-footer and load @gridui/site-footer/styles.css after Theme.
Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
See component ownership and release history.
Pass sections, caller-owned branding, optional credit, and optional agents.
The composition owns responsive structural regions through Grid Split and FrameFooter.
Section links use the public SiteFooterLink component. SiteFooterLinkItem is the
link data contract containing label and href; it replaces the former data type
named SiteFooterLink without a compatibility alias.
Branding dimensions
brandingWidth and brandingMinHeight accept native CSS lengths or numbers in
pixels. They also accept { base, md?, lg? }, with md at 40rem and lg at
64rem. Missing breakpoints inherit the previous value. Dimensions apply only to
the branding region; native style continues to style the footer element.
<SiteFooter
branding={<h2>Product</h2>}
sections={sections}
brandingWidth={{ base: "auto", md: "16rem" }}
brandingMinHeight={0}
/>
An explicit width fixes the branding column while navigation uses the remaining
space, including widths below the default 12rem minimum. Use base: "auto" to
retain full-width mobile branding. brandingMinHeight={0} removes the reserved
minimum while retaining content padding and navigation alignment.
Omitting these props retains the existing proportions: branding grows from a 25% basis with a 12rem minimum at 40rem and above, and has a 14rem minimum height at those widths. Mobile branding remains content-sized. Structural Split seams continue to follow the mobile and desktop arrangement.
Footer links
import { SiteFooterLink } from "@gridui/site-footer";
<SiteFooterLink href="/contact/">Contact</SiteFooterLink>
SiteFooterLink renders a native anchor and requires href. It forwards native
anchor props, children, refs, and event handlers. className is merged and native
style remains available for caller customization. The same component can be
used independently in caller-owned footer branding, credit, or other compositions.
Links use supporting typography, foreground color, wrapping, and themed spacing between inline children. Underlines appear on hover and keyboard focus. Theme owns the focus outline. Applications own destinations, labels, and navigation policy.