MarketingFooter
A marketing site footer: a brand block, several columns of links, and a bottom bar with social links and a copyright line. Presentational and theme-driven.
Installation
pnpm
pnpm dlx @hex-core/cli add marketing-footerAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | object | — | ReadonlyArray<{ title: ReactNode; links: { label: ReactNode; href: string }[] }>. Labelled link columns rendered beside the brand. |
brand | ReactNode | — | Brand block (logo + tagline) shown in the lead column. |
social | ReactNode | — | Social / external icon links shown in the bottom bar. |
copyright | ReactNode | — | Copyright / legal line in the bottom bar. |
className | string | — | Additional classes applied to the root <footer>. |
AI Guidance
When to use
Use as the last section of a marketing / landing page, below the closing CTA. Group links into 2–4 labelled columns.
When not to use
Don't use as in-app footer chrome. Don't dump every route here — curate the most useful links per column.
Common mistakes
- One column with 20 links instead of a few grouped columns — group by topic.
- Omitting the copyright line, which most footers are expected to carry.
- Putting social icons with no accessible label — wrap each in a link with an aria-label or sr-only text.
Accessibility
Each column title renders as an <h3>. Links are real anchors with visible hover/focus states. Social icon links need an accessible name (aria-label or sr-only text) since the icon alone isn't announced.
Related components
Token budget: 600
Verified against @hex-core/components@1.12.0