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.