Brand and content

Footer

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Footer } from "@cofob/design-system-react";

/**
 * Complete Footer parameter reference.
 * @param brand
 *   type: string | renderable content
 *   default: "cofob"
 *   example: "cofob"
 * @param description
 *   type: string | renderable content
 *   default: —
 *   example: "Independent software and notes."
 * @param groups
 *   type: readonly FooterGroup[]
 *   default: —
 *   example: {groups}
 * @param links
 *   type: readonly LinkItem[]
 *   default: —
 *   example: {links}
 * @param legal/copyright
 *   type: renderable content (React) | string (Svelte)
 *   default: —
 *   example: "© 2026 cofob"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param footer attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function FooterExample() {
  return (
    <Footer groups={groups} />
  );
}

Svelte

<script lang="ts">
  import { Footer } from "@cofob/design-system-svelte";

  // Complete Footer parameter reference.
  // brand
  //   type: string | renderable content
  //   default: "cofob"
  //   example: "cofob"
  // description
  //   type: string | renderable content
  //   default: —
  //   example: "Independent software and notes."
  // groups
  //   type: readonly FooterGroup[]
  //   default: —
  //   example: {groups}
  // links
  //   type: readonly LinkItem[]
  //   default: —
  //   example: {links}
  // legal/copyright
  //   type: renderable content (React) | string (Svelte)
  //   default: —
  //   example: "© 2026 cofob"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // footer attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Footer groups={groups} />

HTML

<!--
  Complete Footer parameter reference.
  brand
    type: string | renderable content
    default: "cofob"
    example: "cofob"
  description
    type: string | renderable content
    default: —
    example: "Independent software and notes."
  groups
    type: readonly FooterGroup[]
    default: —
    example: {groups}
  links
    type: readonly LinkItem[]
    default: —
    example: {links}
  legal/copyright
    type: renderable content (React) | string (Svelte)
    default: —
    example: "© 2026 cofob"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  footer attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<footer class="cf-footer">…</footer>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-footer`
Adapters	Native · React · Svelte
Primary props	brand · description · groups · links · legal/copyright · children · footer attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`brand`	`string \| renderable content`	`"cofob"`	React · Svelte · HTML	`"cofob"`	Brand text or custom brand content.
`description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Independent software and notes."`	Supporting explanatory content.
`groups`	`readonly FooterGroup[]`	`—`	React · Svelte · HTML	`{groups}`	Footer link columns.
`links`	`readonly LinkItem[]`	`—`	React · Svelte · HTML	`{links}`	Portable link records with href, label, external, and current fields.
`legal/copyright`	`renderable content (React) \| string (Svelte)`	`—`	React · Svelte · HTML	`"© 2026 cofob"`	Legal/copyright content; adapter naming differs.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`footer attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.