Lumio Theme Documentation

Header & Footer Variants

Lumio does not have a single global header/footer layout. It has multiple variants, and pages opt into them through Base.astro.

This is easy to miss because the page files just pass short values like header="two" or footer="one".

Variant Switching InBase.astro

The base layout accepts these props:

type Props = {
  header?: "one" | "two" | "three";
  footer?: "one" | "two";
};

Then it resolves them like this:

const defaultHeader = "one";
const defaultFooter = "two";

const resolvedHeader = Astro.props.header || defaultHeader;
const resolvedFooter = Astro.props.footer || defaultFooter;

So a page without explicit props uses:

• Header.astro
• FooterTwo.astro

Actual Component Files

Header variants

• src/layouts/components/global/header/Header.astro
• src/layouts/components/global/header/HeaderTwo.astro
• src/layouts/components/global/header/HeaderThree.astro

Footer variants

• src/layouts/components/global/Footer.astro
• src/layouts/components/global/FooterTwo.astro

What Changes Between Header Variants

Header One

• standard logo and main navigation
• optional language switcher
• optional navigation CTA button
• sticky header support

Header Two

• topbar enabled
• blue logo section
• different spacing/layout treatment
• uses button label from t("button.getAQuote")

Header Three

• topbar variant TopbarTwo.astro
• announcement bar support via settings.announcementBar
• different CTA button styling

What Changes Between Footer Variants

Footer One

• uses footer menu groups directly
• about, office, link groups, and social columns
• optional subscription form

Footer Two

• includes logo block
• recent blog posts area
• contact block and quick links
• optional subscription form

How To Change A Page’s Shell

You can switch a page to another shell directly in the page file:

<Base {...page.data} header="three" footer="one">
  <slot />
</Base>

This is the correct approach if you want a whole page to use a different shell. Do not edit the global header component unless you want that change to affect every page using that variant.