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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Show more
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.

 Max Height (5rem) 80px - Content greater than max height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Show more
 Max Height (5rem) 80px - Content less than max height
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
Show codeCopy code

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

Show codeCopy code