ReadMore

Demos

The toggle button relies on marketing-ui/client (initReadMore) at runtime to expand and collapse; the demo below shows the clamped default state.

Default

Fullscreen
import { ReadMore } from 'marketing-ui'

function Demo() {
  return (
    <ReadMore
      clamp={3}
      readMoreLabel='Mehr lesen'
      readLessLabel='Weniger lesen'
    >
      <p>
        SONAX steht seit Jahrzehnten für hochwertige Autopflege. Von der
        Lackreinigung über die Versiegelung bis hin zur Innenraumpflege bietet
        das Sortiment für jeden Anwendungsfall die passende Lösung.
      </p>
      <p>
        Alle Produkte werden in Deutschland entwickelt und produziert und
        durchlaufen strenge Qualitätskontrollen, bevor sie in den Handel
        gelangen.
      </p>
    </ReadMore>
  )
}

export default Demo

Props