ShowMore

The <ShowMore /> is used to make content scannable and offers the ability expand and collapse the content.

The <ShowMore /> component consists of two core elements:

• Content mask: Content lives within this area, and includes a gradient at the bottom edge when collapsed. The maxHeight defines how much content is displayed in this area.
• Expand action: Allows the user to expand and collapse the content within the mask.

Show codeCopy code

By default, the max height is set to 4rem (64px) and can be customised via the maxHeight prop. If the height of the content is less than the value set by the maxHeight, the <ShowMore /> component elements won’t be applied.

Show codeCopy code

The <ShowMore /> component can be used with any content, including images, text, and other components.

Show codeCopy code