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.

Examples

Component Properties

Content

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

Property
Type
Default
Description

Constrained Height

Size

200px

The height you wish to constrain the content to, initially

Default Button Styling

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.

Last updated