Gradient Collapse


GradientCollapse is a VTEX component that hides part of the children when it is bigger than the collapseHeight giving the user the show more or show less options. This Component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents


You should follow the usage instruction in the main README.

To import it into your code:

import { GradientCollapse } from ''

You can use it in your code like a React component with the jsx tag: <GradientCollapse />.

  I'm a text and I will collapse if I'm bigger than my collapseHeight!


Prop nameTypeDescriptionDefault Value
collapseHeightNumber!MaxHeight of the container-
childrenNodeThe component to be collapsed-

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the GradientCollapse.

Class nameDescriptionComponent Source
fadeBottomThe bottom of the collapseindex
pointerEventsNoneThe GradientCollapse containerindex
pointerEventsAutoThe Show Less/Show More button areaindex