Footer

Preview

Call to action

Call to action

Acme, Inc. Logo

Source

---
import Button from '@bejamas/ui/components/Button.astro';
import Footer from '@bejamas/ui/components/Footer.astro';
import LinkGroup from '@bejamas/ui/components/LinkGroup.astro';
---

<Footer>
  <div slot="cta">
    <h2>Call to action</h2>
    <Button>Call to action</Button>
  </div>
  <div class="grid grid-cols-4 gap-4">
  <div>Acme, Inc. Logo</div>
  <LinkGroup
    title="Resources"
    items={[
      { label: "Blog", href: "/blog" },
      { label: "Documentation", href: "/docs" }
    ]}
  />
  <LinkGroup
    title="Company"
    items={[
      { label: "Home", href: "/" },
      { label: "About", href: "/about" }
    ]}
  />
  </div>
</Footer>

Installation

CLI

bun

 bunx bejamas add footer

npm

 npx bejamas add footer

pnpm

 pnpm dlx bejamas add footer

yarn

 yarn dlx bejamas add footer

Manual

---
/**
 * @component Footer
 * @title Footer
 * @description Footer component for the page.
 * @status stable
 * @since 0.1.0
 *
 * @preview
 *
 * <Footer>
 *   <div slot="cta">
 *     <h2>Call to action</h2>
 *     <Button>Call to action</Button>
 *   </div>
 *   <div class="grid grid-cols-4 gap-4">
 *   <div>Acme, Inc. Logo</div>
 *   <LinkGroup
 *     title="Resources"
 *     items={[
 *       { label: "Blog", href: "/blog" },
 *       { label: "Documentation", href: "/docs" }
 *     ]}
 *   />
 *   <LinkGroup
 *     title="Company"
 *     items={[
 *       { label: "Home", href: "/" },
 *       { label: "About", href: "/about" }
 *     ]}
 *   />
 *   </div>
 * </Footer>
 *
 * @usage
 *
 * ## Structure
 *
 * A Footer component is composed of the following parts:
 *
 * - `Footer.astro` - The footer container.
 * - `LinkGroup.astro` - Links within the footer.
 *
 * ```astro
 * ---
 * import Footer from '@bejamas/ui/components/Footer.astro';
 * ---
 *
 * <Footer />
 *
 * ```
 *
 */

import { cn } from "@bejamas/ui/lib/utils";

const { class: className = "", ...props } = Astro.props;
---

<footer
  class={cn("bg-footer text-footer-foreground w-full", className)}
  {...props}
>
  {
    Astro.slots.cta && (
      <div class="flex justify-center">
        <slot name="cta" />
      </div>
    )
  }
  <slot />
</footer>

Usage

Structure

A Footer component is composed of the following parts:

• Footer.astro - The footer container.
• LinkGroup.astro - Links within the footer.

---
import Footer from '@bejamas/ui/components/Footer.astro';
---

<Footer />