TuxFooter

canonical

Full institutional footer

The shape used on the style guide itself, on marcom landing pages, and on docs sites. Pass columns and social to populate the marketing top; the black legal strip below renders unconditionally.

<TuxFooter
  :columns="[
    { heading: 'State Resources', links: [...] },
    { heading: 'Policies',        links: [...] },
  ]"
  :social="[
    { icon: 'lucide:linkedin', label: 'LinkedIn', href: '...' },
    { icon: 'lucide:facebook', label: 'Facebook', href: '...' },
    ...
  ]"
>
  <template #preferences>
    <button @click="toggleHighContrast">High-contrast mode</button>
  </template>
</TuxFooter>

app dashboard

Slim — no marketing columns

Drop the columns and social props and the maroon top compresses to just the identity block (logo + name + address + phone). The right shape for app contexts where marketing-y link grids would feel out of place — Corridor analyticss, tti-ai-studio sessions.

<!-- Pass no columns / no social — you get the
     identity block + mandatory legal strip. -->
<TuxFooter />

props

Props

• name — institution name. Defaults to Texas A&M Transportation Institute.
• address — multi-line address (split on newlines).
• phone — phone number, rendered as a tel: link. Pass null to hide.
• logo — logo path. Defaults to /logo.svg; the component inverts it to render light-on-maroon.
• logoSize — px width/height. Defaults to 80.
• social — array of { icon, label, href }. Renders as a circular-button row beneath the address. Pass empty to hide.
• columns — array of { heading, links: [{ label, href?, to? }] }. Two columns is canonical; three+ works on wide containers. Pass empty to hide.
• year — © year. Defaults to current year.

Slot

• #preferences — optional row beneath the state-agency links in the legal strip. Used in the style guide for the high-contrast toggle (per ADR-0006: accessibility-as-compliance).