Content Reveal

The Content Reveal element allows you to hide content on a page until a user clicks a button to read the rest of the content. This is a container element that you can place other elements inside of.

Content Controls

  • Hide By – Allows you to set if you’d like the Content Reveal element to hide content after a certain height or certain number of lines.
  • Max Height – Set the Max Height for the content before the Content Reveal element hides any additional content. Visible only if Hide By is set to Height.
  • Max Lines – Determine the maximum number of lines that show before content is hidden. This field is visible only if Hide By is set to Lines.
  • Scroll To Top When Closed Decide if the page will scroll to the top of the content after it is closed.
  • Labels Change the Reveal Label and Hide Label for the Content Reveal element.

Design Controls


These controls offer different ways to change and modify the Content Reveal element’s content.

  • Transition  set the time it takes for the open and close transition to complete.


The overlay settings allow you to define how the element hides the content.

  • Alignment – Change the position of the reveal/hide button.
  • Button – Define the styles for the button.
  • Gradient – Create a gradient to hide the rest of the content until revealed.


Spacing controls let you fine-tune the distance around the element and button.

  • Container Spacing
    • Margin Top – Increase or decrease the space above the element.
    • Margin Bottom – Adjust the space below the element.
  • Before Button – Set the spacing above the button.