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

# Testimonial 08

> Split testimonial layout with featured avatar card, main quote block, and trio review cards.

<Frame>
  ![Testimonial 08](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Testimonials/testimonials-with-main-review-bis.png)
</Frame>

## Overview

Testimonial 08 is a marketing component designed to showcase customer reviews in a visually structured layout. It features a prominent main testimonial with an avatar image, reviewer name, badge, and role, alongside three additional supporting reviews. The component is ideal for building trust and social proof on landing pages or product pages.

## 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 **Testimonial 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 | Current Page Width is less than or equal to 1024px | Groups switch to full-width (100%) and adjust min-height, font sizes reduce (e.g. main review text drops from 30px to 20px), and layout adapts for smaller screens |

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