# Large 12 brand

> A launch signup on a tinted band, then the logo and a join link beside five columns, copyright and social links, on the brand colour.

URL: https://apogee.avaui.dev/docs/footers-sections/large-12-brand
Last updated: 2026-10-20

A launch signup on a tinted band, then the logo and a join link beside five columns, copyright and social links, on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/footers/large-12-brand

```astro
---
/**
 * Large 12 brand: A launch signup on a tinted band, then the logo and a join link beside five columns, copyright and social links, on the brand colour.
 *
 * @block footers
 * @order 32
 */
import { Orbit } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Badge from '@/components/apogee/Badge/Badge.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {}

const {
  brand = 'Example',
  tagline = 'Design calm, accessible websites your whole team can edit.',
  newsletterHeading = 'Get notified when we launch',
  newsletterDescription = 'The latest news, announcements and articles, in your inbox.',
  submitLabel = 'Subscribe',
  columns = [
    { heading: 'Product', links: [{ label: 'Overview', href: '#' }, { label: 'Features', href: '#' }, { label: 'Solutions', href: '#', badge: 'New' }, { label: 'Tutorials', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Releases', href: '#' }] },
    { heading: 'Company', links: [{ label: 'About us', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Press', href: '#' }, { label: 'News', href: '#' }, { label: 'Media kit', href: '#' }, { label: 'Contact', href: '#' }] },
    { heading: 'Resources', links: [{ label: 'Blog', href: '#' }, { label: 'Newsletter', href: '#' }, { label: 'Events', href: '#' }, { label: 'Help centre', href: '#' }, { label: 'Tutorials', href: '#' }, { label: 'Support', href: '#' }] },
    { heading: 'Community', links: [{ label: 'Forum', href: '#' }, { label: 'Meetups', href: '#' }, { label: 'Changelog', href: '#' }, { label: 'Status', href: '#' }, { label: 'Partners', href: '#' }, { label: 'Developers', href: '#' }] },
    { heading: 'Legal', links: [{ label: 'Terms', href: '#' }, { label: 'Privacy', href: '#' }, { label: 'Cookies', href: '#' }, { label: 'Licences', href: '#' }, { label: 'Settings', href: '#' }, { label: 'Contact', href: '#' }] },
  ],
  copyright = '© 2026 Example. All rights reserved.',
  social = [
    { label: 'Email', href: '#', icon: 'mail' },
    { label: 'Blog feed', href: '#', icon: 'rss' },
    { label: 'Community', href: '#', icon: 'message' },
    { label: 'Website', href: '#', icon: 'globe' },
    { label: 'Contact', href: '#', icon: 'at-sign' },
  ],
} = Astro.props
---

<footer>
  <Section as="div" spacing="medium" background="primary">
    <div class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
      <div class="flex flex-col gap-3 items-start">
      {newsletterHeading && <Heading as="h2" size="h2">{newsletterHeading}</Heading>}
      {newsletterDescription && <p class="text-lg opacity-85">{newsletterDescription}</p>}
    </div>
      <div class="flex flex-col gap-4 ">
      <form method="post" class="flex flex-col gap-3 sm:flex-row">
        <Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required class="sm:w-64" />
        <Button type="submit" color="neutral">{submitLabel}</Button>
      </form>
    </div>
    </div>
  </Section>
  <Section as="div" spacing="small" background="primary" class="border-t border-current/25">
    <div class="grid gap-12 lg:gap-16 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
    <div class="flex flex-col gap-6">
      <Link href="/" color="inherit" underline="none" class="inline-flex items-center gap-2 text-lg font-semibold "><FeaturedIcon theme="solid" color="neutral" size="small"><Orbit /></FeaturedIcon>{brand}</Link>
      {tagline && <p class="max-w-xs opacity-85">{plain(tagline)}</p>}
    </div>
    <div class="grid grid-cols-2 gap-8 md:grid-cols-5">
      {columns.map((c) => (
        <nav aria-label={c.heading}>
          <p class="text-sm font-semibold opacity-85">{c.heading}</p>
          <ul class="mt-4 flex list-none flex-col gap-3 p-0">
            {c.links.map((l) => (
              <li class="flex items-center gap-2">
                <Link href={l.href} color="inherit" underline="hover" class="font-semibold">{l.label}</Link>
                {l.badge && <Badge size="small" variant="outline" color="neutral" class="border-current! bg-transparent! text-inherit!">{l.badge}</Badge>}
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  </div>
    <div class="mt-12 md:mt-16 flex flex-col-reverse gap-6 border-t border-current/25 pt-8 md:flex-row md:items-center md:justify-between">
    {copyright && <p class="opacity-85 ">{copyright}</p>}
    {social && <ul class="flex list-none flex-wrap gap-6 p-0 opacity-85">{social.map((s) => { const Icon = socialIcons[s.icon]; return <li><Link href={s.href} color="inherit" underline="none" aria-label={s.label} class="flex"><Icon class="size-6" aria-hidden="true" /></Link></li> })}</ul>}
  </div>
  </Section>
</footer>
```

## Add

```sh
npx @ava-ui/apogee add footers/large-12-brand
```

This copies the block to `src/components/apogee/blocks/footers/` with everything it uses: Badge, Button, FeaturedIcon, Heading, Input, Link, Section. Every piece of copy is a prop, with the sample copy as its default. Pass yours, or `null` to hide a part; see [copy is props](https://apogee.avaui.dev/docs/footers-sections#copy-is-props).

## Accessibility

-   The heading is an `h2` by default, so the block slots into a page under its `h1`; item titles are one level down.
-   The email field is named “Email” (the placeholder is not a label); the form submits without JS.
-   The icon links are named (Email, Blog feed, Community…); the icons themselves are hidden.
-   The block is the page’s `<footer>` landmark; each link column is a `<nav>` named after its heading.

## Related

[

FooterA site footer shell for link columns and a bottom copyright row.

](https://apogee.avaui.dev/docs/footer)[

LinkAn inline text link — for a link that should look like a button, use Button with href instead.

](https://apogee.avaui.dev/docs/link)[

InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.

](https://apogee.avaui.dev/docs/input)