> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-layout/show-more.md).

# Show More ✅

Constrain lengthy content areas behind a Show more button.

### Overview

Constrain lengthy content areas with a height constraint, and a "Show more" button. When the user clicks it, the area fully unveils.

Supports custom button designs, breakpoint-specific constraints and auto-hides when the content is not long enough to require constraint.

{% embed url="<https://www.loom.com/share/d764011407ba46e2bd49b44b422524eb>" %}

## Examples

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2FAzWDFxPk7GSlALz7kPo6%2Fimage.png?alt=media&amp;token=81d26202-f9dc-47eb-a528-aa2784366bf3" alt=""><figcaption></figcaption></figure>

## Component Properties

#### Content&#x20;

| Property                    | Type | Description                                                                |
| --------------------------- | ---- | -------------------------------------------------------------------------- |
| **Content**                 | Slot | Place your content components here, whatever content you are constraining. |
| **Custom Show More Button** | Slot | Optionally, place a custom button and gradient here.                       |

#### Behavior

| Property             | Type    | Description                                                                                     |
| -------------------- | ------- | ----------------------------------------------------------------------------------------------- |
| **Show More Button** | Variant | Choose whether you want to use the default button or a custom button you've placed in the slot. |
| **Apply At**         | Variant | Choose the breakpoints you want the button to appear at.                                        |
| **Spacer Template**  | Slot    | ( optional ) a tempate for spacer elements you want between the rendered items.                 |

### Layout&#x20;

| Property               | Type | Default | Description                                                |
| ---------------------- | ---- | ------- | ---------------------------------------------------------- |
| **Constrained Height** | Size | 200px   | The height you wish to constrain the content to, initially |

#### Default Button Styling&#x20;

| Property           | Type  | Default     | Description                                                            |
| ------------------ | ----- | ----------- | ---------------------------------------------------------------------- |
| **Button Text**    | Text  | `Show more` | Text for the default button                                            |
| **Gradient Color** | Color | `#`ffffff   | The gradient termination color (at the bottom) for the default button. |

<br>