ExpandableText

Long copy clamped to a fixed height that fades out at the cut, with a More/Less toggle that animates it open. The toggle only appears when the content actually overflows.

This porcelain tile pairs a honed limestone visual with a through-body composition, giving it depth that survives edge chips and daily wear. It is rated for high-traffic commercial floors, resists staining and frost, and reads calm underfoot while subtle vein movement keeps large installations from looking flat.

Usage

import { ExpandableText } from "@instruments/materia-ui/components/expandable-text";

Best practices

Use it for secondary prose such as a product description or a review; keep headings and anything the reader must see outside it.
Set collapsedHeight in rem to a whole number of lines at the text's line height, so the cut lands between lines.
Reach for Collapsible when the hidden part is separate content behind a labelled trigger rather than the rest of one passage.

Props

Prop	Type	Default	Description
children(required)	`import("react").ReactNode`		Content to render inside the expandable area.
className	`string`		Additional className for the outer container.
collapsedHeight	`number`	`2.5 (2 lines of sm text)`	Collapsed height in rem units.