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

# Hero 08

> Centered hero section with headline, subtitle, badge, and two CTA buttons in a clean layout.

<Frame>
  ![Hero 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Heros/hero-with-image-bordered-bis.png)
</Frame>

## Overview

Hero 08 is a marketing hero component designed to serve as a prominent page introduction. It features a large centered headline, a descriptive subtitle, a 'NEW' badge with accompanying text, and two call-to-action buttons ('Discover All Components' and 'View on Github'). It is fully responsive and adapts its layout and font sizes for smaller screen widths.

## 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 **Hero 08** 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                                              |
| ----------------------------- | -------------------------------------------------- | ---------------------------------------------------------- |
| Mobile layout (content group) | Current Page Width is less than or equal to 1024px | Content group max-width is constrained to 768px            |
| Small screen headline         | Current Page Width is less than or equal to 768px  | Headline font size reduces from 60 to 36                   |
| CTA group alignment on tablet | Current Page Width is less than or equal to 1024px | CTA button group switches to centered horizontal alignment |
| Primary button hovered        | Discover All Components button is hovered          | Button opacity reduces to 90                               |
| Primary button disabled       | Discover All Components button is not clickable    | Button opacity reduces to 50                               |
| Secondary button hovered      | View on Github button is hovered                   | Button background color changes to rgba(245, 244, 244, 1)  |
| Secondary button disabled     | View on Github button is not clickable             | Button opacity reduces to 50                               |

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