mdxui.dev
npm7.0.0-alpha.0
Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

footer

The foot of a page: brand and blurb, link columns and a ruled note row.

View as JSON
Variant
From Ledgerhouse › homevaultlineOpen the frame

When to use

End every page of a Site with one footer. columns sets two or three titled link columns beside the brand and its blurb, and one column is titled For agents. areas places the same columns in a grid with the call under the brand.

row puts the brand and a single row of links on one line, for a Site of a few pages. Every layout ends on a note of two lines, at most 96 characters each.

In the For agents column, link what an agent reads: the page records, the schema, llms.txt.

Use instead

No neighbor does this job.

The record

pages/ledgerhouse/home.json, section 7
{
  "kind": "footer",
  "shell": { "inset": "contained", "density": "footer" },
  "block": {
    "type": "footer",
    "layout": "columns",
    "brand": { "href": "/", "text": "Ledgerhouse", "mark": "landmark" },
    "blurb": "Bookkeeping and tax for small businesses, by two partners and no handoffs.",
    "columns": [
      {
        "title": "The firm",
        "links": [
          ["/services", "Services"],
          ["/services/monthly-close", "Monthly close"],
          ["/pricing", "Fees"],
          ["/about", "About"]
        ]
      },
      {
        "title": "Clients",
        "links": [
          ["/intake", "Intake"],
          ["/terms", "Terms of engagement"]
        ]
      },
      {
        "title": "For agents",
        "links": [
          ["/records.zip", "Site records (.zip)"],
          ["/services/monthly-close", "What a close report holds"]
        ]
      }
    ],
    "note": ["Ledgerhouse is a worked example on mdxui.dev, not a customer.", "Rendered by @mdxui/site. Forms here do not send."]
  }
}

Smallest that parses

{
  "type": "footer",
  "layout": "columns",
  "brand": { "href": "/", "text": "Ledgerhouse" },
  "columns": [
    {
      "title": "The firm",
      "links": [
        ["/services", "Services"],
        ["/services/monthly-close", "Monthly close"],
        ["/pricing", "Fees"],
        ["/about", "About"]
      ]
    },
    {
      "title": "Clients",
      "links": [
        ["/intake", "Intake"],
        ["/terms", "Terms of engagement"]
      ]
    },
    {
      "title": "For agents",
      "links": [
        ["/records.zip", "Site records (.zip)"],
        ["/services/monthly-close", "What a close report holds"]
      ]
    }
  ],
  "note": ["Ledgerhouse is a worked example on mdxui.dev, not a customer.", "Rendered by @mdxui/site. Forms here do not send."]
}

Fields and bounds

From @mdxui/site@7.0.0-alpha.0. A count reads as min–max × item; a string bound is its maximum length in characters, and links its refusal.

PropType and boundRequired
layout"columns" | "areas" | "row"yes
brandobjectyes
brand.hrefstring ≤160yes
brand.textstring ≤16no
brand.markicon or mark name (52)no
brand.suffixstring ≤8no
brand.tilebooleanno
blurbstring ≤160no
columns0–4 × objectyes
columns[].titlestring ≤16yes
columns[].labelstring ≤40no
columns[].links1–12 × [string ≤160, string ≤48]yes
ctaobjectno
cta.hrefstring ≤160yes
cta.labelstring ≤24yes
cta.iconicon or mark name (52)no
social0–6 × objectno
social[].mark"bluesky" | "github" | "linkedin" | "npm" | "reddit" | "x" | "ycombinator"yes
social[].hrefstring ≤160yes
formobjectno
form.actionstring ≤160yes
form.labelstring ≤24yes
form.placeholderstring ≤32yes
form.submitstring ≤16yes
note[string ≤96, string ≤96]yes

Variants and counts

Three layouts: columns, areas and row. Any of them can carry a sign-up form and up to six social marks.

columnsopen
areasopen
rowopen

One record in five Themes

vaultlineLedgerhouse’s ownopen
certificateopen
quaypointopen
callboardopen
directoryopen

Shells

paperopen
tintopen
plateopen
glassopen

In three Businesses

Carried by every Template. Seen on pages/ledgerhouse/home.json, section 7.

Benchlist › home · directoryA directory links cities and the form to list a bench.
Diffkeel › home · certificateA developer tool links install, changelog and the records an agent reads.
Harbor tides › home · quaypointAn API product keeps one row: pricing, integrations, blog, contact and terms, and a note naming it a worked example.

Do and do not

Doopen
Two or three columns, one of them For agents, beside the brand.
Don’trefused
{
  "type": "footer",
  "layout": "columns",
  "brand": {
    "href": "/sites/harbor/",
    "text": "Harbor tides",
    "mark": "waves"
  },
  "blurb": "Tide windows per berth, as an API.",
  "columns": [
    {
      "title": "Product",
      "links": [
        [
          "/sites/harbor/pricing",
          "Pricing"
        ]
      ]
    },
    {
      "title": "Partners",
      "links": [
        [
          "/sites/harbor/integrations",
          "Integrations"
        ]
      ]
    },
    {
      "title": "Writing",
      "links": [
  … 21 more lines
SectionSchema.safeParse(record)blocka footer in columns holds two or three of them
Four one-link columns, none For agents, are refused: a footer in columns holds two or three.
Doopen
A note of two short facts a reader can scan.
Don’topen
A note running to a paragraph in each line crowds the last thing on the page.

Accessibility

Check, on the exemplar renderLimitNowPass
Skipped heading levels00yes
Unnamed nav landmarks03 of 3no
Scroll regions a keyboard cannot reach00 of 0yes
Copy controls that announce the resultall0 of 0yes
Images and icons with no text alternative00yes

Text pairs below AA across the 5 Themes and every scheme they emit: 5. See Render checks.

  • Landmark The footer renders the page footer, after main. Each link column is its own nav; give it a label to name it, as the check above counts.
  • Heading level Column titles render as h4.
  • Focus order Tab runs brand, then each column top to bottom, then the form and the social marks.

No neighbor does this job.