Skip to content

Footers

Each footer is made to be fully responsive and easily customizable. For best results, it is recommended to integrate it directly into your website’s layout.

---
// Import
import MinimalFooter from "../components/MinimalFooter.astro";
---

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <main>
      <slot />
    </main>
     <!-- Add Here -->
    <MinimalFooter />
  </body>
</html>

A simple footer with your site’s logo and the sections or pages of your project plus your social media.

Preview
Code

   ---
   // 8 Instructions in this component

   import { Image } from "astro:assets";

   //Start editing the component here ↓, choose the path to your logo. ❶

   import yourLogo from "../../../assets/icons/planckstar.svg";

   // ↓ Here you can add as many columns as you want to your footer. ❷

   const links = [
     {
       title: "Main", //← Edit here the name/title of the column. ❸
       sublinks: [
         { subtitle: "Home", href: "#" }, //------ Add your links here wherever you like, ❹
         { subtitle: "Products", href: "#" }, //-- including a label (subtitle) for each one and href.
       ],
     },
     {
       title: "Second", //---------------------------|
       sublinks: [
         { subtitle: "Support", href: "#" }, //------|
         { subtitle: "Security", href: "#" }, //-----| ← Add more columns using this format. ❺
       ],
     },
   ];

   //Here you add the path to your social media icons ↓. ❻

   import socialLogoFirst from "../../../assets/icons/x.svg";
   import socialLogoSecond from "../../../assets/icons/github.svg";
   import socialLogoThird from "../../../assets/icons/blackberry.svg";

   //↓ You can add as many icons as you like here, along with their links and alt text to follow accessibility best practices. ❼

   const socialItems = [
     { icon: socialLogoFirst, href: "x.com", alt: "Icon -----" },
     { icon: socialLogoSecond, href: "github.com", alt: "Icon -----" },
     { icon: socialLogoThird, href: "/blackberry.com", alt: "Icon -----" },
   ];

   // Add the name of your company here. ❽
   const company = "Your Company";
   ---

   <footer class="w-full text-white border-white/30">
     <div class="flex flex-col md:flex-row w-full my-12">
       <div
         class="flex justify-center items-center w-full md:w-[50%] mb-12 md:mb-0"
       >
         <Image class="w-[20%]" src={yourLogo} alt="_Your Logo_" />
       </div>

       <div class="flex justify-around w-full md:w-[50%]">
         {
           links.map((section) => (
             <div>
               <p class="uppercase text-sm">{section.title}</p>
               <ul class="mt-4">
                 {section.sublinks.map((link) => (
                   <li class="my-2">
                     <a
                       href={link.href}
                       class="font-light text-gray-400 hover:text-gray-500"
                     >
                       {link.subtitle}
                     </a>
                   </li>
                 ))}
               </ul>
             </div>
           ))
         }

         <div class="flex flex-col items-center w-[40%]">
           <p class="uppercase text-sm w-full text-center">Social</p>
           <ul class="flex mt-6">
             {
               socialItems.map((icon) => (
                 <li class="flex items-center justify-center h-full">
                   <a href={icon.href} class="px-3">
                     <Image src={icon.icon} alt={icon.alt} />
                   </a>
                 </li>
               ))
             }
           </ul>
         </div>
       </div>
     </div>
     <div
       class="flex justify-between border-y border-white/30 w-full px-6 py-4 text-xs"
     >
       <p class="text-xs w-[40%]">
         Copyright {company} © 2025 All Rights Reserved
       </p>

       <a href="/privacy">Privacy Policy</a>
     </div>
   </footer>

2. Three sections Header

An elegant and fully functional footer that includes an integrated newsletter component, allowing your visitors to subscribe easily while maintaining a clean and professional design.

Preview
Code

---
// 8 Instructions in this component

import { Image } from "astro:assets";

//Start editing the component here ↓, choose the path to your logo. ❶
import yourLogo from "../../../assets/icons/YourLogo.svg";

// ↓ Here you can add as many columns as you want to your footer. ❷
const links = [
  {
    title: "Main", //← Edit here the name/title of the column. ❸
    sublinks: [
      { subtitle: "Home", href: "#" }, //------ Add your links here wherever you like, ❹
      { subtitle: "Products", href: "#" }, //-- including a label (subtitle) for each one
      { subtitle: "Services", href: "#" }, //-- along with its corresponding path (href).
      { subtitle: "About", href: "#" },
      { subtitle: "Contact", href: "#" },
    ],
  },
  {
    title: "Second", //---------------------------|
    sublinks: [
      { subtitle: "Support", href: "#" }, //------|
      { subtitle: "Security", href: "#" }, //-----| ← Add more columns using this format ❺
      { subtitle: "Accessibility", href: "#" }, //|
      { subtitle: "Careers", href: "#" }, //------|
    ], //-----------------------------------------|
  },
];

//Here you add the path to your social media icons ↓. ❻
import socialLogoFirst from "../../../assets/icons/x.svg";
import socialLogoSecond from "../../../assets/icons/github.svg";
import socialLogoThird from "../../../assets/icons/blackberry.svg";

//↓ You can add as many icons as you like here, along with their links and alt text to follow accessibility best practices. ❼
const socialItems = [
  { icon: socialLogoFirst, href: "x.com", alt: "Icon -----" },
  { icon: socialLogoSecond, href: "github.com", alt: "Icon -----" },
  { icon: socialLogoThird, href: "/blackberry.com", alt: "Icon -----" },
];

// Add the name of your company here. ❽
const company = "Your Company"

---

<footer class="relative w-full text-white border-white/30">
  <p
    class="absolute bottom-2 right-2 md:bottom-4 md:right-6 text-xs text-gray-400"
  >
    Copyright {company} © 2025 All Rights Reserved
  </p>

  <div
    class="flex flex-col md:flex-row justify-around items-center md:items-start py-16"
  >
    <div class="flex flex-col items-center mb-14 md:mb-0">
      <Image class="w-16 mb-4" src={yourLogo} alt="_Your Logo_" />
      <p class="mt-6 mb-4 w-full">
        Subscribe to our newsletter and stay <br /> up to date with upcoming projects.
      </p>
      <form class="font-light" action="/subscribe" method="POST">
        <div class="relative bg-gray-900 p-4 pr-28 rounded-md">
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Enter your email"
            required
            class="outline-none"
          />
          <button
            type="submit"
            class="absolute top-1 bottom-1 right-1 bg-gray-950 px-2 rounded-md cursor-pointer"
            >Subscribe</button
          >
        </div>
      </form>
    </div>

    <div class="flex justify-around mb-8">
      {
        links.map((section) => (
          <div class="flex flex-col last:ml-20">
            <p class="uppercase text-sm">{section.title}</p>
            <ul class="mt-4">
              {section.sublinks.map((link) => (
                <li class="my-2 ml-2">
                  <a
                    href={link.href}
                    class="font-light text-gray-400 hover:text-gray-500"
                  >
                    {link.subtitle}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))
      }
    </div>
    <div class="flex flex-col items-center">
      <p class="uppercase text-sm">Social</p>
      <ul class="flex mt-6">
        {
          socialItems.map((icon) => (
            <li class="flex items-center justify-center h-full">
              <a href={icon.href} class="px-3">
                <Image src={icon.icon} alt={icon.alt} />
              </a>
            </li>
          ))
        }
      </ul>
    </div>
  </div>
</footer>

A footer featuring an elegant Planckstar-inspired design, offering full functionality and simple customization to fit your website seamlessly.

Preview
Code

---
// 8 Instructions in this component

import { Image } from "astro:assets";

//Start editing the component here ↓, choose the path to your logo. ❶

import yourLogo from "../../../assets/icons/YourLogo.svg";

// ↓ Here you can add as many columns as you want to your footer. ❷

const links = [
  {
    title: "Main", //← Edit here the name/title of the column. ❸
    sublinks: [
      { subtitle: "Home", href: "#" }, //------ | Add your links here wherever you like, ❹
      { subtitle: "Products", href: "#" }, //-- | including a label (subtitle) for each one
      { subtitle: "Services", href: "#" }, //-- | along with its corresponding path (href).
      { subtitle: "About", href: "#" },
      { subtitle: "Contact", href: "#" },
    ],
  },
  {
    title: "Second", //---------------------------|
    sublinks: [
      { subtitle: "Support", href: "#" }, //------|
      { subtitle: "Security", href: "#" }, //-----| ← Add more columns using this format ❺
      { subtitle: "Accessibility", href: "#" }, //|
      { subtitle: "Careers", href: "#" }, //------|
    ], //-----------------------------------------|
  },
];

//Here you add the path to your social media icons ↓. ❻

import socialLogoFirst from "../../../assets/icons/x.svg";
import socialLogoSecond from "../../../assets/icons/github.svg";
import socialLogoThird from "../../../assets/icons/blackberry.svg";

//↓ You can add as many icons as you like here, along with their links and alt text to follow accessibility best practices. ❼

const socialItems = [
  { icon: socialLogoFirst, href: "x.com", alt: "Icon -----" },
  { icon: socialLogoSecond, href: "github.com", alt: "Icon -----" },
  { icon: socialLogoThird, href: "/blackberry.com", alt: "Icon -----" },

];

// Add the name of your company here. ❽
const company = "Your Company"

---

<footer class="w-full text-white border-white/30">
  <div class="flex w-full justify-between">
    <div
      class="flex flex-col min-h-full w-[40%] justify-between border-r border-white/20"
    >
      <p class="text-xs p-4 text-gray-400 w-full border-b border-white/20">
        Copyright {company} © 2025 All Rights Reserved
      </p>
      <Image class="w-16 mx-auto" src={yourLogo} alt="_Your Logo_" />
      <div class="flex flex-col md:flex-row w-full border-y border-white/20">
        <p class="uppercase text-sm p-4 w-[70%]">Social</p>
        <ul class="flex flex-col w-full">
          {
            socialItems.map((icon) => (
              <li class="flex py-2 md:py-4 border-b border-white/10 last:border-0 w-full">
                <a href={icon.href} class="flex px-3 w-full">
                  <Image src={icon.icon} alt={icon.alt} />
                </a>
              </li>
            ))
          }
        </ul>
      </div>
    </div>

    <div class="flex flex-col justify-around w-[60%]">
      {
        links.map((section) => (
          <div class="flex">
            <p class="uppercase text-sm w-[40%] p-4 border-b border-white/20">
              {section.title}
            </p>
            <ul class="w-[60%]">
              {section.sublinks.map((link) => (
                <li class="py-4 border-b border-white/10  last:border-white/20 w-full">
                  <a
                    href={link.href}
                    class="flex font-light text-gray-300 hover:text-gray-500 w-full"
                  >
                    {link.subtitle}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))
      }
    </div>
  </div>
</footer>