ArcaneJaspr Codex
Documentation
🔍
ArcaneFooterColumn
Footer columns with title and link lists
Live Demo
Acme Inc

Building the future of web development with modern tools and best practices.

All Systems Operational

Company

About Blog Careers

Legal

Privacy Terms

ArcaneFooterColumn#

Footer column components for building structured footer sections with titles and link lists.

Basic Usage#

ArcaneFooterColumn(
  title: 'Resources',
  links: [
    FooterLink(label: 'Documentation', href: '/docs'),
    FooterLink(label: 'API Reference', href: '/api'),
    FooterLink(label: 'Tutorials', href: '/tutorials'),
  ],
)

Properties#

ArcaneFooterColumn#

PropertyTypeDefaultDescription
titleStringrequiredColumn title
links List<FooterLink> required List of footer links
titleColor String? null Custom title color
linkColor String? null Custom link color
linkGap String? null Gap between links

ArcaneFooterBrandColumn#

PropertyTypeDefaultDescription
logoComponentrequiredLogo component
description String? null Brand description
bottomContent Component? null Content below description
descriptionMaxWidth String? null Max width for description
PropertyTypeDefaultDescription
labelStringrequiredLink text
hrefStringrequiredLink destination
icon String? null Optional icon

Examples#

ArcaneRow(
  gapSize: Gap.xxl,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    ArcaneFooterBrandColumn(
      logo: ArcaneText('Acme Inc', weight: FontWeight.bold),
      description: 'Building the future of web development.',
      bottomContent: ArcaneStatusBadge.success('All Systems Operational'),
    ),
    ArcaneFooterColumn(
      title: 'Product',
      links: [
        FooterLink(label: 'Features', href: '/features'),
        FooterLink(label: 'Pricing', href: '/pricing'),
        FooterLink(label: 'Documentation', href: '/docs'),
      ],
    ),
    ArcaneFooterColumn(
      title: 'Company',
      links: [
        FooterLink(label: 'About', href: '/about'),
        FooterLink(label: 'Blog', href: '/blog'),
        FooterLink(label: 'Careers', href: '/careers'),
      ],
    ),
    ArcaneFooterColumn(
      title: 'Legal',
      links: [
        FooterLink(label: 'Privacy', href: '/privacy'),
        FooterLink(label: 'Terms', href: '/terms'),
      ],
    ),
  ],
)

With Icons#

ArcaneFooterColumn(
  title: 'Connect',
  links: [
    FooterLink(label: 'Twitter', href: 'https://twitter.com', icon: '𝕏'),
    FooterLink(label: 'GitHub', href: 'https://github.com', icon: '⚡'),
    FooterLink(label: 'Discord', href: 'https://discord.gg', icon: '💬'),
  ],
)