# Large 13

> A centred mark, heading and two buttons, then copyright and legal links.

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

A centred mark, heading and two buttons, then copyright and legal links.

Last updated October 20, 2026

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

```astro
---
/**
 * Large 13: A centred mark, heading and two buttons, then copyright and legal links.
 *
 * @block footers
 * @order 13
 */
import { CirclePlay, 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 { plain } from '@/components/apogee/sections/_shared/spine.ts'
import { type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

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

const {
  brand = 'Example',
  heading = "Let's get started on something great",
  description = 'Join over 4,000 startups already growing with us.',
  primaryAction = { label: 'Get started', href: '#' },
  secondaryAction = { label: 'View demo', href: '#' },
  copyright = '© 2026 Example. All rights reserved.',
  legal = [{ label: 'Terms', href: '#' }, { label: 'Privacy', href: '#' }, { label: 'Cookies', href: '#' }],
} = Astro.props
---

<Section as="footer" spacing="large">
  <div class="flex flex-col items-center gap-8">
    <FeaturedIcon theme="solid" color="primary" size="large" label={brand}><Orbit /></FeaturedIcon>
    <div class="flex flex-col gap-3 items-center text-center">
      {heading && <Heading as="h2" size="h3">{plain(heading)}</Heading>}
      {description && <p class="text-lg text-neutral-faded">{description}</p>}
    </div>
    {(primaryAction || secondaryAction) && (
    <div class="flex flex-col-reverse gap-3 sm:flex-row">
      {secondaryAction && <Button href={secondaryAction.href} size="large" variant="outline" color="neutral"><CirclePlay slot="start" aria-hidden="true" />{secondaryAction.label}</Button>}
      {primaryAction && <Button href={primaryAction.href} size="large">{primaryAction.label}</Button>}
    </div>
    )}
  </div>
  <div class="mt-12 md:mt-16 flex flex-col-reverse gap-6 border-t border-neutral pt-8 md:flex-row md:items-center md:justify-between">
    {copyright && <p class="text-neutral-faded ">{copyright}</p>}
    {legal && <nav aria-label="Legal"><ul class="flex list-none flex-wrap gap-x-6 gap-y-2 p-0 text-neutral-faded">{legal.map((l) => <li><Link href={l.href} color="inherit" underline="hover">{l.label}</Link></li>)}</ul></nav>}
  </div>
</Section>
```

## Add

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

This copies the block to `src/components/apogee/blocks/footers/` with everything it uses: Button, FeaturedIcon, Heading, 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 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)