Footer

Footers provide secondary navigation, legal links, and brand information at the bottom of pages. These patterns use semantic <footer> and <nav> elements with aria-label for accessibility.

Key features:

• Semantic HTML with proper ARIA attributes for screen readers
• Responsive layouts using data-layout attributes (grid, sidebar, cluster, stack)
• Social media icons with accessible labels, wrapped in <nav aria-label="Social media">
• Newsletter signup with form-field component
• footer.site provides base styling (background, border, link colors, compact nav padding) with zero custom CSS

A compact footer with horizontal links, logo, and social icons. Uses data-layout="cluster" with data-layout-justify="between" for flexible horizontal spacing that wraps gracefully on smaller screens.

A comprehensive footer with organized link categories in columns. Uses data-layout="grid" with data-layout-min="10rem" to create responsive columns that automatically adjust based on available space.

Additional styles for the multi-column layout, including uppercase headings and the bottom separator:

A footer that includes a newsletter signup form alongside navigation links. Uses data-layout="sidebar" to create a split layout where the newsletter section takes priority, with link columns on the side.

Additional styles specific to the newsletter section:

The footer.site class from VB handles most base styling automatically — background, border, padding, muted link colors with hover transitions, and compact nav link padding. No custom CSS is needed for the simple footer variant.

• Accessibility: Use aria-label on each <nav> element to distinguish between different navigation sections (e.g., "Company links", "Legal links")
• Social icons: Always include aria-label on social media links since they only contain icons. Wrap social links in <nav aria-label="Social media"> for proper semantics and to suppress external-link indicators
• Newsletter forms: Use class="sr-only" on labels for screen reader accessibility when using placeholder text
• Copyright: Use <small> for copyright text — VB styles it at the correct size automatically
• Link organization: Group related links under descriptive headings for better navigation
• Layout attributes: Use data-layout attributes directly on semantic elements instead of custom element wrappers for cleaner markup
• Responsive behavior: Test footer layouts at various viewport widths to ensure graceful wrapping