#Basic

<Footer>
  <FooterColumn>
    <FooterHeading>About</FooterHeading>
    <FooterItem href="/about">About</FooterItem>
    <FooterItem href="/philosophy">Philosophy</FooterItem>
    <FooterItem href="https://github.com/users/adamzerner/projects/2">
      Roadmap
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Docs</FooterHeading>
    <FooterItem href="/">Components</FooterItem>
    <FooterItem href="/getting-started">Getting started</FooterItem>
    <FooterItem href="/tutorial">Tutorial</FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Code</FooterHeading>
    <FooterItem href="https://github.com/adamzerner/rfui">
      GitHub
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CHANGELOG.md">
      Changelog
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CONTRIBUTING.md">
      Contributing
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/LICENSE">
      License
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Help</FooterHeading>
    <FooterItem href="mailto:adamzerner@protonmail.com">
      Contact
    </FooterItem>
    <FooterItem href="/faq">FAQ</FooterItem>
  </FooterColumn>
</Footer>

#Empty background

Set background to "none".
Note: A dark color is often preferred as a way to distinguish the main content from the footer content.
<Footer background="none">
  <FooterColumn>
    <FooterHeading background="none">About</FooterHeading>
    <FooterItem href="/about">About</FooterItem>
    <FooterItem href="/philosophy">Philosophy</FooterItem>
    <FooterItem href="https://github.com/users/adamzerner/projects/2">
      Roadmap
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading background="none">Docs</FooterHeading>
    <FooterItem href="/">Components</FooterItem>
    <FooterItem href="/getting-started">Getting started</FooterItem>
    <FooterItem href="/tutorial">Tutorial</FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading background="none">Code</FooterHeading>
    <FooterItem href="https://github.com/adamzerner/rfui">
      GitHub
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CHANGELOG.md">
      Changelog
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CONTRIBUTING.md">
      Contributing
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/LICENSE">
      License
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading background="none">Help</FooterHeading>
    <FooterItem href="mailto:adamzerner@protonmail.com">
      Contact
    </FooterItem>
    <FooterItem href="/faq">FAQ</FooterItem>
  </FooterColumn>
</Footer>

#Without default margin

By default, there is a top margin applied to the footer. This is helpful by providing a sensible default. However, you can override this default margin if you'd like as shown below.
The example below uses Tailwind's imporant modifier to make sure that the custom margin takes precedence over the original margin. You may need or want to take a different approach.
<Footer class="!mt-0">
  <FooterColumn>
    <FooterHeading>About</FooterHeading>
    <FooterItem href="/about">About</FooterItem>
    <FooterItem href="/philosophy">Philosophy</FooterItem>
    <FooterItem href="https://github.com/users/adamzerner/projects/2">
      Roadmap
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Docs</FooterHeading>
    <FooterItem href="/">Components</FooterItem>
    <FooterItem href="/getting-started">Getting started</FooterItem>
    <FooterItem href="/tutorial">Tutorial</FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Code</FooterHeading>
    <FooterItem href="https://github.com/adamzerner/rfui">
      GitHub
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CHANGELOG.md">
      Changelog
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/CONTRIBUTING.md">
      Contributing
    </FooterItem>
    <FooterItem href="https://github.com/adamzerner/rfui/blob/master/LICENSE">
      License
    </FooterItem>
  </FooterColumn>
  <FooterColumn>
    <FooterHeading>Help</FooterHeading>
    <FooterItem href="mailto:adamzerner@protonmail.com">
      Contact
    </FooterItem>
    <FooterItem href="/faq">FAQ</FooterItem>
  </FooterColumn>
</Footer>

#Props

size
Required
false
Type
"sm" | "md" | "lg" | "xl"
Default
"md"
Notes
Set this to the same value as the Container.
background
Required
false
Type
"neutral" | "none"
Default
"neutral"
Notes
A dark color is often preferred as a way to distinguish the main content from the footer content.
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"footer">, "size">
Default
none
Notes
See the docs for rest parameters. For Footer, you could pass anything you normally would pass to <footer> because the return value looks something like this:
<footer class={containerClass} {...restWithoutClass}>
  {children}
</footer>

FooterColumn

children*
Required
true
Type
ComponentChild
Default
none

FooterHeading

background
Required
false
Type
"neutral" | "none"
Default
"neutral"
children*
Required
true
Type
ComponentChild
Default
none

FooterItem

href*
Required
true
Type
string
Default
none
children*
Required
true
Type
ComponentChild
Default
none