> ## 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 02

> Multi-column footer with logo, description, and categorized navigation links in clean layout.

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

## Overview

Footer 02 is a marketing footer component that displays a brand logo with a short description on the left, alongside organized columns of navigation links grouped by category (e.g., Products). It is designed for use at the bottom of marketing pages to provide structured site navigation and branding.

## 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 02** 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                                                                                        |
| -------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| Responsive Layout (Logo & Description) | Current page width is less than or equal to 1200px             | The logo and description group expands to 100% width for smaller screens                             |
| Link Hover                             | Link element is hovered and clickable                          | Link text becomes underlined and font color changes to rgba(27,23,24,1) with a 200ms ease transition |
| Link Disabled                          | Link element is not clickable                                  | Link opacity reduces to 25%                                                                          |
| Mobile Font Size                       | Current page width is less than the built-in mobile breakpoint | Section heading font size 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>