UI
Request Kit

Manual v0.1 // Component Library

The Footer
Strip

"Copy, links, CTA. The same three slots, reshuffled four different ways."

Same <Footer> API as before, default slot for copy, links/cta named slots. But surveyed across the real sites like Navbar was, since it turns out one layout wasn't cutting it either. variant now picks the shape; bg/text/font override colours and font without forking it.

01 / SPLIT

split

echov2 / echo

Specrow / space-between / stacks <768px

variant="split" (default)

02 / CENTERED

centered

yolo / respri / plsfundme

Speccolumn / centered / logo+blurb+copyright

variant="centered"

03 / STATEMENT

statement

dermageddon

Specfilled block / big centered headline

variant="statement"

04 / COLUMNS

columns

tallish

Speclink columns / hairline / bottom row

variant="columns"

How to use

import { Footer } from "echo-ui";
<Footer variant="centered">
  <h2>Your Studio</h2>
  <p>&copy; 2026 Your Studio</p>

  <template #links>
    <NuxtLink to="/work">Work</NuxtLink>
    <NuxtLink to="/contact">Contact</NuxtLink>
  </template>

  <template #cta>
    <a href="mailto:hi@you.com">Get in touch</a>
  </template>
</Footer>

variant accepts split (default), centered, statement, or columns. Same three slots every time, columns just repurposes links for grouped nav and cta for the small legal row, since that's how tallish actually structures it. bg/text/font override colours and font without forking a variant.

Base rule

empty slots collapse, links/cta only render if you pass content

Source

echo-ui/components/Footer.vue