Read More
A long text cut to a few lines with an ellipsis, and Read more to open it in place. The button only shows when there's more to read.
Preview
About Manali
Manali sits at the head of the Kullu valley, where the Beas comes down fast and cold from the Rohtang. Old Manali climbs the hill above the river: apple orchards, wooden houses with slate roofs, cafés where an afternoon turns into an evening.
Walk the deodar woods to the Hadimba temple, cross the river to Vashisht for its hot springs, or take the road up towards the passes when they open. Then come back down for a bonfire and the stories everyone brought back.
Usage
import { ReadMore } from "zostel-ui";
<ReadMore lines={3}>
<p>…</p>
<p>…</p>
</ReadMore>Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Lines shown before Read more. |
moreLabel · lessLabel | string | "Read more" · "Read less" | The button’s words. |
children | ReactNode | — | The text: one paragraph or several. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
linesnumber3Lines shown before Read more.
moreLabel · lessLabelstring"Read more" · "Read less"The button’s words.
childrenReactNodeThe text: one paragraph or several.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
A stay’s About and a destination’s story. Flat, as the brand is: the text ends in an ellipsis, not a fade. A screen reader has the whole text either way; the button says whether it is open.