ComponentsThemingMotionIntegrationsGetting startedCompositionCode examplesIcon catalogAboutPrinciplesRoadmapContactPrivacyTermsSecurityLicensesBack to top Composition
Use cad-footer-group for link groups. Add branding, forms, social links, status, and other content through Footer slots. Your application handles their actions.
Variants
light is the default. dark uses a dark surface, elevated adds a shadow, and minimal removes the frame and fold.
Responsive layout
Columns stack as space narrows. At 48rem and below, link groups collapse into toggles while utility links remain visible.
labellabelstring'Site footer'links-labellinksLabelstring'Footer links'social-labelsocialLabelstring'Social links'variantvariantCadFooterVariant'light'labelstringlabelnolinksLabelstringlinks-labelnosocialLabelstringsocial-labelnovariantCadFooterVariantvariantyes(default)Direct `cad-footer-group` navigation groups.asideOptional supporting content beside navigation.back-to-topOptional back-to-top action.bottomCopyright, locale, status, and policy utilities.brandProduct identity, description, and optional newsletter form.socialSocial profile links.asideSupporting content region.bottomBottom utility bar.brandBrand and product context region.groupsPrimary footer navigation.socialSocial navigation.surfaceSemantic footer landmark and visual surface.topMain responsive grid.--cad-footer-accentPer-instance ink and border accent.--cad-footer-borderPer-instance border color.--cad-footer-inkPer-instance text color.--cad-footer-surfacePer-instance surface color.headingheadingstring'Links'openopenbooleanfalseheadingstringheadingnoopenbooleanopenyescad-footer-group-toggleCustomEventFired when the mobile disclosure changes.(default)Links or other compact navigation content.headingOptional rich heading. Falls back to the `heading` attribute.contentCollapsible group content.headingGroup heading.toggleMobile disclosure button.Accessibility
The footer contains named navigation regions. Group buttons expose aria-expanded and aria-controls. Collapsed links leave the tab order; all links remain available without JavaScript.