# Small 03 brand

> Social links, the logo in the middle and the copyright, on the brand colour.

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

Social links, the logo in the middle and the copyright, on the brand colour.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/footers/small-03-brand

```astro
---
/**
 * Small 03 brand: Social links, the logo in the middle and the copyright, on the brand colour.
 *
 * @block footers
 * @order 39
 */
import { Orbit } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

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

const {
  brand = 'Example',
  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
---

<Section as="footer" spacing="small" background="primary">
  <div class="grid items-center justify-items-center gap-6 lg:grid-cols-3">
    <div class="lg:order-2"><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></div>
    <div class="lg:order-1 lg:justify-self-start">{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>
    {copyright && <p class="opacity-85 lg:order-3 lg:justify-self-end">{copyright}</p>}
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add footers/small-03-brand
```

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