Collapses
How to add and style collapses.
Last updated
Was this helpful?
How to add and style collapses.
Last updated
Was this helpful?
A Collapse is used for showing and hiding content. Here's an example:
Location in the Parts Library: Base Parts > Data Display > Collapse
There are also collapse parts in Page Sections, including:
Page Sections > Services,
Page Sections > Text blocks,
Page Sections > Card rows,
Page Sections > Meet the team,
Page Sections > Testimonials, and
Page Sections > Stats.
Choose your preferred collapse from the Parts Library, select the part where you’d like to add your collapse, and click ‘+ add to page’.
The collapse (parent) houses two key parts (children):
The collapse title - the visible part containing your title, which can also include other parts
Collapse content - the content area that is revealed when the collapse is opened.
Collpases can be opened and closed using either a dropdown arrow or a 'plus' icon. These are found in the property editor in the right menu under 'Shape'.
Collapses can be given a hard edge or have the level of rounding changed using the Decoration Editor, in the 'Rounding' tab.
Rounding can be applied to all of the collapse, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
To remove all rounding from a collapse, giving it a hard edge, choose rounding of 'none'.
In the rounding editor, when 'full' is applied to 'all' of the collapse, the collapse will have a pill shape.
To edit the title of the collapse, select it to activate the property editing panel on the right.
To edit the text within the content area that is hidden, use 'Command+Click' (Mac) or 'Control+Click' (Windows) on the arrow to open the contents. That will open the content area, and you can go ahead and edit the text, or add any other content you'd like to the area. For example, you can add rows, columns, cards, images, buttons, you name it!
Like many other parts, , , , , , , and can be applied using the property editor on the right, once the collapse has been selected.
Collapse parts are naturally .
Applying an of the collapse is easy - just select the collapse, then go to Image in the property editor on the right. Open up the image property editor, and select your image from the Media Gallery, or upload an image from your device.
You can then adjust the image using the Decoration Editor in the property editor, by accessing the 'Image Opacity' tab.
To edit the , go to Text > Value set, and replace the text with your own.
If there is an in the title, select the icon, then go to Icon > Value set, and replace the icon with your preferred icon. Format the icon as needed.
Hierarchy: parents and children
Accordions
Icons
Text
Customizing and formatting
