Footer

VdFooter composes branded multi-column footers. Pass columns, dark, and size; drop your link sections into the default slot and legal text into the copyright slot.

Footer Demo

Dark Variant

Core Markup

<!-- Rendered output of &lt;VdFooter :columns="3"&gt; -->
<footer class="vd-footer vd-footer-3col">
  <div class="vd-footer-container">
    <div class="vd-footer-section">
      <h4 class="vd-footer-heading">Product</h4>
      <ul class="vd-footer-list">
        <li class="vd-footer-list-item"><a class="vd-footer-link" href="#">Docs</a></li>
        <li class="vd-footer-list-item"><a class="vd-footer-link" href="#">Components</a></li>
      </ul>
    </div>
    <div class="vd-footer-copyright">© 2026 Vanduo</div>
  </div>
</footer>

Layouts & Variants

Class	Purpose
`.vd-footer-2col / .vd-footer-3col / .vd-footer-4col`	Responsive grid columns
`.vd-footer-dark`	Dark visual style
`.vd-footer-sm / .vd-footer-lg`	Compact or spacious padding
`.vd-footer-brand`	Brand/logo block
`.vd-footer-social`	Social action links row
`.vd-footer-copyright`	Bottom legal row

CSS Variables

Variable	Default
`--vd-footer-bg`	`var(--vd-bg-secondary)`
`--vd-footer-link-color`	`var(--vd-text-secondary)`
`--vd-footer-heading-color`	`var(--vd-text-primary)`
`--vd-footer-padding-y`	`3.4375rem (55px)`
`--vd-footer-padding-y-sm`	`2.125rem (34px)`
`--vd-footer-padding-y-lg`	`5.5625rem (89px)`
`--vd-footer-section-spacing`	`2.125rem (34px)`

API Reference

Usage

<script setup lang="ts">
import { VdFooter } from "@vanduo-oss/vd3";
</script>

<template>
  <VdFooter :columns="3">
    <div class="vd-footer-section">
      <h4 class="vd-footer-heading">Product</h4>
      <ul class="vd-footer-list">
        <li class="vd-footer-list-item">
          <a class="vd-footer-link" href="/docs">Docs</a>
        </li>
        <li class="vd-footer-list-item">
          <a class="vd-footer-link" href="/components">Components</a>
        </li>
      </ul>
    </div>

    <template #copyright>© 2026 Vanduo</template>
  </VdFooter>
</template>

Component API

Prop / slot	Description
`:columns`	2 \| 3 \| 4 — responsive grid columns. Omit for a single flowing block.
`:dark`	Dark visual style (`.vd-footer-dark`).
`:size`	'sm' \| 'lg' — compact or spacious padding.
`default slot`	Footer content — `.vd-footer-section` columns, brand, and social rows.
`copyright slot`	Bottom legal row, rendered inside `.vd-footer-copyright`.

CSS Classes

Class Name	Description	Type
`.vd-footer`	Base container for the page footer element.	Component
`.vd-footer-container`	Inner max-width wrapper the component renders around the slotted content.	Layout
`.vd-footer-section`	A column or grouping area within the footer grid.	Layout
`.vd-footer-heading`	Typography class for column titles/headers.	Element
`.vd-footer-list`	Unordered list wrapper to remove bullet points and padding.	Layout
`.vd-footer-list-item`	Individual item inside a footer list.	Component
`.vd-footer-link`	Styled anchor tag commonly used in footer sections.	Element
`.vd-footer-brand`	Wrapper for branding/logo displays inside the footer.	Element
`.vd-footer-social`	Container to align horizontal social media link icons.	Layout
`.vd-footer-copyright`	Typography block for copyright/legal text elements.	Layout
`.vd-footer-[cols]col`	Grid layout modifiers: -2col, -3col, -4col.	Modifier
`.vd-footer-[variant]`	Style and spacing modifiers: -dark, -sm, -lg.	Modifier