> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Footer 01

> Multi-column footer with categorized navigation links, brand section, and responsive stacked mobile layout.

<Frame>
  ![Footer 01](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Footers/footer-simple-with-bottom.png)
</Frame>

## Overview

Footer 01 is a marketing footer component designed for web and mobile applications. It provides a structured, multi-column layout with grouped navigation links organized by category (e.g., Features), allowing users to quickly navigate to key sections of the site. Each link includes hover states with underline and color transitions for an interactive feel. The component is responsive, adapting its layout and font sizes for mobile breakpoints.

## How to use

<Steps>
  <Step title="Open the Brikl panel" titleSize="h4">
    Navigate to the **Marketings** category in the Brikl panel.
  </Step>

  <Step title="Copy the component" titleSize="h4">
    Find **Footer 01** and click **Copy**.
  </Step>

  <Step title="Paste into your editor" titleSize="h4">
    Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows), or right-click on the canvas and select **Paste**.
  </Step>
</Steps>

## States

This component includes conditional states that automatically change its appearance.

| State                         | Trigger                                                        | Visual effect                                                                                        |
| ----------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| Link Hovered (Clickable)      | User hovers over a link element that is clickable              | Link text becomes underlined and font color changes to rgba(27,23,24,1) with a 200ms ease transition |
| Link Disabled (Not Clickable) | Link element is set to not clickable                           | Link opacity reduces to 25%, visually dimming the element                                            |
| Mobile Breakpoint             | Current page width is less than the built-in mobile breakpoint | Font size of section headers reduces from 16px to 14px                                               |

<Note>
  These states are handled natively by Bubble and require no additional setup. They will work automatically once the component is pasted into your editor.
</Note>

## Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint.

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ❌         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>