data-region: cb__truncator

The Truncator component allows users to reveal or hide content. This is useful for reducing cognitive load for large sections of content.

  • Alignment Options: center, wide, full
  • Color Themes: none
  • Visible Content Fields: hidden/visible status label, nested content
  • Instances per Page: none to multiple

How it Works

  • Content editors select other content to nest inside the truncator
  • Truncator contents are hidden by default and inherit the truncator’s alignment
  • Clicking on a truncator item will reveal its contents
  • Clicking on a truncator item while open will hide its contents


Explore in Storybook