@eds/show-more
v4.0.1
ShowMore
Description of package.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.
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.
The <ShowMore /> component can be used with any content, including images, text, and other components.
Content that has a delayed layout shift may cause the <ShowMore /> component to calculate the incorrect height. To avoid this, ensure the height of the content is known before rendering.
Images are an exception to this as they are handled separately by the showMore component.