# Ruled columns mark 01

> Eight link groups in four ruled columns with certification marks, then a full-width wordmark on soft brand blooms, and the copyright.

URL: https://apogee.avaui.dev/docs/footers-sections/ruled-columns-mark-01
Last updated: 2026-10-20

Eight link groups in four ruled columns with certification marks, then a full-width wordmark on soft brand blooms, and the copyright.

Last updated October 20, 2026

Live example: https://apogee.avaui.dev/examples/footers/ruled-columns-mark-01

```astro
---
/**
 * Ruled columns mark 01: Eight link groups in four ruled columns with certification marks, then a full-width wordmark on soft brand blooms, and the copyright.
 *
 * @block footers
 * @order 52
 */
import { ShieldCheck } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {
  /** Certification names, shown as seals under the last group. @category content */
  certifications?: string[] | null
}

const {
  brand = 'Twelvefold',
  columns = [
    { heading: 'Platform', links: [{ label: 'Platform overview', href: '#' }, { label: 'Models overview', href: '#' }] },
    { heading: 'Enterprise', links: [{ label: 'Overview', href: '#' }, { label: 'Case studies', href: '#' }, { label: 'Partners', href: '#' }, { label: 'Security', href: '#' }] },
    { heading: 'Developers', links: [{ label: 'API docs', href: '#' }, { label: 'SDKs', href: '#' }, { label: 'Community', href: '#' }, { label: 'Developer hub', href: '#' }, { label: 'Sample apps', href: '#' }, { label: 'Research', href: '#' }] },
    { heading: 'Legal', links: [{ label: 'Website terms', href: '#' }, { label: 'Terms of use', href: '#' }, { label: 'Enterprise terms', href: '#' }, { label: 'Privacy policy', href: '#' }, { label: 'Trust centre', href: '#' }] },
    { heading: 'Capabilities', links: [{ label: 'Embed', href: '#' }, { label: 'Search', href: '#' }, { label: 'Analyse', href: '#' }] },
    { heading: 'Solutions', links: [{ label: 'Media and entertainment', href: '#' }, { label: 'Advertising', href: '#' }, { label: 'Public sector', href: '#' }, { label: 'Security', href: '#' }, { label: 'Sport and broadcast', href: '#' }] },
    { heading: 'Company', links: [{ label: 'About us', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Newsletter', href: '#' }, { label: 'Blog', href: '#' }, { label: 'Press', href: '#' }] },
    { heading: 'Social', links: [{ label: 'Updates', href: '#' }, { label: 'Videos', href: '#' }, { label: 'Community', href: '#' }] },
  ],
  copyright = '© 2026 Twelvefold, Inc. All rights reserved',
  certifications = ['SOC 2', 'GDPR', 'TPN'],
} = Astro.props
---

<Section as="footer" spacing="none" container={false} class="overflow-hidden">
  <div class="grid grid-cols-2 border-neutral-faded px-gutter md:grid-cols-4">
    {columns.map((g, i) => (
      <nav aria-label={g.heading} class:list={['border-s border-neutral-faded px-6 py-8 md:px-10', i % 4 === 3 && 'md:border-e', i % 2 === 1 && 'max-md:border-e']}>
        <p class="font-semibold">{g.heading}</p>
        <ul class="mt-6 flex list-none flex-col gap-3 p-0">{g.links.map((l) => <li><Link href={l.href} color="neutral" underline="hover">{l.label}</Link></li>)}</ul>
        {i === columns.length - 1 && certifications && <ul class="mt-8 flex list-none gap-3 p-0" aria-label="Certifications">{certifications.map((c) => <li class="grid size-14 place-items-center rounded-full bg-neutral-faded text-center text-[0.5625rem] font-bold"><ShieldCheck class="size-4" aria-hidden="true" />{c}</li>)}</ul>}
      </nav>
    ))}
  </div>

  <div class="px-gutter pb-8 pt-16" style="background: radial-gradient(ellipse 45% 70% at 10% 90%, color-mix(in oklab, var(--background-primary) 25%, transparent), transparent), radial-gradient(ellipse 35% 60% at 95% 100%, color-mix(in oklab, var(--background-primary) 15%, transparent), transparent)">
    <div class="@container"><p class="whitespace-nowrap text-[22.6cqi] font-medium leading-none tracking-tight" aria-hidden="true">{brand}</p></div>
    {copyright && <p class="mt-12 text-center text-sm text-neutral-faded">{copyright}</p>}
  </div>
</Section>
```

## Add

```sh
npx @ava-ui/apogee add footers/ruled-columns-mark-01
```

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).