Footer — Brand Statement

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface BrandStatementSection {
  heading: string
  links: string[]
}

Files installed (2)

• src/app/components/blocks/footer-brand-statement/footer-brand-statement.component.ts4.5 kB

  Copy

  // Footer led by an oversized brand statement and mission line, with three link
  // columns beneath it and a legal row carrying certifications. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { Github, Layers, Linkedin, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface BrandStatementSection {
    heading: string
    links: string[]
  }
  
  const sections: BrandStatementSection[] = [
    { heading: 'Platform', links: ['Metric layer', 'Governance', 'Alerting', 'Embedding'] },
    { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },
    { heading: 'Resources', links: ['Documentation', 'Guides', 'Benchmarks', 'Status'] },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-footer-brand-statement, [ui-footer-brand-statement]',
    standalone: true,
    // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],
    template: `
      <footer data-slot="footer-brand-statement" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-16">
          <a href="#top" class="flex w-fit items-center gap-2 font-semibold tracking-tight">
            <lucide-icon [img]="Layers" class="text-primary size-5" aria-hidden="true" />
            Northwind
          </a>
  
          <!-- The statement is the only oversized type on the page. Keep it to one
               sentence; at this size a second one stops being read. -->
          <p class="mt-8 max-w-3xl text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl">
            Every number your company acts on should have one definition, one owner, and a history you can read.
          </p>
          <p class="text-muted-foreground mt-4 max-w-xl text-sm leading-relaxed">
            That is the whole product. Everything else here is detail.
          </p>
  
          <div ui-separator class="my-12"></div>
  
          <div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
            @for (section of sectionList; track section.heading) {
              <div>
                <p class="text-muted-foreground/70 text-xs font-medium tracking-wide uppercase">{{ section.heading }}</p>
                <ul class="mt-3 space-y-2">
                  @for (link of section.links; track link) {
                    <li>
                      <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">
                        {{ link }}
                      </a>
                    </li>
                  }
                </ul>
              </div>
            }
          </div>
  
          <div ui-separator class="my-10"></div>
  
          <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
            <div class="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
              <span>© 2026 Northwind Data, Inc.</span>
              <a href="#privacy" class="hover:text-foreground transition-colors">Privacy</a>
              <a href="#terms" class="hover:text-foreground transition-colors">Terms</a>
              <a href="mailto:[email protected]" class="hover:text-foreground transition-colors">
                hello&#64;northwind.example
              </a>
            </div>
            <div class="flex items-center gap-2 sm:ml-auto">
              <span ui-badge variant="outline">SOC 2 Type II</span>
              <span ui-badge variant="outline">GDPR</span>
              <button ui-button variant="ghost" size="icon" class="size-8" aria-label="GitHub">
                <lucide-icon [img]="Github" class="size-4" aria-hidden="true" />
              </button>
              <button ui-button variant="ghost" size="icon" class="size-8" aria-label="LinkedIn">
                <lucide-icon [img]="Linkedin" class="size-4" aria-hidden="true" />
              </button>
            </div>
          </div>
        </div>
      </footer>
    `,
  })
  export class UiFooterBrandStatementComponent {
    protected readonly Github = Github
    protected readonly Layers = Layers
    protected readonly Linkedin = Linkedin
  
    protected readonly sectionList = sections
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('border-border bg-background border-t', this.className)
    }
  }
  

• src/app/components/blocks/footer-brand-statement/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/footer-brand-statement.json